RGraph动态生成3D图形表格

背景：

PS:就是好看，就是简单。所以使用3D表格。

随着时代的发展，越来越多人不满足数字表格，而希望可以看到瓶装，树状图的图形表格。这样非常直观且利于数字分析。那么当下有很多种开源的动态表格工具，这里我使用RGraph，使用的是HTML5，最好使用FIREFOX，CHROME等HTML5支持的浏览器。IE10+也是可以支持的，那么官网上说支持IE8+，这个需要实践下。

使用说明：

1、下载

首先，将用到的RGraph下载下来， https://www.rgraph.net/download#stable ，选择 Download the lastest version。 就是下载最新版本了。下好了就是个zip包。直接打开来，点击里面的 demo.html，可以查看各个样式，如下图：

这个顾名思义，就是去找本地的demo来查看啦，然后点看各个案例，就可以看到效果图啦。那么我今天介绍的是

 effect-bar-wave.html这个案例。

这是个3D图，挺好看。来看看它的源码：

 <script>
        data = [4,8,6,3,5,2,6,8,4,5,7,8];

        new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                textAccessible: true,
                scaleZerostart: true,
                backgroundGridAutofitNumvlines: 0,
                linewidth: 0,
                shadow: false,
                hmargin: 7,
                colors: ['Gradient(pink:red:#f33)', 'Gradient(green:#0f0)'],
                labelsAbove: true,
                labels: ['aa','AA','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                clearto: 'white',
                variant: '3d',
                gutterBottom: 90,
                noaxes: true
            }
        }).wave({frames: 60});
    </script>

注意：标上 红颜色的，就是我们需要替换的代码，就是把我们需要展现的数据替换上来就OK了。

2、传值

  这里要说明下，这个demo中的两个需要填写的数据，都是 数组 ,这个很关键，让我吃了很多苦头，我一直以为是JSONArray,那么说到这里大家就很清楚了。只需要从后台传两个字符串给前台，然后把这两个字符串转换成数组即可。

步骤：

• 1、生成需要的显示名字符串，数值字符串。
• 2、前台把字符串生成数组。

3、实现

第一步还是需要引用相应的js的。

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

这直接从demo中复制到自己项目中就可以了。

那么现在我把核心代码贴上，讲解下

		String jname = new String();
		String jdata = new String();
//
//			for (Iterator<?> iterator = report.keys(); iterator.hasNext();) {
//				jname.put(iterator.next());
//			}	
			jname = report.names().toString();
			
			for (Iterator<?> iterator = report.keys(); iterator.hasNext();) {
				jdata+=(report.opt((String) iterator.next()))+",";
			}	
			//将最后的逗号去除
			jdata=jdata.substring(0,jdata.length()-1);
			//将jsonArray的前后[]去除
			jname=jname.substring(1,jname.length()-1);
			
			//将文字内容的双引号去除
		String jnameString = jname.replace("\"", "");
		String jdataString = jdata.replace("\"", "");
		
		request.setAttribute("jname", jnameString);
		request.setAttribute("jdata", jdataString);

JSONObject取key：

这里多说个知识，就是JSONObject,想直接取到所有的key，是有两个办法，

• 一 ：就是使用keys(),这个返回的是一个Iterator,然后遍历下就循环出来了，上面注释的就是这个。
• 二：使用names(),这个方法返回的是一个jsonarray,极其好用啊。如果不要括号，就像我上面做的那样，删掉去就好了

 那么前台页面，只需要把这两个值给接收到，并展现就OK了。

//让后台传值过来的字符串变成数组，并不需要拼接[]
//这里的data都是使用数组，而并不是jsonarray的字符串	
	var  data = $("#jdata").val().split(",");
      	var data2 = $("#jname").val().split(",");

        new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                textAccessible: true,
                scaleZerostart: true,
                backgroundGridAutofitNumvlines: 0,
                linewidth: 0,
                shadow: false,
                hmargin: 7,
                colors: ['Gradient(pink:red:#f33)', 'Gradient(green:#0f0)'],
                labelsAbove: true,
                labels: data2,
                variant: '3d',
                gutterBottom: 30,
                noaxes: true
            }
        }).wave({frames: 60});

4、效果展示

  PS:示例图片是很丑，数据的确很杂。但是我就是这么直接暴力，能用就行