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

視覺化：一般圖片圖表

重要事項：Google 圖表工具的「圖片圖表」部分已自 2012 年 4 月 20 日起正式淘汰。但請放心，該功能將根據淘汰政策持續運作。

Overview
例子
載入中
資料格式
設定選項
方法
事件
資料政策
本地化

總覽

一般圖片圖表是 Google Chart API 產生之所有圖表的通用包裝函式。嘗試使用這個圖表前，請先參閱 Chart API 說明文件。請注意，與直接呼叫 Chart API 的情況不同，您可以使用這個圖表傳送多達 16, 000 的資料。

所有資料都會使用 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 參數) 使用的標籤。
下一欄 - 數值欄的數量不限，每個數值都代表一個資料序列。
最後一欄 - [選填, string] 資料欄後方的任何字串欄，其中每個項目都代表支援圖表的資料點標籤。如要使用這個資料欄，您必須指定 annotationColumns 選項。

視圖表類型而定，資料會以不同方式顯示。請參閱圖表的說明文件。

資料欄索引附註：一般圖片圖表的視覺化功能會先移除資料表中的字串欄，然後再將資料表傳送至 Chart API 服務。因此，本頁定義的選項、方法和事件中的資料欄索引會在索引計數中納入字串資料欄；但如果資料欄索引出現在 Chart API 服務處理的任何選項 (例如 chm 選項)，則會忽略索引計數中的字串欄。

設定選項

此圖表定義了下列選項。請在傳遞至視覺化 draw() 方法的選項物件中定義相關設定。下列選項並非適用於所有圖表類型；請參閱靜態圖片圖表類型的說明文件。您可以將任何 Chart API 網址參數做為選項傳遞。舉例來說，若要指定圖表視覺呈現的網址參數 chg=50,50，應使用以下方式指定：options['chg'] = '50,50'。

顏色注意事項：colors、color 和 backgroundColor 等顏色選項是以 Chart API 顏色格式指定。這個格式與 #RRGGBB 格式類似，差別在於它包含一個代表透明度的選用第四個十六進位數字。不支援人類可讀的顏色，例如「紅」、「綠」和「藍色」等。Chart API 顏色格式不含開頭的 # 符號，但一般圖片圖表視覺化選項接受包含或不含 # 的顏色代碼。

