2011年1月22日 星期六

Google Chart API 教學

Google Chart API 簡介

Google Chart API 是 Google 提供的線上製作圖表的工具,它可以讓使用者動態產生圖表。它的使用方法很簡單,請打開瀏覽器,再將底下的網址貼到網址列:

https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=300x120&chl=Google|Microsoft

然後你就會看到這張圖片:

image

 

你可以把 Google Chart API 動態產生的圖表放到網頁中,只要把 URL 寫到 <img> 標籤的 src 屬性裏即可,像這樣:

Google Chart API 可以繒製非常多種圖表,像底下這些就是 Google 所提供的範例圖表:

image

Google Chart API 的語法很簡單,很快就可以上手。假如你不熟悉語法,也可以使用 Chart Wizard 來幫你快速建立圖表。

image

上圖便是 Chart Wizard 的編輯介面,你在編輯介面上所做的任何設定,產生的圖表以及對應的 Google Chart API 參數寫法,都會即時呈現在畫面右手邊:

image

Chart Wizard 可以即時產生對應的 Google Chart API 參數寫法,這點非常方便,初學者可以多利用 Chart Wizard 來認識與學習語法。

底下我將簡單介紹幾個圖表範例,透過這些範例幫助你認識 Google Chart API 的參數。

簡單的折線圖

首先,來看張簡單的圖表,這是整年度的溼度折線圖:

image

要產生這張圖表的 URL 為:

http://chart.apis.google.com/chart?cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80

參數說明:

  • cht=lc 表示要畫折線圖
  • chs=450x200 告訴 Google 我們要的圖表尺寸為 300 像素寬與 200 像素高
  • chd=t:70,72 … 是實際的溼度資料,資料從一月份開始填起

現在為圖表加上 X, Y 座標軸標籤,這樣別人才看得懂這些數字的意義:

image

這張圖的 URL 為:

http://chart.apis.google.com/chart?cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec

參數說明:

  • chxt=x,y 表示我們要在 X, Y 軸上顯示標籤
  • chxl=0:|Jan|Feb|Mar … 是設定第一個座標軸的標籤,從 1 月到 12 月。

我們並沒有提供 Y 軸的標籤,所以 Google 便使用預設的標籤,範圍是從 0 到 100。

接著為圖表加上格線:

image

圖片 URL:

http://chart.apis.google.com/chart?cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chg=10,20

參數說明:

  • chg=10,20 表示要為圖表加上格線,10,20 表示 X 軸每 10 點一格,而 Y 軸每 20 點一格

接下來加上圖表標題:

image

圖片 URL:

http://chart.apis.google.com/chart?chtt=溼度變化圖&cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chg=10,20

參數說明:

  • chtt=溼度變化圖,這行是設定圖表標題

再來填充個顏色讓圖表美觀一些:

image

圖片 URL:

http://chart.apis.google.com/chart?chtt=溼度變化圖&chm=B,76A4FB49,0,0,0&cht=lc&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chg=10,20

參數說明:

  • chm=B,76A4FB49 填充線段以下的區域,假如有多條線段的話,用小寫的 b 就會只填滿兩個線段之間的區域,跟著是 RRGGBB 的 16 進位顏色值與透明度的設定,透明度的設定 00 是完全透明,而 FF 則是完全不透明。
中文的處理

要特別注意,圖表裏如果有用到中文,網頁必須用 UTF-8 編碼,步驟為:

  1. 以 UTF-8 編碼格式儲存網頁
  2. 在 <head> 中指定 UTF-8 編碼格式 <meta content="text/html; charset=UTF-8" http-equiv="content-type" />

接著 Google Chart API 的參數就可以直接使用中文了,像這樣:

假如沒有照上面 2 個步驟做,就沒辦法在圖表中顯示中文字,除非你事先把中文字轉成 UTF-8 編碼,像這樣:

其中 %E6%BA%BC%E5%BA%A6%E8%AE%8A%E5%8C%96%E5%9C%96 這一串是 "溼度變化圖" 的 UTF-8 編碼。

長條圖

現在改用長條圖來表示整年度的溼度:

