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


留言

相關文章

這個網誌中的熱門文章

【果粉必看】iPhone 11/Pro/Pro Max 刷卡回饋/分期攻略!

【玉山U Bear卡】網購5%超商8%電影20%,神卡登場必辦!

【玉山卡攻略】神卡雲集,依序辦卡拿新舊戶首刷最佳解!

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

【永豐DAWHO攻略】申辦大戶帳戶/信用卡最佳申辦順序!

【永豐大戶DAWHO】現金回饋信用卡國內2%國外3%最高8%!

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

【全聯PX Pay】首刷/儲值/銀行卡友日+刷卡回饋最高25%!

【2020行事曆】109年人事行政局行事曆+連假請假攻略!

【玉山Only卡】神級紅利回饋!紅利倍多芬最高13倍=5.2%回饋無上限!