0
回答
基于html5的客户端图表生成方案 RGraph
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

尝试过很多种图表生成方案,比较有代表性的:

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

服务器端的缺点是:

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

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

  • 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使用示例

image

这是一个比较丑陋的图表,但是说明问题,可以直接访问: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>

 

带交互能力的条形图

image

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

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

 

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

image

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

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

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

 

带交互的饼图

image

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

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

进度条

image

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

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

箱型图

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

image

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

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

 

结论

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

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

和flash解决方案的比较:

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

文章转自:http://marshal.easymorse.com/archives/2823

举报
鉴客
发帖于6年前 0回/5K+阅
顶部