image 

圖片 URL:

 http://chart.apis.google.com/chart?cht=bvg&chs=450x200&chd=t:70,72,67,68,65,59,64,70,73,75,78,80&chxt=x,y&chxl=0:|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec&chg=10,20&chm=N*f0*,000000,0,-1,11

參數說明:

  • cht=bvg 表示要畫垂直長條圖
  • chm=N*f0*,000000,0,-1,11 告訴 Google 要顯示標記的數值,型態為浮點數,精確度小數 0 位, 顏色碼為 000000 (黑色), 並使用 11 號字型顯示數值
3D 圓餅圖

要畫圓餅圖也很簡單,例如:

image

圖片 URL:

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:62.2,20.4,8.2,7.2&chdl=Google|Yahoo|Bing|Others

參數說明:

  • cht=p3 表示要畫 3D 圓餅圖,如果不要 3D,寫 p 就好
  • chdl=Google|Yahoo … 這個是設定圖例 (Legend)

接著設定圖表顏色:

image

圖片 URL:

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chco=00AAFF,7777CC,00FF00,AA0033&chd=t:62.2,20.4,8.2,7.2&chdl=Google|Yahoo|Bing|Others

參數說明:

  • chco=00AAFF,7777CC,00FF00,AA0033 表示要設定資料序列的顏色,一共有四組顏色設定

剛剛 chdl=Google|Yahoo … 是設定圖例(Legend),現在我們不用圖例,改成直接在圖表上顯示標籤:

image

圖片 URL:

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chco=00AAFF,7777CC,00FF00,AA0033&chd=t:62.2,20.4,8.2,7.2&chl=Google|Yahoo|Bing|Others

參數說明:

  • chl=Google|Yahoo … 是設定圖表的標籤(Labels)
QR Code 二維條碼

Google Chart API 也可以產生 QR Code 二維條碼,例如:

image 

圖片 URL:

http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http%3A%2F%2Fcoopermaa2nd.blogspot.com

參數說明:

  • cht=qr 表示要畫 QR Code 二維條碼
  • chs=200x200 告訴 Google 我們要的 QR Code 二維條碼尺寸為 200 像素寬與 200 像素高
  • chl=http% … 則是要編碼的資料,資料內容是 "http://coopermaa2nd.blogspot.com”,如果你半信半疑,可以把圖片上傳到 ZXing Decoder Online,ZXing Decoder 是一維與二維條碼的圖片解碼服務,可以讓你驗證資料內容。
比例縮放

如果資料數值超過 100,必須事先經過適當的比例縮放。比如,你的網站流量每月最少有 2000 人次(Visitors),網頁點閱次數(Page Loads)每月最小有 5000 次,每月最高將近 8000 人次,網頁點閱次數每月最高將近 18000 次,那麼就必須根據下列公式計算每個數值 v:

v = 100 * (( v – 0) / (20000 – 0))

也就是說,15000 次的網頁點閱次數就變成 75,5600 變成 28,而 6600 就變成 33。底下是一個範例:

image 

圖片 URL:

http://chart.apis.google.com/chart?cht=bvg&chs=550x220&chco=16AF15,0000DC&chd=t:75,28,68,90,78,82,50|31,15,23,44,33,36,35&chxr=1,0,2000&chxt=x,y&chxl=0:|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|Sunday&chg=0,20,0,0&chdl=Page+Loads|Visitors

參數說明:

  • chd=t:75,28 … 這個是設定資料序列,我們設定了兩個資料序列,一個是網頁點閱次數,另一個是造訪人次
  • chxr=1,0,2000 這個是把座標軸的標籤範圍設定為 0 到 2000,因為索引是從 0 開始算,所以 1 表是要設定第二個座標軸,亦即 Y 軸
  • chg=0,20,0,0 表示要為圖表加上格線,10,20 表示 X 軸每 10 點一格,而 Y 軸每 20 點一格,接著兩個數字是設定破折號的長度與破折號間的間隔,0,0 表示破折號長度為 0 間隔也為 0,結果就會變成一條直線了
參考資料

0 意見: