标签：
数据统计图基本上每个网站的后台都要做，不仅要做还要的非常详细才行，这样才能全面的具体的了解网站数据。之前用的jfreechart没有iChars用着方便，也没有iChars的效果炫，所以果断弃暗投明学习了一下IChars。一下就是一个简单的条形统计图的实现。
项目框架：Spring+SpringMVC+MyBatis，运行环境：MyEclipse8.6.
引用：fastjson-1.2.5.jar包
页面引用官网的js文件：ichart.1.2.min.js
iChars是一个很方便的制作统计图的工具，在显示层只需要引用一个js文件，在编写一段JavaScript代码就可以在页面显示图像了，当然他是对后台传到页面的数据是有要求的，必须是json格式的数据，所以我们还需要把从数据库查到的List集合数据转为json数据再传到页面。这就需要引用：fastjson-1.2.5.jar包了。
第一步：在页面引用ichart.1.2.min.js 文件，javaScript 代码如下：
<script type="text/javascript"> $(function() { $.ajax( { type : "post", url : "<%=request.getContextPath()%>/data/queryFL_data", dataType : "json", success : function(data) { var data = data; new iChart.Bar2D( { render : ‘canvasDivs‘,//在页面id为canvasDivs 的div里面显示图形 background_color : ‘#3c4251‘,//背景颜色 grid_color : ‘#882288‘,//柱状图的颜色 data : data, //title : ‘项目类型统计‘, title : { text : ‘项目分类数据柱状图‘, color : ‘#b5bcc5‘ }, subtitle : ‘‘, footnote : ‘数据来源：青青众筹‘, width : 1060, height : 400, coordinate : { width : 640, height : 260, axis : { width : [ 0, 0, 1, 1 ] }, scale : [ { position : ‘bottom‘, start_scale : 0, end_scale : 10, scale_space : 1 } ] }, animation : true, sub_option : { listeners : { parseText : function(r, t) { return t; } } }, legend : { enable : false } }).draw(); } }); }); </script>
其中的data数据是从后台传来的json数据，代码如下：
//这是在Controller里面的Ajax访问的方法 //后台统计数据 //使用Ajax返回数据 @RequestMapping("/queryFL_data") @ResponseBody public String queryFL_data() throws Exception{ String data=fenleiService.queryFL_data(); return data; }
在Service的实现层的代码：
//后台查询数据 public String queryFL_data() throws Exception{ // TODO Auto-generated method stub List<Fenlei> flList=fenleiDaoImp.queryFL_data(); List<ProjectJson> flTypeJsons = new ArrayList<ProjectJson>(); for (Fenlei fl : flList) { Long count = (Long) fl.getFlId().longValue(); flTypeJsons.add(new ProjectJson(fl.getFlName(),count,CollorHelper.getColorCode())); } String jsonText = JSON.toJSONString(flTypeJsons); return jsonText; }
在这里需要特别说明一下Fenlei这个实体类有两个属性Integer的flId和String的flName在这次从数据库查找数据的时候flId不是分类的id号，而是该分类的Count（flId）,也就是说这时的flId 是记录了该分类的项目数量。
CollorHelper是自己定义的一个颜色的帮助类，他可以给每个不同柱状图分配不同的颜色。代码如下：
package com.zzzy.qingju.interceptor; import java.awt.Color; public class CollorHelper { public static String getColorCode() { Color color = new Color( (new Double(Math.random() * 128)).intValue() + 128, (new Double(Math.random() * 128)).intValue() + 128, (new Double(Math.random() * 128)).intValue() + 128); String R = Integer.toHexString(color.getRed()); R = R.length() < 2 ? (‘0‘ + R) : R; String B = Integer.toHexString(color.getBlue()); B = B.length() < 2 ? (‘0‘ + B) : B; String G = Integer.toHexString(color.getGreen()); G = G.length() < 2 ? (‘0‘ + G) : G; return "#" + R + B + G; } }
由于分类的实体类的特点我在这里投机取巧了一下，按照正确的方式应该是定义一个ProjectJson的实体类，实体类的名字可以随便取，类的属性一般要根据要制作的统计图而定的，有的统计图需要三种数据，有的需要四种数据，而这个实体类就根据统计图的数据来制定的，我做的是柱状统计图，他需要三种数据，1—数量、2—名字、3—颜色，
所以根据这个特点我定义的ProjectJson如下：
public class ProjectJson implements Serializable { /** * ProjectJson数据类型的实体类 */ private static final long serialVersionUID = 7877814195365848373L; private String name; private Long value; private String color;
以上就可以把各个分类的数据统计转换成json数据发送到页面进行显示了。
标签：
原文地址：http://www.cnblogs.com/wjn563/p/4476812.html
