RGraph统计图制作插件的使用方法
背景：
目前针对于统计图的制作方法有很多，可以直接利用润乾报表中的自带统计图，还可以通过集算器统计图的方式来定制统计图，当然除此之外，在新的HTML5标准中，新增了一个非常重要的元素—canvas元素。使用该元素，可以在页面中直接进行各种复杂图形的制作。因此，如果使用该元素绘制统计图，比之前使用服务器端控件来生成统计图的方法更加具有优越性，因为使用了该元素之后，绘制统计图的工作是直接在客户端进行的，而不再是在服务器端所完成的了。这不仅意味着不再占用服务器端的资源，而且意味着可以直接利用客户端计算机的强大资源，绘制统计图的速度也就可以大大地得到提高了。而且，因为用来控制canvas图形绘制的脚本代码是可以被压缩的（例如，当你使用Apache服务器的时候，mod_gzip将自动帮你执行代码压缩工作），可以被缓存的，所以也就可以大幅度地减少带宽的占用了。本文就介绍了这样一款制作统计图的插件。设想一下，假如由于客户端的访问，服务器端每天需要创建100，000幅统计图，这对服务器端来说，无疑是一个非常巨大的资源占用。
本文介绍一款名叫Rgraph的插件，使用RGraph统计图制作插件的话，可以将这个资源占用减少到接近零的程度，因为所有创建统计图的工作都是在客户端完成的，就像渲染HTML网页一样，服务器端只负责发送数据，不再负责统计图的生成与发送了，同时带宽的占用情况也大大得到了改善。
另外，由于统计图是依靠JavaScript来生成的，所以当你查看这个显示统计图的HTML网页的时候，该网页是可以为离线状态的了。
对于浏览器来说，目前该插件受到了Firebox 4,Google Chrome 10,Opera 11,Safari 5、IE9浏览器的支持。
如何使用Rgraph
RGraph插件使用起来非常方便，具体来说分为以下几个步骤：
1.在页面中引入RGraph插件所使用的脚本文件，其中RGraph.common.core.js脚本文件（插件的核心代码脚本文件）是必须引入的，代码如下所示：
<script src=”RGraph.common.core.js”></script>
2. 根据页面中需要绘制的统计图的类型与功能引入对应的脚本文件，例如绘制柱状图时需要引入RGraph.bar.js脚本文件，代码如下所示。
<script src=”RGraph.bar.js”></script>
3. 添加canvas元素（用来绘制与显示统计图），代码类似如下所示。
<canvas id=”myCanvas” width=”600″ height=”300″>
[您的浏览器不支持canvas元素]
</canvas>
4.创建统计图，代码类似如下所示。
<script>
function window_onload()
{
var data = [280, 45, 133, 166, 84, 259, 266, 960, 219, 311, 67, 89];
var myGraph = new RGraph.Bar(‘myCanvas’, data);
myGraph.Set(‘chart.labels’, ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月']) ;
myGraph.Set(‘chart.gutter’,35);
myGraph.Draw();
}
</script>
使用服务器端数据
要想使用服务器端，特别是数据库中返回的数据来绘制统计图的话，实现起来也非常容易，只需让服务器端将数据发送到客户端即可，譬如在ASP.NET中，在服务器端生成了一个数组（该数组可由数据库中返回的数据组成），只需将该数组发送到客户端即可，代码类似如下所示。
namespace HTML5TEST
{
public partial class Default : System.Web.UI.Page
{
public int[] dataArray;
protected void Page_Load(object sender, EventArgs e)
{
dataArray=new int[]{280, 45, 133, 166, 84, 259, 266, 960,
219, 311,67, 89}; //该数组可由数据库中返回的数据组成
……
}
……
}
}
在客户端JavaScript脚本代码中，可直接使用服务器端的这个dataArray，代码类似如下所示。
<script language= “javascript “>
function window_onload()
{
//将服务器端的数组传给客户端的数组
var data=new Array(12);
<%
string iniArr;
for(int i=0;i <12;i++)
{
iniArr+=”data["+i+"]=”+dataArray[i]+”;”;
}
%>
<%=iniArr%>
var myGraph = new RGraph.Bar(‘myCanvas’, data);
myGraph.Set(‘chart.labels’, ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月']) ;
myGraph.Set(‘chart.gutter’,35);
myGraph.Draw();
}
</script>
绘制统计图时所使用到的公共属性
接下来，我们来看一下使用Rgraph插件绘制各种统计图时都会使用到的一些公共属性。对统计图使用属性的方法类似如下所示。
myGraph.Set(‘name’, ‘value’);//myGraph代表统计图对象
整体设置相关属性：
对于统计图的长宽高的属性分别为:chart.width chart.height chart.gutter
由于属性较多，这里篇幅有限就不多介绍了。整理到了附件的doc文档中。
柱形图效果：
由