重要提示:Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已被正式弃用。根据我们的弃用政策,该 API 仍可继续使用。
概览
使用 Google Charts API 以图片形式渲染的折线图。
示例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["imagelinechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageLineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "imagelinechart"
。
google.charts.load('current', {packages: ['imagelinechart']});
该可视化图表的类名称为 google.visualization.ImageLineChart
。
var visualization = new google.visualization.ImageLineChart(container);
数据格式
第一列应为字符串,并且包含类别标签。 后面可跟随任意数量的列,且都必须为数字列。 每列都显示为单独的一行。
配置选项
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
backgroundColor | string | '#FFFFFF'(白色) | 图表的背景颜色,采用 Chart API 颜色格式。 |
颜色 | 数组<字符串> | 自动选择 | 用于为每个数据系列指定特定的颜色。颜色以 Chart API 颜色格式指定。
颜色 i 用于数据列 i;如果数据列数多于颜色,则换行到开头。如果一种颜色的变体适用于所有系列,请改用 color 选项。 |
enableEvents | boolean | false | 使图表抛出用户触发的事件,例如点击或鼠标悬停。 仅支持特定图表类型。请参阅下面的“事件”。 |
高度 | number | 容器高度 | 图表的高度(以像素为单位)。 |
传奇 | string | “right” | 图例的位置和类型。可以是以下某一项:
|
max | number | 自动 | 要在 Y 轴中显示的最大值。 |
分钟 | number | 自动 | 要在 Y 轴中显示的最小值。 |
showAxisLines | boolean | true | 如果此政策设为 false,系统会移除轴线和标签。 |
showCategoryLabels | boolean | 与 showAxisLines 相同 | 如果设置为 false,系统会移除类别的标签(X 轴标签)。 |
showValueLabels | boolean | 与 showAxisLines 相同 | 如果设为 false,系统会移除值的标签(Y 轴标签)。 |
标题 | string | 无标题 | 要在图表上方显示的文本。 |
valueLabelsInterval | number | 自动选择 | 显示值轴标签的时间间隔。例如,如果 min 为 0、max 为 100 且 valueLabelsInterval 为 20,则图表将在 (0, 20, 40, 60, 80 100) 处显示轴标签。 |
宽度 | number | 容器宽度 | 图表的宽度(以像素为单位)。 |
方法
方法 | 返回值类型 | 说明 |
---|---|---|
draw(data, options) |
无 | 绘制图表。 |
事件
您可以注册以监听通用图片图表页面中所述的事件。
数据政策
请参阅 Chart API 日志记录政策。