2009年06月06日 星期六

Google 图表 API 实际Web的应用

      Google 图表 API 会返回一幅 PNG 格式的图片来响应一个网址。可以生成多种类型的图片,包括折线图、条形图和饼图。您可以为每种图片类型指定属性,例如大小、颜色和标签。       通过将网址嵌入 <img> 标签内,您可以将图表 API 图片包括在网页中。当网页在浏览器中显示时,图表 API 会呈现该网页中的这幅图片。       上周客户让我做一个群众评价模块,要的很急1-2内天完成,包括各种形势的统计,而且要美观。我接到任务后就在想,我怎么做图表统计呢?脑子里也闪现不少js,css生成统计图表的库,还有就是Google Chart API。通过我尝试比较,运行环境,使用方便性,我选择了Google Chart API,不过其中也碰到不少问题。 问题解决: 
  1. 1、中文参数不显示或乱码
    我的是asp,页面编码必须是UTF-8,HTML的charset=utf-8,把asp中<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>去掉。
  2. 2、柱状图不同颜色
    通过我仔细的阅读Google Chart API文档才找到,加chco=FF0000|FFFF00|00FF00|00FFFF|0000FF|FF00FF,每一个颜色是一个柱子。
  3. 3、柱状图动态高度调整
    默认高度为100,就是说,数字100的时候就到顶了,如果所有项都大于100,都顶格,
    所以要价格参数:chbh=200,200就是最高高度。不过这个数字不可能是定的,要根据实际项目。我的这个值=项目最大数+项目平均数,加项目平均数,是为了好看。
  4. 4、其他问题 
    Google 图表 API文档解决。
    在实际应用中我就用到一个饼行图和柱状图,其他的也没研究。下面是项目中的截图:  

 
评价页面,后面粉红色是客户自己加的。


饼行图:http://chart.apis.google.com/chart?cht=p3&chd=t:17,3,2&chs=500x200&chl=满意(17)|基本满意(3)|不满意(2)意


柱状图:http://chart.apis.google.com/chart?cht=bvs&chd=t:4,2,2,3,2,3,2&chds=0,6.57142857142857&chs=500x200&chdl=咨询解答(4)|服务态度(2)|贷款时限(2)|办事流程(3)|银行服务(2)|担保公司服务(3)|总体评价(2)&chco=FF0000|FFFF00|00FF00|00FFFF|0000FF|FF00FF|0C70AA&chbh=40 上面的地址,可以直接复制到浏览器中查看的。