可视化：Sparkline（图片）

重要提示：Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已被正式弃用。根据我们的弃用政策，该 API 仍可继续使用。

  1. Overview
  2. 示例
  3. 正在加载
  4. 数据格式
  5. 配置选项
  6. 方法
  7. 事件
  8. 数据政策

概览

使用 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 日志记录政策。