名稱	類型	預設	說明
annotationColumns	Array<object>	無	各種圖表類型的資料點標籤。這是物件的陣列，每個物件都會將格式化標籤指派給圖表中的一個資料點。這個選項僅適用於支援資料點的圖表 (請參閱連結的主題，瞭解有哪些)，且資料表至少要有一個字串標籤欄。陣列中的每個物件都具備下列屬性： `column` [數字] - 以零為基準的資料欄索引，該資料欄含有註解中使用的文字。您不需要在此欄的每個列中輸入值。 `positionColumn` [數字]：保留要加上標籤的資料點的資料欄以零為基準的索引。預設值為第一個資料欄。 `color` [字串]：註解文字的顏色，採用圖表 API 顏色格式。預設值為「#000000」(黑色)。 `size` [數字] - 註解的字型大小 (以像素為單位)。 `priority` [string]：可使用「low」、「medium」或「high」，用於指定要繪製標籤的圖層。預設值為「medium」，表示標籤是在長條和線條後面，但顯示在其他標籤之前。 `type` [string]：'text' 或「flag」。「text」可建立純文字註解，而「flag」則會建立語音說明框註解。範例 - 以下程式碼片段定義了一個 12 像素的黑色文字標籤，其中文字是從第 0 欄擷取，並指派給同一資料列第 2 欄的資料點：`options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];`
backgroundColor	字串	「#FFFFFF」(白色)	圖表 API 顏色格式的圖表背景顏色。
顏色	字串	自動	指定所有序列要使用的基本顏色；每個系列都會是指定顏色的階梯。您可以使用圖表 API 顏色格式指定顏色，如果指定 `colors`，系統會忽略這項設定。
顏色	陣列<字串>	自動	藉此為各個資料序列指定特定顏色。您可以使用圖表 API 顏色格式指定顏色。顏色 i 會用於資料欄 i，如果資料欄超過顏色，則會從頭到頭換行。如果所有系列都接受單一顏色的變化版本，請改用 `color` 選項。
enableEvents	boolean	false	讓圖表擲回使用者觸發的事件，例如點擊或滑鼠遊標懸停。僅支援特定圖表類型。請參閱下方的「事件」一節。
填滿	boolean	false	如果為 true，請在每一行的下方填入區域。僅適用於折線圖。
firstHiddenColumn	號碼	無	資料欄索引。列出的資料欄和後續的所有資料欄「不會」用於繪製主要圖表系列元素 (例如折線圖上的線條或長條圖上的長條)，而會用作標記和其他註解的資料。請注意，字串資料欄會納入這個索引計數中。
高度	號碼	200	圖表的高度，以像素為單位。如果缺少或位於可接受的範圍，則會使用所含元素的高度。如果該值也超出可接受範圍，系統就會使用預設高度。
標籤	字串	「無」	[僅限圓餅圖] 每個區塊顯示的標籤 (如有)。請選擇下列值：「無」- 無標籤。「值」：以標籤顯示區塊值。「name」：以標籤顯示區塊名稱 (欄名稱)。
傳說	字串	「右」	相對於圖表的圖表顯示位置。請指定下列其中一個值：「top」、「bottom」、「left」、「right」或「none」。如果圖表不含圖例 (例如地圖圖表)，系統會忽略此值。
max	號碼	資料最大值	體重計上顯示的最大值。圓餅圖會忽略這個欄位。預設值為資料最大值，長條圖除外，長條圖的預設值為資料最大值。如果表格有多個資料欄，系統會忽略長條圖。
分鐘	號碼	數值資料值	體重計上顯示的最小值。圓餅圖會忽略這個欄位。預設值為資料最小值，但長條圖的預設值為零。如果表格有多個資料欄，系統會忽略長條圖。
showCategoryLabels	boolean	true	標籤是否應顯示在類別 (即列) 軸上。僅適用於折線圖和長條圖。
showValueLabels	boolean	true	True 會在值軸上顯示標籤。僅適用於折線圖和長條圖。
singleColumnDisplay	號碼	無	僅顯示指定的資料欄。這個數字是從資料表中從零開始的索引，其中 0 是第一個資料欄。指派給單一資料欄的顏色會與算繪所有資料欄時相同。無法搭配圓餅圖或地圖圖表使用。
title	字串	空字串	圖表標題。如未指定，系統就不會顯示標題。對等的圖表參數為 `chtt`。
valueLabelsInterval	號碼	自動	值軸標籤的顯示間隔。舉例來說，如果 `min` 為 0，`max` 為 100，而 `valueLabelsInterval` 為 20，圖表就會顯示軸標籤如下 (0、20、40、60、80 100)。
寬度	號碼	400	圖表的寬度，以像素為單位。如果缺少或位於可接受的範圍，則會使用所含元素的寬度。如果這個值也超出可接受範圍，系統就會使用預設寬度。

方法

方法	傳回類型	說明
`draw(data, options)`	無	繪製地圖。
`getImageUrl()`	字串	傳回用來要求圖表的 Google Chart API 網址。請注意，這個字元長度可能超過 2,000 個字元。詳情請參閱 Google Chart API。

事件

如果將 enableEvents 屬性設為 true，支援圖表就會針對下表所列的使用者事件擲回事件。這些事件全都會傳回具有下列屬性的 event 物件：

type - 代表事件類型的字串。
region - 受影響地區的 ID。只要在原始圖表類型中加入 chof=json 參數，即可查看可用名稱的清單。詳情請參閱 chof=json。

名稱	說明	類型值
`error`	嘗試算繪圖表時發生錯誤時觸發。	id、message
`onmouseover`	在使用者將滑鼠遊標懸停在圖表元素上時觸發。	「mouseover」
`onmouseout`	在使用者滑鼠遊標移離圖表元素時觸發。	「mouseout」
`onclick`	使用者點擊圖表元素時觸發。	「按一下」

哪些圖表支援事件？

支援 chof=json 參數的所有圖表都支援擲回事件，也就是除了特殊圖表以外的所有圖表，例如 QR code。

事件處理範例

以下範例顯示記錄滑鼠點擊次數的長條。

<!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 圖表服務支援的任何本地化版本。

視覺化：一般圖片圖表 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

總覽

示例

折線圖

直條圖

圓餅圖

雷達圖