返回列表 發帖

Google Chart API 學習筆記

Google Chart API 是一組很方便的 Web 專用圖表 API,只要在 <img> 的 src 內指定正確的參數,就可以輕鬆獲得圖表。


官方給的 Hello World 範例
http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World




開始一張空白的畫布
http://chart.apis.google.com/chart?cht=lc&chs=200x125




改變畫布的大小
http://chart.apis.google.com/chart?cht=lc&chs=500x125




塗上背景色
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef




加上 x 軸的刻度
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x




加上 y 軸的刻度
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=y




同時加上 x, y 軸的刻度
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y




加上兩個 x 軸的刻度
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,x




四個邊都加上刻度
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chf=bg,s,efefef&chxt=x,y,r,t




自訂刻度
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




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




加上線段
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




改為僅圖表區域填入背景
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




改變背景色
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




改變線條顏色
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




線條透明度 (不透明)
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




線條透明度 (一點點透明)
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




線條透明度 (比較透明)
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




線條透明度 (完全透明)
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




線條加粗
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




顯示為虛線
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




另一種虛線
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




加入網格
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




減少網格密度
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




調整網格外觀
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




再調整網格外觀
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




加上一個點的標示
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




多好幾個點的標示
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




重新來過
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




塗滿線條底下的區塊
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




畫兩條線
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




再多一條線
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




給你猜有什麼不一樣?
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




每個區塊都填上不同色彩
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




重新
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




這次你一定看不出來和上面有什麼不一樣了!
線條由 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




於是同樣的線條圖可以分為兩段來畫
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




接著改變第二條線段的樣式,就可以做一些進階的利用 (流量圖+預測圖)
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




長條圖
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




細的長條圖
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




改變顏色
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




加上透明度
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




重來
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




其實這邊有兩組長條
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




第二組加上透明度設定,一樣可以做一些特殊的應用
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




加上說明文字
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




放橫的
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




圓餅圖測試
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




地圖測試
http://chart.apis.google.com/chart?chs=440x220&chd=t:0&cht=t&chtm=asia&chco=FFFFFF,FF0000,FFFF00,00FF00&chld=TW




儀表圖測試
http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=jsGears.com




二維條碼測試
http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=jsGears.com&choe=UTF-8
To infinity and beyond!

google 真是佛心來也

API放了這寫類似這玩意的

網頁就輕鬆多了

TOP

返回列表 回復 發帖