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


留言

相關文章

這個網誌中的熱門文章

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

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

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

【超商懶人包】消費享10%回饋攻略+繳費取貨也能賺回饋?

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

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

【Uber優步】2019免費序號「ewdnacom」享200乘車優惠!

【華南i網購生活卡】2019網購+行動支付5%神卡(最高6%)!

【信用卡排行榜】2019網購/行動支付神卡推薦最高6%回饋!

【玉山卡申辦攻略】玉山新戶辦icash+Pi雙刀流賺首刷900!