Google 图表 API 实际Web的应用
2012-11-17 10:42
225 查看
Google 图表 API 会返回一幅 PNG 格式的图片来响应一个网址。可以生成多种类型的图片,包括折线图、条形图和饼图。您可以为每种图片类型指定属性,例如大小、颜色和标签。
通过将网址嵌入 <img> 标签内,您可以将图表 API 图片包括在网页中。当网页在浏览器中显示时,图表 API 会呈现该网页中的这幅图片。
上周客户让我做一个群众评价模块,要的很急1-2内天完成,包括各种形势的统计,而且要美观。我接到任务后就在想,我怎么做图表统计呢?脑子里也闪现不少js,css生成统计图表的库,还有就是Google Chart API。通过我尝试比较,运行环境,使用方便性,我选择了Google Chart API,不过其中也碰到不少问题。
问题解决:
1、中文参数不显示或乱码
我的是ASP,页面编码必须是UTF-8,HTML的charset=utf-8,把asp中<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>去掉。
2、柱状图不同颜色
通过我仔细的阅读Google Chart API文档才找到,加chco=FF0000|FFFF00|00FF00|00FFFF|0000FF|FF00FF,每一个颜色是一个柱子。
3、柱状图动态高度调整
默认高度为100,就是说,数字100的时候就到顶了,如果所有项都大于100,都顶格,
所以要价格参数:chbh=200,200就是最高高度。不过这个数字不可能是定的,要根据实际项目。我的这个值=项目最大数+项目平均数,加项目平均数,是为了好看。
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
上面的地址,可以直接复制到浏览器中查看的。
通过将网址嵌入 <img> 标签内,您可以将图表 API 图片包括在网页中。当网页在浏览器中显示时,图表 API 会呈现该网页中的这幅图片。
上周客户让我做一个群众评价模块,要的很急1-2内天完成,包括各种形势的统计,而且要美观。我接到任务后就在想,我怎么做图表统计呢?脑子里也闪现不少js,css生成统计图表的库,还有就是Google Chart API。通过我尝试比较,运行环境,使用方便性,我选择了Google Chart API,不过其中也碰到不少问题。
问题解决:
1、中文参数不显示或乱码
我的是ASP,页面编码必须是UTF-8,HTML的charset=utf-8,把asp中<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>去掉。
2、柱状图不同颜色
通过我仔细的阅读Google Chart API文档才找到,加chco=FF0000|FFFF00|00FF00|00FFFF|0000FF|FF00FF,每一个颜色是一个柱子。
3、柱状图动态高度调整
默认高度为100,就是说,数字100的时候就到顶了,如果所有项都大于100,都顶格,
所以要价格参数:chbh=200,200就是最高高度。不过这个数字不可能是定的,要根据实际项目。我的这个值=项目最大数+项目平均数,加项目平均数,是为了好看。
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
上面的地址,可以直接复制到浏览器中查看的。
相关文章推荐
- Google 图表 API 实际Web的应用
- 在云平台上基于Go语言+Google图表API提供二维码生成应用
- 在云平台上基于Go语言+Google图表API提供二维码生成应用
- 在云平台上基于Go语言+Google图表API提供二维码生成应用
- Alexa开放Web搜索数据库 API服务效果超Google
- Google Web Toolkit应用入门地址
- google ajax feed API 应用——新闻聚合
- WEB开发中Spring AOP实际应用一例
- 用HTML5、地理定位API和Web服务来开发移动应用
- Google Maps API Web Services(一:The Google Geocoding API)
- 迁移Hexo博客到Google渐进式Web应用(PWA)
- (转)pb+api实际应用
- Google Web 字体 API 访谈
- Web优化的14条法则及我们的实际应用
- web前端之dojo实际应用及开发四:面向对象开发[关键](附有源码)
- 关于一些Google Map API应用开发的资源收集整理
- JFreeChart组件在基于JSP的Web统计图表中的应用与实现
- Issue 6 - phantomjs - Debugging with Web Inspector - headless WebKit with JavaScript API - Google Project Hosting
- 6个jQuery图表Web应用扩展
- Google Web 字体 API 访谈