本頁面由 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> 程式碼，和/或
連結，可讓使用者將這個小工具嵌入他們的小工具。

語法

google.visualization.drawToolbar(container, components)

參數

container

網頁上 DOM 元素的處理常式。API 會在此元素中繪製工具列。這類似於標準視覺化的容器參數。工具列應該位於使用該功能的圖表旁。

元件

物件陣列，每個物件都說明資料或視覺化內容可匯出至哪些格式。工具列會按照加入陣列的順序，向使用者顯示選項。每個物件都有說明格式的類型屬性，以及一或多個其他屬性 (視類型而定)：

type: 'csv'：此選項會將資料匯出為以半形逗號分隔的值檔案。瀏覽器隨即會開啟「另存新檔」對話方塊。
- datasource: 'string' - 資料來源網址。
type: html' - 此選項可將資料匯出至 HTML 表格。含有該資料表的頁面隨即會在瀏覽器的新視窗中開啟。
- datasource：資料來源網址字串。
type: igoogle - 這個選項可讓使用者將視覺化圖表新增至自己的 i 網頁。瀏覽器隨即會開啟「新增至 Google」頁面。只有在小工具化版本有可用的圖表時，才使用此選項。
- 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);
};

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。部分元件的資料取自提供給工具列的個別資料來源。

本地化

這個工具列目前僅支援英文 (美國)。