标签：
数据统计图基本上每个网站的后台都要做，不仅要做还要的非常详细才行，这样才能全面的具体的了解网站数据。之前用的jfreechart没有iChartjs用着方便，也没有iChartjs的效果炫，所以果断弃暗投明学习了一下IChartjs。以下下就是一个简单的条形统计图的实现。
项目框架：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;
... 省略get 和set 方法
以上就可以把各个分类的数据统计转换成json数据发送到页面进行显示了。
标签：
原文地址：http://www.cnblogs.com/murong/p/5130849.html
