2012-12-01

Google Chart API使用網址URL快速線上畫出3D圓餅圖

 Google Chart API 是Google提供的線上製作圖表工具,它可直利用網址URL製作出使用者想要的圖表,當然也可以使用程式碼控制製作,那麼今天簡單來介紹一下,如何使用網址URL快速製作。


https://chart.googleapis.com/chart?cht=p3&chd=t:30,40&chs=500x240&chl=%E7%94%B7%E7%94%9F|%E5%A5%B3%E7%94%9F


當點擊上面的網址後,即可看到下面的圖。






當我們要把它變成網站上的一張圖片時,其實讀取圖檔案並且放置<body></body>內,要顯示處就可以了。例如所示。



<body>
<img src="https://chart.googleapis.com/chart?cht=p3&chd=t:30,40&chs=500x240&chl=%E7%94%B7%E7%94%9F|%E5%A5%B3%E7%94%9F" />
</body>


cht:代表要畫的圖型(如果是3D就是cht=p3,如果一般就為p)

chd:資料序列(若兩筆資料以上使用,間隔開來)
chs:圖片大小
chl:顯示名稱(若兩筆以上使用|間隔開來)

範例一:(簡易版)



https://chart.googleapis.com/chart?cht=p3&chd=t:30,40,50&chs=500x240&chl=A|B|C





cht=p3 (所以是3D圖圓餅圖)

chd=t:30,40,50(有三筆資料分別是30,40,50)
chs=500x240(為500*240圓餅圖)
chl=A|B|C(有三筆資料名稱分別是A,B,C)



範例二:(較完整詳細版)






https://chart.googleapis.com/chart?cht=p3&chd=t:20,30,50&chs=500x240&chl=20%|30%|50%&chco=00AAFF,000000,AA0044&chdl=A|B|C



此範例重點若要設定顏色則需增加chco、若標示要在左邊則需將增加chdl。


chco:00AAFF,000000,AA0044(三種顏色)

chdl:A|B|C(三筆資料)


如果對於使用URL設定感覺困擾的話,Google也有提供工具,使用者可以依照設定進行更改動作。


Chart Wizard工具網址:
https://developers.google.com/chart/image/docs/chart_wizard?hl=zh-TW



Related Posts Plugin for WordPress, Blogger...
无觅相关文章插件,快速提升流量
友荐云推荐




沒有留言:

張貼留言