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

随着浏览器厂商对互联网浏览器思路的改进，从而诞生了HTML标准的原型，通过这几年的发展HTML标准已经到第五代。近期用HTML5取代Flash或Shockwave的呼声越来越高。虽然HTML5将会对互联网的很多方面做出改进，使网站具备更丰富的功能、让互联网访问变得更加安全和高效。但距离HTML5成为标准还有很长的差距，目前包含IE在内的主流浏览器对HTML5的支持还不是完美，不过值得我们期待的是，新一代的IE9、Chrome 6、Firefox4等浏览器都已经开始全面的扩展对HTML5的支持。下文主要是介绍基于html5的客户端图表生成方案。

笔者尝试过很多种图表生成方案，比较有代表性的：

• 服务器端生成图表方案，比如通过jfreechart；
• 使用云计算的方式，比如通过google提供的chart api，可以参见使用google chart生成动态图；
• 使用flash的免费开源应用，比如fusioncharts，在浏览器端生成图表，效果可见：http://www.fusioncharts.com/free/demos/
• 使用html5的canvas api在浏览器端生成图表。

其中前两者是通过服务器端生成的，后两者是通过客户端生成的。

服务器端的缺点是：

• 图表缺乏交互性，比如折线图，鼠标放在某个点上，希望看到该点的值，就做不到；
• 带宽和流量问题，比如通过手机访问，手机是按流量计费的，对服务器端也会有影响，当大规模访问的时候挤占服务器端带宽；
• 服务器端性能，当大规模访问的时候服务器端生成图表性能下降。

客户端生成图表就没有服务器端的问题，但是存在另外的问题，主要是终端适配问题：

• flash的解决方案，无法在手机浏览器中显示，起码目前情况是这样的，android 2.2版本的设备还很少，iphone是肯定不会支持；
• html5的方案，无法在主流的ie浏览器中显示，至少要等到ie9推出以后，估计要等到2011年了。

目前的html5方案，还没有在效果上能超过flash的。但是是趋势，因为浏览器内置了（除了ie）本地支持，不依赖flash的插件。将来的覆盖终端更多。

因此选择了基于html5的RGraph：http://www.rgraph.net/。

使用RGraph的准备工作

下载beta版本，我没有下载stable版本，因为官网上的demo就是用的beta版本。

在自己web项目根目录下，建一个js目录，用于存放javascript脚本，把rgraph的libraries目录和excanvas目录下的文件全部复制过去，另外就是复制rgraph的css目录到该目录下。

你当然可以按照rgraph的目录结构做，这没有问题。

编写最简单的RGraph使用示例

这是一个比较丑陋的图表，但是说明问题，可以直接访问：http://easymorse.googlecode.com/svn/tags/rgraph.demo-1.0.0/basic.html

当然，必须使用支持html5的浏览器，比如chrome或者firefox。

和其他js类库使用方式类似，首先需要引入js库：

<script src="js/RGraph.common.core.js"></script>

<script src="js/RGraph.bar.js"></script>

<!–[if IE]><script src="js/excanvas.compressed.js"></script><![endif]—>

然后，在html的body部分，需要展示图表的地方，声明canvas元素：

<canvas id="myBar" width="1000" height="250">

[No canvas support]

</canvas>

最后，编写js代码：

<script>

window.onload = function ()

{

var bar = new RGraph.Bar(‘myBar’, [12,13,16,15,16,19,19,12,23,16,13,24]);

bar.Set(‘chart.gutter’, 55);

bar.Set(‘chart.colors’, ['blue']);

bar.Set(‘chart.title’, ‘一个简单的柱状图’);

bar.Set(‘chart.labels’, ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']);

bar.Draw();

}

</script>

带交互能力的条形图

把鼠标放在具体的条块上，会反灰，显示文字，这和flash解决方案类似了，可以提供交互的能力。

示例见：http://easymorse.googlecode.com/svn/tags/rgraph.demo-1.0.0/barchart.html

带标注和交互能力的折线图

比如，这里标注了红色折线的最大值和最小值，鼠标放在某点上，会显示该点的标数。

示例见：http://easymorse.googlecode.com/svn/tags/rgraph.demo-1.0.0/linechart.html

值得注意的是，该图片是可以另存的。

带交互的饼图

这里面的数据是不真实的，随便写的。可以鼠标点击让当前部分立体浮现。

示例见：http://easymorse.googlecode.com/svn/tags/rgraph.demo-1.0.0/piechart.html

进度条

这个进度条也会很有用，比如显示动态的进度。或者是一些指标的动态监控。

示例见：http://easymorse.googlecode.com/svn/trunk/rgraph.demo/progress_bar.html

箱型图

在股票方面大概叫k线图。

随便瞎画的，因为俺不懂股票，估计画的不对，就是演示了一下样子。

示例见：http://easymorse.googlecode.com/svn/trunk/rgraph.demo/box_plots.html

结论

使用RGraph对比服务器端生成图表的优点是：

• 节约带宽；
• 减少服务器负担，生成图表的负担；
• 服务器端开发变的简单，只需传输数据即可；
• 支持交互功能，目前可能还不如flash的一些成熟解决方案，但是因为是标准和开放的，会逐步增强。

和flash解决方案的比较：

• 支持主要智能手机系统，iphone和android，可以在智能手机应用程序中使用本地页面，数据通过http从服务器端获取，这样可以高效实现动态图表；
• 不能支持ie是目前的问题，但是到2011年应该得到改观，届时微软推出IE9版本，应该支持html5 canvas；
• flash页面控件不能共享浏览器的会话状态，服务器端认证成问题，html5的方案很好的解决了这个问题。

作者：marshal   来源：http://marshal.easymorse.com