Google Chart API 學習筆記
[url=http://code.google.com/apis/chart/]Google Chart API[/url] 是一組很方便的 Web 專用圖表 API，只要在 <img> 的 src 內指定正確的參數，就可以輕鬆獲得圖表。官方給的 Hello World 範例
[code html:nocontrols]http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World" />[/jsg.example]
開始一張空白的畫布
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125" />[/jsg.example]
改變畫布的大小
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=500x125[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=500x125" />[/jsg.example]
塗上背景色
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef" />[/jsg.example]
加上 x 軸的刻度
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x" />[/jsg.example]
加上 y 軸的刻度
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=y[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=y" />[/jsg.example]
同時加上 x, y 軸的刻度
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y" />[/jsg.example]
加上兩個 x 軸的刻度
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,x[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,x" />[/jsg.example]
四個邊都加上刻度
[code html:nocontrols]http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y,r,t[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y,r,t" />[/jsg.example]
自訂刻度
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
x 軸顯示年月的刻度
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
加上線段
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
改為僅圖表區域填入背景
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
改變背景色
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
改變線條顏色
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
線條透明度 (不透明)
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
線條透明度 (一點點透明)
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
線條透明度 (比較透明)
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
線條透明度 (完全透明)
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
線條加粗
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
顯示為虛線
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
另一種虛線
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
加入網格
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
減少網格密度
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
調整網格外觀
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
再調整網格外觀
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
加上一個點的標示
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
多好幾個點的標示
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
重新來過
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
塗滿線條底下的區塊
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
畫兩條線
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
再多一條線
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
給你猜有什麼不一樣?
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
每個區塊都填上不同色彩
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
重新
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
這次你一定看不出來和上面有什麼不一樣了！
線條由 x 軸平均分配的畫法(cht=lc)改為可隨意放置點的畫法(cht=lxy)
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
於是同樣的線條圖可以分為兩段來畫
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
接著改變第二條線段的樣式，就可以做一些進階的利用 (流量圖+預測圖)
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
長條圖
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
細的長條圖
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
改變顏色
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
加上透明度
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
重來
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
其實這邊有兩組長條
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
第二組加上透明度設定，一樣可以做一些特殊的應用
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
加上說明文字
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
放橫的
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
圓餅圖測試
[code html:nocontrols]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[/code]
[jsg.example]<img src="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]
地圖測試
[code html:nocontrols]http://chart.apis.google.com/chart?chs=440x220&chd=t:0&cht=t&chtm=asia&chco=FFFFFF,FF0000,FFFF00,00FF00&chld=TW[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?chs=440x220&chd=t:0&cht=t&chtm=asia&chco=FFFFFF,FF0000,FFFF00,00FF00&chld=TW" />[/jsg.example]
儀表圖測試
[code html:nocontrols]http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=jsGears.com[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=jsGears.com" />[/jsg.example]
二維條碼測試
[code html:nocontrols]http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=jsGears.com&choe=UTF-8[/code]
[jsg.example]<img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=jsGears.com&choe=UTF-8" />[/jsg.example] google 真是佛心來也
API放了這寫類似這玩意的
網頁就輕鬆多了
頁:
[1]