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


相關文章

這個網誌中的熱門文章

證件遺失補辦身分證/健保卡/駕照/行照/信用卡總整理

【國泰KOKO COMBO icash】2019權益更新!網購/超商/交通5%回饋!(需當月消費5000)

【博客來折價券】最新100,50,25序號e-coupon免費分享(持續更新)

【台新@GoGo】一般消費1.5%網購3.5%!行動支付/保費同享優惠密技!

【台新FlyGo】出國神卡新登場!台新飛狗卡機票最高5%、國外最高2.8%!

TOEIC多益成績分數查詢、計算標準與換算對照表

銀行代碼查詢:3碼銀行代碼列表、7碼分行代碼查詢

【華南新戶5%】限時申辦華南指定icash聯名卡獨享2019年全年網購5%!(2018/12/15前申辦)

【符碼刷卡報】超商消費繳費懶人包+優惠總整理

【玉山Pi信用卡】Pi拍錢包限定資格會員+玉山新戶辦卡拿1000!(~2018/12/31)