Ichars制作数据统计图

数据统计图基本上每个网站的后台都要做，不仅要做还要的非常详细才行，这样才能全面的具体的了解网站数据。之前用的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数据发送到页面进行显示了。