此页面由 Cloud Translation API 翻译。

工具栏

Overview
示例
用量
1. 输出类型
2. 语法
数据政策

概览

您可以向任何可视化图表添加工具栏元素，以便用户将底层数据导出到 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 会将工具栏绘制到此元素中。这类似于标准可视化图表的容器参数。您应将工具栏放在使用它的可视化图表旁边。

组件

一个对象数组，其中每个对象都描述了数据或可视化图表可以导出到的格式。工具栏将按照添加到数组中的顺序向用户公开选项。每个对象都有一个描述格式的类型属性，以及一个或多个其他属性（具体取决于类型）：

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);
};

数据政策

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

本地化

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