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图，挺好看。来看看它的源码：

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

2、传值

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

步骤：

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

3、实现

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

这直接从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:示例图片是很丑，数据的确很杂。但是我就是这么直接暴力，能用就行