此页面由 Cloud Translation API 翻译。

可视化：通用图片图表

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

概览
示例
正在加载
数据格式
配置选项
方法
活动
数据政策
本地化

概览

通用图片图表是 Google Chart API 生成的所有图表的通用封装容器。请先阅读 Chart API 文档，然后再尝试使用此可视化图表。请注意，使用此可视化图表最多可以发送 16K 数据，这与直接调用 Chart API 的 2K 限制不同。

所有数据都使用 DataTable 或 DataView 传递到图表。此外，某些标签会作为数据表中的列传递。

所有其他 Chart API 网址参数（chd 除外）都将作为选项传递。

开发者：Google

示例

以下是几种不同类型的图表的示例。

折线图

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

垂直条形图表

请注意，在封装的条形图中，您无需像指定自行调用图表时一样指定 chxt='x'；如果您未指定轴，通用图片图表会默认尝试正确设置图表。

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

正在加载

google.charts.load 软件包名称为“imagechart”

  google.charts.load('current', {'packages': ['imagechart']});

可视化图表的类名称为 google.visualization.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

数据格式

有两种通用的数据格式：一种用于地图图表，另一种用于所有其他图表。请注意，数据支持的唯一数字格式是 JavaScript 数字类型。

注意：您不应对作为数据或选项传递的任何字符串值进行网址编码。

地图图表

地图图表会获取包含两个必需列的数据表格：

第一列 - [字符串] 国家/地区代码或州/省/自治区/直辖市代码。
第二列 - [数字] 该国家/地区或州/省/自治区/直辖市的值。

如需了解详情，请参阅地图图表文档。

非地图图表

非映射图表接受的数据表包含两个可选列（一个在开头，一个在末尾），以及一个或多个数据列：

第一列 - [可选，字符串] 每个条目表示 X 轴上使用的标签（等同于 chl 或 chxl 参数），表示支持该图表的图表。
后续列 - 任意数量的数字列，每个列代表一个数据系列。
最后一列 - [可选，字符串] 数据列后面的任意数量的字符串列，其中每个条目表示支持数据点的图表的数据点标签。如果要使用此列，必须指定 annotationColumns 选项。

数据会以不同的方式显示，具体取决于图表类型。请参阅图表文档。

关于列索引的注意事项：在将表发送到 Chart API 服务之前，通用图片图表可视化会从数据表格中删除字符串列。因此，本页面中定义的选项、方法和事件中的列索引会在索引计数中包含字符串列；但 Chart API 服务处理的任何选项中的列索引（例如 chm 选项）都会忽略索引计数中的字符串列。

配置选项

此可视化图表定义了以下选项。在传入可视化图表的 draw() 方法的选项对象中定义它们。并非所有图表类型都支持下列所有选项；请参阅静态图片图表类型的相关文档。您可以将任何 Chart API 网址参数作为选项传递。例如，可通过图表中指定的方式指定网址参数 chg=50,50 中的网址参数：options['chg'] = '50,50'。

有关颜色的注意事项：Chart API 颜色格式指定了颜色选项，例如 colors、color 和 backgroundColor。这种格式与 #RRGGBB 格式类似，只不过它包含一个可选的第四十六进制数字以指示透明度。不支持人类可读的颜色，如“红色”、“绿色”、“蓝色”等。Chart API 颜色格式不包含前导 # 符号，但通用图片图表可视化选项将接受带或不带 # 的颜色代码。

