Google Chart API简介

[url=http://code.google.com/apis/chart]Google Chart API[/url]能够让我们利用URL传递参数来产生图表，比如简单的这样一句HTML代码：

就可以产生柱状图：
[img]http://chart.apis.google.com/chart?cht=bvs&chs=200x125&chd=s:JavaEye[/img]

通过查看上面的URL，共有3个参数：
[quote]
[b]cht: [/b] 代表了图表的类型（Chart Type的缩写），在上面的例子中bvs是代表垂直格式的Bar Chart
[b]chs: [/b] 代表了图表的大小（Chart Size的缩写），在上面的例子中就是宽200px，高125px
[b]chd: [/b] 代表了图表的数据 （Chart Data的缩写），在上面的例子中s:JavaEye代表什么意思呢？允许我卖个小关子，后面再介绍
[/quote]

我们再来看一个稍微复杂点的例子：

[img]http://chart.apis.google.com/chart?chtt=JavaEye&cht=p3&chs=300x150&chd=s:JavaEye&chl=J|a|v|a|E|y|e[/img]

和第一个例子相比，多了2个参数：
[quote]
[b]chtt: [/b] 代表了图表的标题（Chart Title的缩写）
[b]chl: [/b] 代表了图表项标签（Chart Label的缩写），在上面的例子中用竖线(|)分割的JavaEye正好对应到每个数据项
[/quote]

现在让我来解开前面的小关子：
[quote]
[b]chd: [/b] 代表了图表的数据 ，在第一个例子中的s:JavaEye代表用字符串编码，A~Z代表0~25, a~z代表26~51，Google Chart API会根据每个字符所对应的值计算出其比例，然后画出图表。除了这种简单编码外，它还支持多种其他编码，具体文档[url=http://code.google.com/apis/chart/#chart_data]请看这里[/url]。
[/quote]

Google提供的这个API对于做一些简单图表来说是非常好用的工具，举一个实际的例子，比方说我有某段时间内JavaEye网站的访问次数的IP分布数据：
[quote]
Beijing 238,471
Shanghai 133,918
Guangzhou 68,786
Shenzhen 59,093
Hangzhou 47,626
Chengdu 30,700
Nanjing 28,799
Wuhan 27,535
Xian 18,240
Changsha 17,013
[/quote]

我们把数据转换成0~100直接的小数，用chd=t:23.8471,13.3918...传递，还可以用chco设置颜色和透明度（0000FF - 蓝色, 50 - 50%的透明度）:

[img]http://chart.apis.google.com/chart?chtt=JavaEye%20Cities&cht=p3&chs=700x350&chd=t:23.8471,13.3918,6.8786,5.9093,4.7626,3.0700,2.899,2.7535,1.8240,1.7013&chl=Beijing|Shanghai|Guangzhou|Shenzhen|Hangzhou|Chengdu|Nanjing|Wuhan|Xian|Changsha&chco=0000FF50[/img]

更多图表文档，例子请访问官方网站： [url]http://code.google.com/apis/chart[/url]

参考资料：
[url=http://24ways.org/2007/tracking-christmas-cheer-with-google-charts]Tracking Christmas Cheer with Google Charts[/url]
[url=http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/]Using Google Charts from accessible data table[/url]