Google Chart API：繪製中文圓餅圖(Pie Chart)

目前在網路上看到的文章都還說Google Chart API無法使用中文
但其實是可以的 所以特地寫一篇介紹如何達成我們的目標

Google Chart API是google提供的服務
我們只要透過網址傳遞相關的參數和資料
就可以獲得對應的資料圖表
今天要介紹的就是利用google來繪製圓餅圖

上圖就是google官方所提供的範例，網址是：
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
其中http://chart.apis.google.com/chart?是Chart API的網址後面要接參數
重要的參數說明如下：
cht=p3：選擇圖片類型，如現在是立體圓餅圖
chd=t:60,40：各項資料的比例，注意順序要與chl對應，以 , 分隔
chs=250x100：圖片大小，Google提供支援到300000畫素，可以自訂為1000*300，750*400，600*500等等，注意若文字過長被圖片切掉可以透過把圖調扁來讓他顯示
chl=Hello|World：各項資料的名稱，以 | 分隔
另外還有chtt是圖表的名稱，其餘的參數可以參考Google Chart API

上面的一段在google已經可以找到很多說明了
本篇的重點其實是在如何為圖表加入中文
因為google目前還不支援直接把中文放在網址中產生圖片
所以很多人都以為這個API是無法使用中文的
但是讓我們來看看下面這個例子

其中的網址和剛剛都很類似
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=%E4%B8%AD%E6%96%87|%E5%87%BA%E7%8F%BE%E4%BA%86
只有chl的地方改變了
%E4%B8%AD%E6%96%87對應到的是中文的UTF-8編碼
%E5%87%BA%E7%8F%BE%E4%BA%86則是出現了的UTF-8編碼
關於中文網址的編碼轉換請參考
用Java替中文轉碼：URLEncoder
用Javascript替中文轉碼：escape, encodeURI, encodeURIComponent 的比較
如果只想產生圖檔而不是在程式中應用的話請利用
Online UrlEncoder：線上轉換中文網址為UTF-8編碼
應該就可以順利把中文網址轉換成UTF-8了

關鍵字：Google Chart API, Pie Chart, 圓餅圖, 中文, sort, 排序
參考資料：
1. Google Chart API
2. 用網址畫圖，Google 推出 Google Chart API