I am sailing, I am sailing

Try() 和 Maybe Monad | 美化Android - 自动墙纸切换器（二）

2008-01-10

Google Chart API简介

关键字: google chart

Google Chart API能够让我们利用URL传递参数来产生图表，比如简单的这样一句HTML代码：

<img src="http://chart.apis.google.com/chart?cht=bvs&chs=200x125&chd=s:JavaEye" />

就可以产生柱状图：

通过查看上面的URL，共有3个参数：

引用

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

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

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

和第一个例子相比，多了2个参数：

引用

chtt: 代表了图表的标题（Chart Title的缩写）
chl: 代表了图表项标签（Chart Label的缩写），在上面的例子中用竖线(|)分割的JavaEye正好对应到每个数据项

现在让我来解开前面的小关子：

引用

chd: 代表了图表的数据，在第一个例子中的s:JavaEye代表用字符串编码，A~Z代表0~25, a~z代表26~51，Google Chart API会根据每个字符所对应的值计算出其比例，然后画出图表。除了这种简单编码外，它还支持多种其他编码，具体文档请看这里。

Google提供的这个API对于做一些简单图表来说是非常好用的工具，举一个实际的例子，比方说我有某段时间内JavaEye网站的访问次数的IP分布数据：

引用

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

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

<img src="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"/>