重要提示:Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已被正式弃用。根据我们的弃用政策,该 API 仍可继续使用。
概览
使用 Google Charts API 用图片渲染的单个或多个火花谱线图。图片包含在 HTML 表格中。
示例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "imagesparkline"
。
google.charts.load("current", {packages: ["imagesparkline"]});
该可视化图表的类名称为 google.visualization.ImageSparkLine
。
var visualization = new google.visualization.ImageSparkLine(container);
数据格式
任意数量的列。所有列都应为数字。 每一列都显示为单个火花谱线图。
配置选项
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
颜色 | string | 指定用于所有图表的颜色。
格式为 #rrggbb 的字符串。例如:“#00cc00”。
仅在未指定 colors 选项时使用。 |
|
颜色 | 字符串数组 | 默认颜色 | 数据列使用的颜色。 一个字符串数组,其中每个元素都是一个格式为 #rrggbb 的字符串。 例如:“#00cc00”。 颜色 i 用于数据列 i。 如果颜色数小于列数,则颜色选择将环绕。 |
fill | boolean | false | 如果为 true,则会以颜色填充线条下方的区域。 |
高度 | number | 容器高度 | 图片的高度(以像素为单位)。 |
labelPosition | string | 无 | 标签的位置。支持的值包括“none”、“left”和“right”。 |
max | 数字数组 | 每个火花谱线图的最大数据值 | 每个火花谱线图的数据值范围的最大值。 数组中的索引必须与 DataTable 中的列索引匹配。如果所有值均为 null,则此值将是序列中的最大值。 |
分钟 | 数字数组 | 每个火花谱线图的最小值 | 每个火花谱线图的数据值范围的最小值。 数组中的索引必须与 DataTable 中的列索引匹配。如果所有值均为 null,则此值将是序列中的最小值。 |
showAxisLines | boolean | true | 如果为 true,系统会显示轴线。如果为 false,则它们不是,并且 showValueLabel 的默认值为 false。 |
showValueLabels | boolean | true,但 showAxisLines 为 false 时除外。 | 如果为 true,系统会显示值轴标签。 |
标题 | 字符串数组 | 未显示任何标题 | 每个火花谱线图使用的标题。 |
宽度 | number | 容器宽度 | 图表的宽度(以像素为单位)。 |
layout | string | “v” | 垂直或水平布局:“v”表示垂直,“h”表示水平。 |
方法
方法 | 返回值类型 | 说明 |
---|---|---|
draw(data, options) |
无 | 绘制图表。 |
getSelection() |
选择元素数组 | 以对象数组的形式返回所选图表的索引。每个对象都有一个列属性,其中包含所选火花谱线图的列号。可以返回多个选定的列。 |
setSelection(selection) |
无 | 选择指定的火花谱线图,并取消选择任何未指定的火花谱线图。select 是对象数组,每个对象都有一个数字 column 属性,该属性是所选火花谱线图的索引。如需了解详情,请参阅 setSelection() 。 |
事件
名称 | 说明 | 属性 |
---|---|---|
select | 标准选择事件。 | 无 |
数据政策
请参阅 Chart API 日志记录政策。