加载JSON文件并在 RGraph 中以 柱状图来展示

随着Html 5 的流行，出了不少基于Canvas 的图表控件，使用这些控件可以展示图表，仪表盘，饼图等等，这样我们可以比较方便展示信息，让数据更直观。在此简单介绍一下RGraph 这组控件，官网http://www.rgraph.net已经介绍很详细了，我在此只是简做笔录，方便用时拿来即可。

首先介绍一下 柱状图

准备工作：

1，首先我要展示的数据如下得数据如下：数据以JSON文件存储在服务端的配置文件里，名字为json.txt,数据没有特别的意义 只是demo 联系使用，模仿从服务端加载数据并在客户端以图表的形式来show一下。

[{"countryname" : "中国","goldmedal":18},

{"countryname" : "美国", goldmedal":18},
{"countryname" : "韩国", "goldmedal":7},
{"countryname" : "法国", goldmedal":6},
{"countryname" : "英国", "goldmedal":5}]

2，自己到官网下载RGraph  的源码，然后解压，里面包括了插件的代码库，以及使用的演示demo，这里我们需要的代码库即存放在libraries 文件夹下，也是我们要使用的.

3。新建web工程，把 libraries拷到工程目录下，引用js库

<script src="js/libraries/RGraph.common.core.js"></script>
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/libraries/RGraph.bar.js"></script>

在Html 文件里面 增加一个标签 ，图表都是画在这个canvas上的

<div ><canvas  height='400' width="600" id="bar01">你的浏览器不支持Html5</canvas></div>

使用Jquery 的gerJSON 来加载数据，把X轴与Y的数据分别存到两个数组里

              

                var countrynames=new Array();
		var goldens=new Array();
		 function getjson()
		 {
		 	
		 	$.getJSON("js/json.txt",function(result){
		 		$.each(result, function(index, val) {
				  countrynames.push(val['countryname']);
				  goldens.push(val['goldmedal']);
				 
				 });
		 		
		 	});
		 	
		 }

这样数据已经从服务端获得，countrynames 存储的即为X轴的标签，goldens存储的即为Y轴的数据

实现柱状图的代码如下

var bar = new RGraph.Bar('bar01', goldens);
                bar.Set('chart.labels', countrynames);
             bar.Set('chart.variant', ['3d']);//设置3d 样式
             bar.Set('chart.title.vpos', 0.5);  //标题向下便宜0.5个单位
                bar.Set('chart.title','统计图');
                      bar.Draw(); 

如果加入<script src="js/libraries/RGraph.common.effects.js"></script> 库，之后把 bar.draw 改为

 RGraph.Effects.Bar.Grow(bar); 之后 会发现生成的图标有动态效果奥

效果如下