工具栏

概览

您可以向任何可视化图表添加工具栏元素,使用户能够将底层数据导出到 CSV 文件或 HTML 表格中,或者提供代码以将可视化图表嵌入到任意网页或小工具中。

开发者: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: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

用途

通过调用 google.visualization.drawToolbar() 方法,向工具栏中添加允许的导出类型和每种导出所需的数据,将工具栏添加到您的网页中。

要使用工具栏,您的可视化图表必须从网址获取其数据;您不能传入手动填充的 DataTable 或 DataView 对象。您要将用于填充可视化图表的数据的网址传入 drawToolbar() 方法。

如果您想提供包含该小工具的 iGoogle 组件或嵌入式 iframe,则必须提供该小工具的可视化图表版本的网址。

输出类型

工具栏可以为用户提供以下一种或多种输出类型的选择,具体取决于您在 drawToolbar() 方法中配置工具栏的方式:

  • 数据的简单 CSV 版本(浏览器将呈现或提供下载和保存的选项,具体取决于您的浏览器配置和/或
  • 一个包含数据的 HTML 表格(在新浏览器窗口中打开)和/或
  • HTML <iframe> 代码,用于将此可视化图表嵌入网页,和/或
  • 指向可让用户在其 iGoogle 页面中嵌入该小工具的页面链接。

语法

google.visualization.drawToolbar(container, components)

参数

容器
页面上 DOM 元素的句柄。API 会将工具栏绘制到此元素中。这与标准可视化的 container 参数类似。您应将工具栏放在使用该可视化图表的旁边。
组件
一组对象,每个对象描述可以导出数据的格式或可视化图表。工具栏会按照添加到数组中的顺序向用户显示选项。每个对象都有一个类型说明属性,以及一个或多个附加属性,具体取决于类型:
  • type: 'csv' - 此选项会将数据导出到逗号分隔值文件。此时,系统会打开“另存为”对话框。
    • datasource:'string' - 数据源网址。
  • type: html' - 此选项可将数据导出到 HTML 表格中。 包含数据表格的页面将在新窗口中打开。
    • datasource:数据源网址字符串。
  • type: igoogle - 此选项允许用户将可视化图表添加到其 iGoogle 页面。系统将在浏览器中打开一个“添加到 iGoogle”页面。仅当可视化图表版本化后才能使用该功能。
    • datasource:数据源网址字符串。
    • Gadget:小工具化版本的 XML 网址字符串。请注意,工具栏关联的可视化图表不必是小工具版本。
    • userprefs:适用于此可视化图表的可选偏好设置对象,用于指定可视化图表偏好设置。
  • type: htmlcode - 此选项会创建一段 HTML 代码,用户可以将其嵌入网页以在 iframe 中显示可视化。包含该小工具的确切 HTML 元素的弹出式窗口将在浏览器中打开。仅当可视化图表版本化时,才能使用该窗口。
    • datasource:数据源网址字符串。
    • Gadget:小工具的 XML 网址字符串。
    • userprefs:适用于此可视化图表的可选偏好设置对象,用于指定可视化图表偏好设置。
    • style:iframe 样式的可选字符串。 例如:“width: 300px; height: 500px;”。

示例

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

数据政策

所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。对于某些组件,数据取自提供给工具栏的相应数据源。

本地化

工具栏目前仅支持美式英语。