基于html5的客户端图表生成方案.doc

基于html5的客户端图表生成方案添加评论2010年7月5日iefans-随着浏览器厂商对互联网浏览器思路的改进,从而诞生了HTML标准的原型,通过这几年的发展HTML标准已经到第五代。近期用HTML5取代Flash或Shockwave的呼声越来越高。虽然HTML5将会对互联网的很多方面做出改进,使网站具备更丰富的功能、让互联网访问变得更加安全和高效。但距离HTML5成为标准还有很长的差距,目前包含IE在内的主流浏览器对HTML5的支持还不是完美,不过值得我们期待的是,新一代的IE9、Chrome6、Firefox4等浏览器都已经开始全面的扩展对HTML5的支持。下文主要是介绍基于html5的客户端图表生成方案。笔者尝试过很多种图表生成方案,比较有代表性的:服务器端生成图表方案,比如通过jfreechart;使用云计算的方式,比如通过google提供的chartapi,可以参见使用googlechart生成动态图;使用flash的免费开源应用,比如fusioncharts,在浏览器端生成图表,效果可见:e/demos/使用html5的canvasapi在浏览器端生成图表。其中前两者是通过服务器端生成的,后两者是通过客户端生成的。服务器端的缺点是:图表缺乏交互性,比如折线图,鼠标放在某个点上,希望看到该点的值,就做不到;带宽和流量问题,比如通过手机访问,手机是按流量计费的,对服务器端也会有影响,当大规模访问的时候挤占服务器端带宽;服务器端性能,当大规模访问的时候服务器端生成图表性能下降。客户端生成图表就没有服务器端的问题,但是存在另外的问题,主要是终端适配问题:flash的解决方案,无法在手机浏览器中显示,起码目前情况是这样的,,iphone是肯定不会支持;html5的方案,无法在主流的ie浏览器中显示,至少要等到ie9推出以后,估计要等到2011年了。目前的html5方案,还没有在效果上能超过flash的。但是是趋势,因为浏览器内置了(除了ie)本地支持,不依赖flash的插件。将来的覆盖终端更多。因此选择了基于html5的RGraph:/。使用RGraph的准备工作下载beta版本,我没有下载stable版本,因为官网上的demo就是用的beta版本。在自己web项目根目录下,建一个js目录,用于存放javascript脚本,把rgraph的libraries目录和excanvas目录下的文件全部复制过去,另外就是复制rgraph的css目录到该目录下。你当然可以按照rgraph的目录结构做,这没有问题。编写最简单的RGraph使用示例这是一个比较丑陋的图表,但是说明问题,可以直接访问:http://easymorse./svn/tags/-,必须使用支持html5的浏览器,比如chrome或者firefox。和其他js类库使用方式类似,首先需要引入js库:<scriptsrc=”js/“></script><scriptsrc=”js/“></script><!–[ifIE]><scriptsrc=”js/”></script><![endif]—>然后,在html的body部分,需要展