2008年11月25日

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


更多精選推薦文章

0 意見 :