Google chart 使用小结

来源：互联网发布：京东刷単和淘宝一样吗编辑：程序博客网时间：2024/05/22 00:32

想要使用Google chart显示图表，一般先创建一个img对象，然后设置其src属性即可。如下：

<img src="http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />.

其中chs为图片大小，chd为数据值。&amp是连接字符串。

注意：在js中，如果要通过更改src值，动态改变图表内容时，一定要把&amp改成&，否则图片不能正确显示。

以下是一个同时显示x,y轴的折线图
<img src="http://chart.apis.google.com/chart?chs=300x150&chd=t:10,10,10,10,10,8,6,8,8,7,6,4,2.8,4,10,10,10,10,10,7,7,7,7&cht=lc&chxt=x,y&chxl=0:|0:00|3:00|6:00|9:00|12:00|15:00|18:00|21:00|24:00|1:|0|2|4|6|8|10|12|&chds=0,14" />

cht=lc 设置图表类型为折线图；

chxt=x,y 同时显示x,y轴;

chxr=
<axis_index>,<start_val>,<end_val>,<step>
|...|
<axis_index>,<start_val>,<end_val>,<step>

设置各轴显示的起始刻度，刻度间隔；如：

chxt=x
chxr=0,10,50,5

也可直接设定轴刻度：

chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

chds=0,14 设定y轴的范围