google chart几个图表的使用
项目需求,前一阵子利用google chart生成了一些图表.但最终由于扩展性差,且依赖于google,所以放弃了.这里做个备份,以防日后需要用到.对于复杂一些的图表,数据砌得相当头晕!首先是一个简单的pie chart:
http://www.agoit.com/bbs/https://chart.googleapis.com/chart?chtt=this%20is%20title&chl=Italy:1|Netherlands:1|Korea:1|Australia:1|Thailand:1|Brazil:1|Indonesia:1|Spain:1|China:2|Germany:2|Japan:2|United%20States:13|otheres:102&chs=700x220&cht=p3&chd=t:1,1,1,1,1,1,1,1,2,2,2,13,102
然后是个比较复杂的bar chart:
http://chart.apis.google.com/chart?chs=500x400&cht=bvs&chd=t:0,0,0,1,1,2|0,0,0,1,1,0|0,0,0,1,1,0|0,0,0,1,1,0|0,0,0,2,1,0|0,0,0,1,2,0|0,0,0,1,0,0|0,0,0,9,0,0|0,0,0,1,0,0|25,33,50,14,4,1&chds=0,60&chxt=y,x&chxr=0,0,60,5&chxl=1:|2010-07:%2025|2010-08:%2033|2010-09:%2050|2010-10:%2032|2010-11:%2011|2010-12:%203&chm=tothers:25,000000,9,0,10|tothers:33,000000,9,1,10|tothers:50,000000,9,2,10|tItaly:1,000000,0,3,10|tJapan:1,000000,1,3,10|tKorea:1,000000,2,3,10|tIndonesia:1,000000,3,3,10|tGermany:2,000000,4,3,10|tAustralia:1,000000,5,3,10|tChina:1,000000,6,3,10|tUnited%20States:9,000000,7,3,10|tSpain:1,000000,8,3,10|tothers:14,000000,9,3,10|tJapan:1,000000,0,4,10|tBrazil:1,000000,1,4,10|tNetherlands:1,000000,2,4,10|tThailand:1,000000,3,4,10|tChina:1,000000,4,4,10|tUnited%20States:2,000000,5,4,10|tothers:4,000000,9,4,10|tUnited%20States:2,000000,0,5,10|tothers:1,000000,9,5,10&chbh=70&chco=B3BCC0|5781AE|FFC726|885E80|518274
再是一个比较有意思的map chart:
http://www.agoit.com/bbs/https://chart.googleapis.com/chart?chdl=Italy:1|Netherlands:1|Korea:1|Australia:1|Thailand:1|Brazil:1|Indonesia:1|Spain:1|China:2|Germany:2|Japan:2|United%20States:13|Others:%20523&chtt=This%20is%20%20title.&chm=fItaly:1,000000,0,0,10|fNetherlands:1,000000,0,1,10|fKorea:1,000000,0,2,10|fAustralia:1,000000,0,3,10|fThailand:1,000000,0,4,10|fBrazil:1,000000,0,5,10|fIndonesia:1,000000,0,6,10|fSpain:1,000000,0,7,10|fChina:2,000000,0,8,10|fGermany:2,000000,0,9,10|fJapan:2,000000,0,10,10|fUnited%20States:13,000000,0,11,10&chs=600x250&cht=map:fixed=-60,0,80,-35&chld=IT|NL|KR|AU|TH|BR|ID|ES|CN|DE|JP|US&chco=B3BCC0|547426|ECF87A|7B8547|8BFEA9|D15476|87A9DC|30F216|86B8DB|7AFD94|25CBE3|548BAF|103262
具体的参数意思可查阅google chart api.http://code.google.com/intl/zh-CN/apis/chart/docs/making_charts.html
如果提交这么一串URL怪恐怖的,而GET方式提交的数据最多只能是1024字节,就是说如果你的数据量超过这个大小,就不能提交了.所以google chart也提供了post的方式,而post方式理论上是不限大小的.
API上提供的例子是非ajax的,是通过提交表单,刷新页面而显示图片的;但AJAX又存在跨域问题(向google chart post数据超).所以是不能通过ajax post数据得到图表的.如果想无刷新获得图表,可以通过提交form 至指定的 iframe ,在iframe中打开:
<form action='https://chart.googleapis.com/chart' method='POST' id='chart' target="iframe" > </form> <iframe src="https://chart.googleapis.com/chart" name="iframe" height="516" width="809"></iframe>
然后要做的就是要将post的数据append至form中.
页:
[1]