Google Chart API 簡介
Google Chart API 是 Google 提供的線上製作圖表的工具，它可以讓使用者動態產生圖表。它的使用方法很簡單，請打開瀏覽器，再將底下的網址貼到網址列：
https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=300x120&chl=Google|Microsoft
然後你就會看到這張圖片：
你可以把 Google Chart API 動態產生的圖表放到網頁中，只要把 URL 寫到 <img> 標籤的 src 屬性裏即可，像這樣：
Google Chart API 可以繒製非常多種圖表，像底下這些就是 Google 所提供的範例圖表：
Google Chart API 的語法很簡單，很快就可以上手。假如你不熟悉語法，也可以使用 Chart Wizard 來幫你快速建立圖表。
上圖便是 Chart Wizard 的編輯介面，你在編輯介面上所做的任何設定，產生的圖表以及對應的 Google Chart API 參數寫法，都會即時呈現在畫面右手邊：
Chart Wizard 可以即時產生對應的 Google Chart API 參數寫法，這點非常方便，初學者可以多利用 Chart Wizard 來認識與學習語法。
底下我將簡單介紹幾個圖表範例，透過這些範例幫助你認識 Google Chart API 的參數。
簡單的折線圖
首先，來看張簡單的圖表，這是整年度的溼度折線圖：
要產生這張圖表的 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 座標軸標籤，這樣別人才看得懂這些數字的意義：
這張圖的 URL 為：
參數說明：
- chxt=x,y 表示我們要在 X, Y 軸上顯示標籤
- chxl=0:|Jan|Feb|Mar … 是設定第一個座標軸的標籤，從 1 月到 12 月。
我們並沒有提供 Y 軸的標籤，所以 Google 便使用預設的標籤，範圍是從 0 到 100。
接著為圖表加上格線：
圖片 URL：
參數說明：
- chg=10,20 表示要為圖表加上格線，10,20 表示 X 軸每 10 點一格，而 Y 軸每 20 點一格
接下來加上圖表標題：
圖片 URL：
參數說明：
- chtt=溼度變化圖，這行是設定圖表標題
再來填充個顏色讓圖表美觀一些：
圖片 URL：
參數說明：
- chm=B,76A4FB49 填充線段以下的區域，假如有多條線段的話，用小寫的 b 就會只填滿兩個線段之間的區域，跟著是 RRGGBB 的 16 進位顏色值與透明度的設定，透明度的設定 00 是完全透明，而 FF 則是完全不透明。
中文的處理
要特別注意，圖表裏如果有用到中文，網頁必須用 UTF-8 編碼，步驟為：
- 以 UTF-8 編碼格式儲存網頁
- 在 <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 編碼。
長條圖
現在改用長條圖來表示整年度的溼度：
圖片 URL：
參數說明：
- cht=bvg 表示要畫垂直長條圖
- chm=N*f0*,000000,0,-1,11 告訴 Google 要顯示標記的數值，型態為浮點數，精確度小數 0 位, 顏色碼為 000000 (黑色), 並使用 11 號字型顯示數值
3D 圓餅圖
要畫圓餅圖也很簡單，例如：
圖片 URL：
參數說明：
- cht=p3 表示要畫 3D 圓餅圖，如果不要 3D，寫 p 就好
- chdl=Google|Yahoo … 這個是設定圖例 (Legend)
接著設定圖表顏色：
圖片 URL：
參數說明：
- chco=00AAFF,7777CC,00FF00,AA0033 表示要設定資料序列的顏色，一共有四組顏色設定
剛剛 chdl=Google|Yahoo … 是設定圖例(Legend)，現在我們不用圖例，改成直接在圖表上顯示標籤：
圖片 URL：
參數說明：
- chl=Google|Yahoo … 是設定圖表的標籤(Labels)
QR Code 二維條碼
Google Chart API 也可以產生 QR Code 二維條碼，例如：
圖片 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。底下是一個範例：
圖片 URL：
參數說明：
- 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，結果就會變成一條直線了
參考資料
- Google Chart API
- zxing - 一維/二維條碼圖片處理函式庫
沒有留言:
張貼留言
注意：只有此網誌的成員可以留言。