標題: Google Chart API 學習筆記 [打印本頁]
作者: wmh 時間: 2009-2-18 01:38 標題: Google Chart API 學習筆記
Google Chart API 是一組很方便的 Web 專用圖表 API，只要在 ![]()
的 src 內指定正確的參數，就可以輕鬆獲得圖表。
官方給的 Hello World 範例http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World
[jsg.example]
[/jsg.example]
開始一張空白的畫布http://chart.apis.google.com/chart?cht=lc&chs=200x125
[jsg.example]
[/jsg.example]
改變畫布的大小http://chart.apis.google.com/chart?cht=lc&chs=500x125
[jsg.example]
[/jsg.example]
塗上背景色http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef
[jsg.example]
[/jsg.example]
加上 x 軸的刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x
[jsg.example]
[/jsg.example]
加上 y 軸的刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=y
[jsg.example]
[/jsg.example]
同時加上 x, y 軸的刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y
[jsg.example]
[/jsg.example]
加上兩個 x 軸的刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,x
[jsg.example]
[/jsg.example]
四個邊都加上刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y,r,t
[jsg.example]
[/jsg.example]
自訂刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C
[jsg.example]
[/jsg.example]
x 軸顯示年月的刻度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,x,y&chxl=0:|Jan.|Jul.|Jan.|Jul.|1:|2007||2008||2:|A|B|C
[jsg.example]
[/jsg.example]
加上線段http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85
[jsg.example]
[/jsg.example]
改為僅圖表區域填入背景http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85
[jsg.example]
[/jsg.example]
改變背景色http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85
[jsg.example]
[/jsg.example]
改變線條顏色http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff
[jsg.example]
[/jsg.example]
線條透明度 (不透明)http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffffff
[jsg.example]
[/jsg.example]
線條透明度 (一點點透明)http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff99
[jsg.example]
[/jsg.example]
線條透明度 (比較透明)http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff33
[jsg.example]
[/jsg.example]
線條透明度 (完全透明)http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff00
[jsg.example]
[/jsg.example]
線條加粗http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3
[jsg.example]
[/jsg.example]
顯示為虛線http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9
[jsg.example]
[/jsg.example]
另一種虛線http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1
[jsg.example]
[/jsg.example]
加入網格http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1&chg=20
[jsg.example]
[/jsg.example]
減少網格密度http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1&chg=20,50
[jsg.example]
[/jsg.example]
調整網格外觀http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1&chg=20,50,2
[jsg.example]
[/jsg.example]
再調整網格外觀http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1&chg=20,50,2,10
[jsg.example]
[/jsg.example]
加上一個點的標示http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1&chg=20,50,2,10&chm=c,FF0000,0,1,20
[jsg.example]
[/jsg.example]
多好幾個點的標示http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,afafaf&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chco=ffffff&chls=3,9,1&chg=20,50,2,10&chm=c,FF0000,0,0,20|d,80C65A,0,1,20|a,990066,0,2,9|o,FF9900,0,3,20
[jsg.example]
[/jsg.example]
重新來過http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85
[jsg.example][/jsg.example]
塗滿線條底下的區塊http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85&chm=B,f3dbb8,0,0,0
[jsg.example]
[/jsg.example]
畫兩條線http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85|41,62,50,55
[jsg.example]
[/jsg.example]
再多一條線http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85|41,62,50,55|31,45,15,35
[jsg.example]
[/jsg.example]
給你猜有什麼不一樣?http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:100,100|51,72,63,85|41,62,50,55|31,45,15,35|0,0
[jsg.example]
[/jsg.example]
每個區塊都填上不同色彩http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:100,100|51,72,63,85|41,62,50,55|31,45,15,35|0,0&chm=b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0
[jsg.example]
[/jsg.example]
重新http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:51,72,63,85
[jsg.example][/jsg.example]
這次你一定看不出來和上面有什麼不一樣了！
線條由 x 軸平均分配的畫法(cht=lc)改為可隨意放置點的畫法(cht=lxy)http://chart.apis.google.com/chart?cht=lxy&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:0,33,66,100|51,72,63,85
[jsg.example]
[/jsg.example]
於是同樣的線條圖可以分為兩段來畫http://chart.apis.google.com/chart?cht=lxy&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:0,33|51,72|34,66,100|72,63,85
[jsg.example]
[/jsg.example]
接著改變第二條線段的樣式，就可以做一些進階的利用 (流量圖+預測圖)http://chart.apis.google.com/chart?cht=lxy&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|1:|A|B|C&chd=t:0,33|51,72|33,66,100|72,63,85&chls=2|1,4
[jsg.example]
[/jsg.example]
長條圖http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,85,51,72,63,85
[jsg.example]
[/jsg.example]
細的長條圖http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,85,51,72,63,85&chbh=10,20
[jsg.example]
[/jsg.example]
改變顏色http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,85,51,72,63,85&chco=cc0000
[jsg.example]
[/jsg.example]
加上透明度http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,85,51,72,63,85&chco=cc000022
[jsg.example]
[/jsg.example]
重來http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,85,51,72,63,85
[jsg.example][/jsg.example]
其實這邊有兩組長條http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,0,0,0,0,0|0,0,0,85,51,72,63,85
[jsg.example]
[/jsg.example]
第二組加上透明度設定，一樣可以做一些特殊的應用http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,0,0,0,0,0|0,0,0,85,51,72,63,85&chco=ffcc33,ffcc3344
[jsg.example]
[/jsg.example]
加上說明文字http://chart.apis.google.com/chart?cht=bvs&chs=500x125&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C&chd=t:51,72,63,0,0,0,0,0|0,0,0,85,51,72,63,85&chco=ffcc33,ffcc3344&chdl=Visitors|Prediction
[jsg.example]
[/jsg.example]
放橫的http://chart.apis.google.com/chart?cht=bhs&chs=300x150&chf=c,s,efefef&chxt=x,y&chxl=0:|0|1|2|3|4|5|6|7|8|1:|A|B|C|D&chd=t:51,72,63,85&chdl=Visitors|Prediction|Visitors|Prediction
[jsg.example]
[/jsg.example]
圓餅圖測試http://chart.apis.google.com/chart?cht=p&chs=200x125&chf=c,s,efefef&chxt=x,y&chxl=0:|Welcome|to|jsGears|com&chd=t:51,72,63,85
[jsg.example]
[/jsg.example]
地圖測試http://chart.apis.google.com/chart?chs=440x220&chd=t:0&cht=t&chtm=asia&chco=FFFFFF,FF0000,FFFF00,00FF00&chld=TW
[jsg.example]
[/jsg.example]
儀表圖測試http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=jsGears.com
[jsg.example]
[/jsg.example]
二維條碼測試http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=jsGears.com&choe=UTF-8
[jsg.example]
[/jsg.example]
作者: joe80075 時間: 2010-10-10 07:21
google 真是佛心來也
API放了這寫類似這玩意的
網頁就輕鬆多了
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|