名称	类型	默认	说明
注解列	数组<对象>	无	各种图表的数据点标签。这是由对象组成的数组，其中的每个对象均会为图表中的一个数据点分配一个格式化标签。此选项仅适用于支持数据点的图表（请参阅链接的主题，了解具体的数据点），并且数据表必须至少有一个字符串标签列。数组中的每个对象都具有以下属性： `column` [数字] - 包含注释中所用文本的列的索引（从零开始）。您无需在此列的每一行中都输入一个值。 `positionColumn` [数字] - 包含加标签的数据点的列的索引（从零开始）。默认值为第一个数据列。 `color` [字符串] - 注释文本的颜色，采用 Chart API 颜色格式。默认值为“#000000”（黑色）。 `size` [数字] - 注释的字体大小（以像素为单位）。 `priority` [字符串] -“低”、“中”或“高”，用于指定要绘制标签的层。默认值为“medium”，指定标签绘制在条形和线条之后，但在其他标签之前。 `type` [字符串] - 可以是“text”或“flag”。“text”用于创建纯文本注释，而“flag”可创建语音提示框注释。示例 - 此代码段定义了一个黑色的 12 像素文本标签，其中的文本提取自第 0 列，并被分配给同一行第 2 列中的数据点：`options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];`
backgroundColor	字符串	'#FFFFFF'（白色）	图表的背景颜色，采用 Chart API 颜色格式。
颜色	字符串	自动	指定用于所有系列的基本颜色；每个系列将是指定的颜色的渐变。颜色以 Chart API 颜色格式指定。如果指定了 `colors`，系统会忽略此参数。
颜色	数组<字符串>	自动	使用此字段为每个数据系列分配特定颜色。颜色以 Chart API 颜色格式指定。颜色 i 用于数据列 i；如果数据列多于颜色，则颜色 i 开始换行。如果所有系列都接受单一颜色的变体，请改用 `color` 选项。
启用事件	布尔值	false	使图表抛出用户触发的事件，例如点击或鼠标悬停。仅适用于特定图表类型。请参阅下面的事件。
fill	布尔值	false	如果为 true，则填写每行下方的区域。仅适用于折线图。
firstHiddenColumn	number	无	数据列索引。列出的列以及所有后续列不会用于绘制主图表系列元素（例如折线图中的折线或条形图上的条形图），而是用作标记和其他注释的数据。请注意，此字符串计数中包含字符串列。
高度	number	200	图表的高度（以像素为单位）。如果缺失或不在可接受的范围内，则使用所包含元素的高度。如果该值也在可接受范围内，则使用默认高度。
标签	字符串	“无”	[仅限饼图] 针对每个切片显示的标签（如果有）。请从以下值中进行选择： “none”- 无标签。 'value' - 将切片值显示为标签。 “name”- 将切片名称（列名称）显示为标签。
传奇	字符串	“right”	图表图表的显示位置（相对于图表）。请指定以下值之一：“top”、“bottom”、“left”、“right”、“none”。在不包含图例的图表（例如地图图表）中被忽略。
最大值	number	数据最大值	体重秤上显示的最大值。饼图会忽略该值。默认值为最大数据值，条形图除外，其默认值为数据最大值。如果表格包含多个数据列，系统会为条形图忽略此参数。
分钟	number	数据量下限	缩放比例显示的最小值。饼图会忽略该值。默认值为最小数据值，条形图除外，其默认为零。如果表格包含多个数据列，系统会为条形图忽略此参数。
showCategoryLabels	布尔值	true	标签是否应在类别（即行）轴上显示。仅适用于折线图和条形图。
showValueLabels	布尔值	true	True 在值轴上显示标签。仅适用于折线图和条形图。
单列显示	number	无	仅渲染指定的数据列。此数字是表中从零开始的索引，其中 0 是第一个数据列。分配给单列的颜色与渲染所有列时的颜色相同。不能与饼图或地图图表一起使用。
标题	字符串	空字符串	图表标题。如果未指定，则不会显示任何标题。等效图表参数为 `chtt`。
valueLabelsInterval 中	number	自动	显示值轴标签的时间间隔。例如，如果 `min` 为 0，`max` 为 100，`valueLabelsInterval` 为 20，则该图表将以 (0, 20, 40, 60, 80 100) 的形式显示轴标签。
width	number	400	图表的宽度（以像素为单位）。如果缺失或不在可接受的范围内，则使用所包含元素的宽度。如果该值也在可接受范围内，则使用默认宽度。

方法

方法	返回值类型	说明
`draw(data, options)`	无	绘制地图。
`getImageUrl()`	字符串	返回用于请求图表的 Google 图表 API 网址。请注意，这个长度可以超过 2,000 个字符。如需了解详情，请参阅 Google Chart API。

事件

如果您将 enableEvents 属性设置为 true，则支持的图表将针对下表中列出的用户事件抛出事件。所有这些事件都会返回一个具有以下属性的 event 对象：

type - 表示事件类型的字符串。
region - 受影响区域的 ID。将 chof=json 参数添加到原始图表类型中即可查看可用名称的列表。如需了解详情，请参阅 chof=json。

名称	说明	类型 Value
`error`	尝试渲染图表出错时触发。	id、message
`onmouseover`	用户将鼠标悬停在图表元素上时触发。	“mouseover”
`onmouseout`	用户将鼠标悬停在图表元素上时触发。	“mouseout”
`onclick`	在用户点击图表元素时触发。	“click”

哪些图表支持事件？

任何支持 chof=json 参数的图表都支持抛出事件（即，除特殊图表之外的所有图表，例如二维码）。

事件处理示例

以下示例展示了用于记录鼠标点击的条形图。

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

数据政策

数据会发送到 Google Chart API 服务。

本地化

此可视化支持 Google 图表服务支持的任何本地化。