圖表:一般圖片圖表

重要資訊:自 2012 年 4 月 20 日起,Google 圖表的「圖片圖表」部分已正式淘汰。根據淘汰政策,這項政策仍然有效。

簡介

通用圖片圖表是一種通用包裝函式,針對 Google Chart API 產生的所有圖表。請先嘗試使用 Chart API 說明文件,再嘗試使用這個視覺呈現。請注意,與 Chart API 的直接呼叫不同,上限為 26, 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 軸 (相當於 chlchxl 參數) 的圖表所使用的標籤。
  • 下一個資料欄 - 任意數量的欄數,每個資料欄代表一個資料序列。
  • 最後一欄 - [選填、字串] 資料欄字串的任意數量欄,其中每個項目都代表支援該資料欄的資料點標籤。如要使用這個資料欄,您必須指定 annotationColumns 選項。

系統會根據圖表類型,以不同的方式顯示資料。請參閱圖表的說明文件。

資料欄索引的注意事項:一般映像檔圖表會在將資料表傳送至 Chart API 服務之前,從資料表中移除字串資料欄。因此,本頁中定義的選項、方法和事件的欄索引會包含索引計數中的字串欄;但 Chart API 服務 (例如 chm 選項) 處理之任何選項中的資料欄索引,都會忽略索引計數中的字串欄。

設定選項

這個視覺呈現方式包含以下選項。請在傳遞至視覺化 draw() 方法的選項物件中定義這些項目。並非所有圖表類型都支援下列選項;如需靜態圖片圖表類型的說明文件,請參閱相關說明文件。您可以傳送任何 Chart API 網址參數做為選項。舉例來說,您可以使用圖表示意圖指定 chg=50,50 的網址參數。options['chg'] = '50,50'

顏色注意事項:系統會以 colorscolorbackgroundColor 等顏色選項指定圖表 API 顏色格式。這種格式與 #RRGGBB 格式類似,差別在於這個格式包含可選用的透明度的第四位數十六進位數字。不支援容易理解的顏色,例如「紅色」、「綠色」和「藍色」。Chart API 色彩格式不包含開頭的 # 符號,但一般圖片圖表的視覺化選項可選擇是否要使用 # 或無顏色。

名稱 類型 預設 說明
annotationColumns 陣列<object>

各類型圖表的資料點標籤。這是物件陣列,每個物件都會將格式化標籤指派給圖表上的一個資料點。這個選項僅適用於支援資料點的圖表 (請參閱連結主題,瞭解哪些資料點可在資料表中使用),且資料表必須有至少一個字串標籤欄。

陣列中的每個物件都有下列屬性:

  • column [number] - 資料欄的零索引索引,保留註解中使用的文字內容。此資料欄的每一列都不需要一個值。
  • positionColumn [number] - 資料欄的零索引索引,保留資料點已加上標籤。預設值為第一個資料欄。
  • color [string] - 圖表 API 顏色格式中註解文字的顏色。 預設值為「#000000」(黑色)。
  • size [number] - 註解的字型大小 (以像素為單位)。
  • priority [string] - 「低」、「中」或「高」,可指定標籤的繪製層。預設值為「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 string 「#FFFFFF」(白色) 圖表 API 色彩格式的圖表背景色彩。
顏色 string 自動 指定用於所有系列的基本顏色;每個系列都會是指定顏色的分級。您可以透過圖表 API 色彩格式指定顏色。如果指定了 colors,系統會忽略這個屬性。
顏色 陣列<string> 自動 可用來為每個資料序列指派特定顏色。您可以透過圖表 API 色彩格式指定顏色。資料欄 i 用於資料欄 i,如果資料欄比顏色多一點,則會在開頭加上換行。如果所有系列都接受單一顏色的變化版本,請改用 color 選項。
啟用事件 布林值 讓圖表擲回使用者觸發的事件,例如點擊或滑鼠懸停。 僅適用於特定圖表類型。請參閱下方的活動一節。
填滿 布林值 如果為 true,則會填入每一行之下的區域。僅適用於折線圖。
首次隱藏的資料欄 數字

資料欄資料欄索引。所列資料欄以及所有後續資料欄不會用來繪製主要圖表序列元素 (例如折線圖上的線條或長條圖上的長條),而是會用於標記和其他註解的資料。請注意,字串欄會納入此索引計數。

height 數字 200 圖表的高度,以像素為單位。如果缺少或不在可接受的範圍內,則會使用內含元素的高度。如果這超出可接受的範圍,就會使用預設高度。
標籤 string

[僅適用於圓餅圖] 要顯示每個標籤要顯示的標籤 (如果有的話)。選擇下列的值:

  • 'none' - 無標籤。
  • 'value' - 將 Slice 值顯示為標籤。
  • 'name' - 將區塊名稱 (欄名稱) 顯示為標籤。
傳說 string 「右」 相對於圖表的圖表顯示圖表圖例的位置。請指定下列其中一個值:「top」、「bottom」、「left」、「right」或「none」。忽略不含圖例的圖表 (例如地圖圖表)。
最高 數字 資料值上限 顯示在圖表上的最大值。圓餅圖被忽略。預設值為最高資料值,但長條圖除外,預設值是最大值。如果資料表有多個資料欄,系統會忽略長條圖。
數字 Mimimum 資料值 顯示在圖表上的最小值。圓餅圖被忽略。預設值為最低資料值,但長條圖中的預設值為 0。如果資料表含有多個資料欄,則系統會忽略長條圖。
showCategoryLabels 布林值 true 標籤是否應顯示於類別 (即列) 軸。僅適用於折線圖和長條圖。
showValueLabels 布林值 true True 會在值軸上顯示標籤。僅適用於折線圖和長條圖。
單一資料欄顯示 數字 僅轉譯指定的資料欄。這個數字為資料表中的零索引,其中 0 是第一個資料欄。指派給單一資料欄的顏色與轉譯所有資料欄時的顏色相同。無法搭配圓餅圖或地圖圖使用。
title string 空字串 圖表標題。如未指定,系統不會顯示標題。對應的圖表參數為 chtt
valueLabels 間隔 數字 自動 顯示值軸標籤的時間間隔。舉例來說,如果 min 為 0、max 為 100 和 valueLabelsInterval 為 20,則圖表會顯示 (0, 20, 40, 60, 80 100) 的軸標籤。
width 數字 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 當使用者將滑鼠遊標移到圖表元素時觸發。 「滑鼠懸停」
onmouseout 當使用者離開圖表元素時觸發。 "mouseout"
onclick 使用者點選圖表元素時觸發。

「click」

哪些圖表支援事件?

任何支援 chof=json 參數的圖表都支援擲回事件 (也就是特殊圖表以外的所有圖表,例如 QR 圖碼)。

事件處理範例

以下範例顯示記錄滑鼠點擊的列。

<!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 Chart 服務支援的所有本地化功能。