重要資訊:自 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 數字類型。
注意:請勿對以資料或選項形式傳遞的任何字串值進行網址編碼。
地圖圖表
地圖表格會使用一份內含兩個必要資料欄的表格:
- 第一欄欄 - [string] 國家/地區或州/省代碼。
- 第二欄 - [<數字>] 該國家/地區或州/省的值。
詳情請參閱地圖圖表說明文件。
非地圖圖表
非地圖圖表會採用含有兩個選用資料欄 (開頭與結尾各為一個) 的資料表格,以及下列一或多個資料欄:
- 第一欄 - [選用,字串] 每個項目都代表支援 X 軸 (相當於
chl
或chxl
參數) 的圖表所使用的標籤。 - 下一個資料欄 - 任意數量的欄數,每個資料欄代表一個資料序列。
- 最後一欄 - [選填、字串] 資料欄字串的任意數量欄,其中每個項目都代表支援該資料欄的資料點標籤。如要使用這個資料欄,您必須指定
annotationColumns
選項。
系統會根據圖表類型,以不同的方式顯示資料。請參閱圖表的說明文件。
資料欄索引的注意事項:一般映像檔圖表會在將資料表傳送至 Chart API 服務之前,從資料表中移除字串資料欄。因此,本頁中定義的選項、方法和事件的欄索引會包含索引計數中的字串欄;但 Chart API 服務 (例如 chm
選項) 處理之任何選項中的資料欄索引,都會忽略索引計數中的字串欄。
設定選項
這個視覺呈現方式包含以下選項。請在傳遞至視覺化 draw()
方法的選項物件中定義這些項目。並非所有圖表類型都支援下列選項;如需靜態圖片圖表類型的說明文件,請參閱相關說明文件。您可以傳送任何 Chart API 網址參數做為選項。舉例來說,您可以使用圖表示意圖指定 chg=50,50
的網址參數。options['chg'] = '50,50'
。
顏色注意事項:系統會以 colors
、color
和 backgroundColor
等顏色選項指定圖表 API 顏色格式。這種格式與 #RRGGBB 格式類似,差別在於這個格式包含可選用的透明度的第四位數十六進位數字。不支援容易理解的顏色,例如「紅色」、「綠色」和「藍色」。Chart API 色彩格式不包含開頭的 # 符號,但一般圖片圖表的視覺化選項可選擇是否要使用 # 或無顏色。
名稱 | 類型 | 預設 | 說明 |
---|---|---|---|
annotationColumns | 陣列<object> | 無 | 各類型圖表的資料點標籤。這是物件陣列,每個物件都會將格式化標籤指派給圖表上的一個資料點。這個選項僅適用於支援資料點的圖表 (請參閱連結主題,瞭解哪些資料點可在資料表中使用),且資料表必須有至少一個字串標籤欄。 陣列中的每個物件都有下列屬性:
範例 - 這個程式碼片段定義了黑色的 12 像素文字標籤,其文字擷取自第 0 欄,並指派給同一列第 2 欄中的資料點: |
backgroundColor | string | 「#FFFFFF」(白色) | 圖表 API 色彩格式的圖表背景色彩。 |
顏色 | string | 自動 | 指定用於所有系列的基本顏色;每個系列都會是指定顏色的分級。您可以透過圖表 API 色彩格式指定顏色。如果指定了 colors ,系統會忽略這個屬性。 |
顏色 | 陣列<string> | 自動 | 可用來為每個資料序列指派特定顏色。您可以透過圖表 API 色彩格式指定顏色。資料欄 i 用於資料欄 i,如果資料欄比顏色多一點,則會在開頭加上換行。如果所有系列都接受單一顏色的變化版本,請改用 color 選項。 |
啟用事件 | 布林值 | 否 | 讓圖表擲回使用者觸發的事件,例如點擊或滑鼠懸停。 僅適用於特定圖表類型。請參閱下方的活動一節。 |
填滿 | 布林值 | 否 | 如果為 true,則會填入每一行之下的區域。僅適用於折線圖。 |
首次隱藏的資料欄 | 數字 | 無 | 資料欄資料欄索引。所列資料欄以及所有後續資料欄不會用來繪製主要圖表序列元素 (例如折線圖上的線條或長條圖上的長條),而是會用於標記和其他註解的資料。請注意,字串欄會納入此索引計數。 |
height | 數字 | 200 | 圖表的高度,以像素為單位。如果缺少或不在可接受的範圍內,則會使用內含元素的高度。如果這超出可接受的範圍,就會使用預設高度。 |
標籤 | string | 無 | [僅適用於圓餅圖] 要顯示每個標籤要顯示的標籤 (如果有的話)。選擇下列的值:
|
傳說 | 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 服務支援的所有本地化功能。