码迷,mamicode.com
首页 > 其他好文 > 详细

使用Ichars制作动态数据统计图

时间:2015-05-04 19:39:04      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

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

 

使用Ichars制作动态数据统计图

标签:

原文地址:http://www.cnblogs.com/wjn563/p/4476812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!