Google Chart API用URL製作圖表

原本想找能因資料變更而讓部落格上圖形自動變更的方法，結果意外找到Google Chart API，雖然還不是我想要的東西，不過了解一下後順道將它紀錄下來，後續再去找我要的技術。
Google Chart API 是Google提供的線上製作圖表工具，他提供可利用URL、程式碼控制兩種方式，可讓使用者自作圖表，這裡就介紹URL方式來快速製作圖表。

Google Chart API線上說明文件 Chart Wizard ，請自行參考。

Google Chart API提供以下幾種類型的製作，如 Bar Charts、Box Charts、Candlestick Charts、Compound Charts、Dynamic Icons、Google-O-Meter Charts、GraphViz Charts、Line Charts、Map Charts、Pie Charts、Radar Charts、Scatter Charts、Venn Charts，另外還提供QR code的製作。

以下我們就以簡單的範例來說明：

圓餅圖 ( Pie Charts )

部落格嵌入語法

<img src="https://chart.googleapis.com/chart?cht=p3&chd=t:50,30,20&chs=500x240&chl=%E8%82%A1%E7%A5%A8%2050%25|%E6%9C%9F%E8%B2%A8%2030%25|%E9%81%B8%E6%93%87%E6%AC%8A%2020%25&chtt=%E8%B3%87%E9%87%91%E9%85%8D%E7%BD%AE%E6%AF%94%E9%87%8D
" />

圖形URL
https://chart.googleapis.com/chart?cht=p3&chd=t:50,30,20&chs=500x240&chl=%E8%82%A1%E7%A5%A8%2050%25|%E6%9C%9F%E8%B2%A8%2030%25|%E9%81%B8%E6%93%87%E6%AC%8A%2020%25&chtt=%E8%B3%87%E9%87%91%E9%85%8D%E7%BD%AE%E6%AF%94%E9%87%8D

圖形的產生主要透過Google Chart API用URL傳送參數來產生，其URL看似複雜其實簡單，以下將分段拆解

• Google Chart API 的連結URL
1. http://chart.apis.google.com/chart?
2. http://chart.googleapis.com/chart?


• "&"兩變數相連符號 


• 圖形類型(cht)
• cht=p3，立體圓餅圖，其他圖形類型可參考 Chart Wizard - Charts Gallery


• 圖形大小(chs)， 500 * 240 圖形大小，Google提供支援到300000畫素
• chs=500x240


• 圖表抬頭(chtt)
• chtt=%E8%B3%87%E9%87%91%E9%85%8D%E7%BD%AE%E6%AF%94%E9%87%8D


• 圖表資料(chd)，兩數值以 "," 逗號分隔，注意順序要與chl對應
• chd=t:50,30,20


• 資料名稱(chl)，用 "|" 隔開資料名稱，中文字須以 utf-8 編碼
• chl=%E8%82%A1%E7%A5%A8%2050%25|%E6%9C%9F%E8%B2%A8%2030%25|%E9%81%B8%E6%93%87%E6%AC%8A%2020%25
• %E8%82%A1%E7%A5%A8%2050%25 中文名 股票50%
• %E6%9C%9F%E8%B2%A8%2030%25 中文名 期貨50%
• %E9%81%B8%E6%93%87%E6%AC%8A%2020%25 中文名 選擇權 20%
• 線上編碼Web Data Encoder

其他圓餅圖的參數，請參考 Chart Wizard - Charts Gallery Pie Charts

參考網頁

1. 小示維谷的類別 - Google Chart API Tools 彙整
2. 小狐狸事務所 - Google Chart API 簡介
3. 符碼記憶 - Google Chart API：繪製中文圓餅圖(Pie Chart)
4. jsGears.com 技術論壇 - Google Chart API 學習筆記