本頁面由 Cloud Translation API 翻譯而成。

工具列

總覽
示例
使用方式
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)

參數

容器

頁面上 DOM 元素的代碼。API 會將工具列繪製到這個元素中。這與標準視覺化的容器參數類似。您應該將工具列放在使用該工具列的視覺化位置附近。

元件

物件的陣列，每個物件都代表資料或視覺化格式可匯出的格式。工具列將依照加入陣列的順序向使用者顯示選項。每個物件都有一個說明格式的類型屬性，以及視屬性類型而定的一個或多個額外屬性：

type: 'csv'：這個選項會將資料匯出為逗號分隔值檔案。系統會在瀏覽器中開啟「另存新檔」對話方塊。
- datasource：字串 - 資料來源網址。
type: html' - 這個選項會將資料匯出成 HTML 表格。含有資料表的網頁會在瀏覽器的新視窗中開啟。
- datasource：資料來源的網址字串。
type: igoogle - 這個選項可讓使用者在其 iGoogle 網頁中加入視覺化內容。系統會在瀏覽器中開啟 [新增至 iGoogle] 網頁。只有在圖像化版本提供視覺化內容時，才能使用此項目。
- datasource：資料來源的網址字串。
- widget：小工具化版本的 XML 網址字串。請注意，與工具列相關聯的視覺化內容不一定要是小工具化版本。
- userprefs：選用的視覺偏好物件，適用於此視覺化呈現指定偏好設定。
type: htmlcode：這個選項可建立 HTML 程式碼區塊，方便使用者嵌入網頁中，以顯示在 iframe 中以視覺化方式呈現。系統會在瀏覽器中開啟顯示小工具確切 HTML 元素的彈出式視窗。只有在小工具版本中以視覺化方式呈現時，才能使用這個選項。
- datasource：資料來源的網址字串。
- widget：小工具的 XML 網址字串。
- userprefs：選用的視覺偏好物件，適用於此視覺化呈現指定偏好設定。
- style：iframe 樣式的選用字串。例如：「寬度：300 像素；高度：500 像素；」。

範例

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

資料政策

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

本地化

工具列目前只支援英文 (美國)。