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

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

时间: 2024-10-25 05:11:09

使用Ichars制作动态数据统计图的相关文章

Ichars制作数据统计图

数据统计图基本上每个网站的后台都要做,不仅要做还要的非常详细才行,这样才能全面的具体的了解网站数据.之前用的jfreechart没有iChartjs用着方便,也没有iChartjs的效果炫,所以果断弃暗投明学习了一下IChartjs.以下下就是一个简单的条形统计图的实现. 项目框架:Spring+SpringMVC+MyBatis,运行环境:MyEclipse8.6. 引用:fastjson-1.2.5.jar包 页面引用官网的js文件:ichart.1.2.min.js iChars是一个很方

根据数据多少动态调整统计图的大小

一般情况下,统计图都是用其直观的展现方式在数据分析中起着至关重要的作用,而统计图的外表是否好看整洁.显示效果是否理想也就成为设计图形报表时所关注的问题. 统计图图形的宽窄都是根据数据的多少进行自动设置的,那么,也就是说如果在一个固定单元格中增加了根据参数设置的统计图,那么当传参得到的数据少时,图形就会变得很宽,相对应的图形就会很窄,效果很不好看. 我们可以用动态控制单元格的宽度和高度的方式来解决这个问题: 动态增加统计图所在行的行高,可以在行高表达式中加入=count(单元格{})*n,单元格为

制作动态根文件系统

需要的工具-------busybox-1.17.2    附:busybox-1.17.2的下载地址,请点击下载 进入需要创建根文件系统的路径,本文的路径是:/forlinx/mini2440/ 说明:本文制作的根文件系统名称为rootfs; 第一步:创建rootfs目录和该目录下的一级子目录和二级子目录,为了方便,已将这些工作写成了脚本mkrootfs.sh; 该脚本放在/forlinx/mini2440/路径下:运行该脚本./mkrootfs.sh即可完成此步工作.mkrootfs.sh代

3分钟掌握一个有数小技能:制作动态标题

本文由  网易云发布. 作者:汪谦 (本篇文章仅限知乎内部分享,如需转载,请取得作者同意授权.) 在制作可视化报告时,会遇到如下需求:动态显示图表的标题. 如下图所示,右侧图表标题的显示内容会根据左侧选中的数据项发生变化. 当左侧未选中任何省份时,右侧显示全国的销售额,同时标题显示"全国各年销售额": 当左侧选中某一省份时(比如浙江省),右侧显示浙江省的销售额,同时标题显示"浙江各年销售额". 那么如何在有数中实现这样的功能呢?我们可以利用"图表"

如何使用Excel制作动态图表?你还在用函数完成吗,简单的方法交给你

Excel相比大家都不陌生,几乎每台电脑上面都有这个工具,这也是初入职场小白必会的一个技巧,如何使用Excel制作动态图表?大多数人们都会直接使用函数完成,其实还有更简单的方法,下面一起来看看吧! 如图,插入数据透视表.方法:在插入中选择数据透视表,选中区域. 报表字段设置如下: 得到数据透视表(如下图),将鼠标选中数据透视表的行标签,选择插入中的切片器,选中部门和区域. 切片器中有几个选项,可以选择其中一个也可以按Ctrl键多选,选择之后数据透视表会反应出符合条件的项目.如下图所示,选择"部门

游戏设计一、关于游戏动态数据和静态数据的处理

最近的游戏项目遇到的问题 让我思考了一些东西  比如 游戏开始时会初始化很多数据到世界里面,比如玩家的金钱,玩家一边打怪 一边金钱猛涨,在打怪的时候,金钱的数据应该是直接写到世界的,而不是更新了金钱就写到数据库的,所以这里就有个问题,当玩家查点击 装备的时候 上面会有个金钱的额度 这个数值是通过数据库还是通过世界内存来的? 简单说下 世界内存就是动态数据 静态数据 都是放数据库的,如果要看到及时的额度 那就必须增加动态数值查询的接口

Highcharts 之 【动态数据】

最近项目中需要用到图表,找了几个开源框架,最后选择 Highcharts,原因是 Highcharts 功能强大,稳定,方便,而且开源,社区比较成熟. 首先下载 Highcharts,导入项目. 在 HTML 页面引入相应的 Js 文件.我这个项目是情绪监控相关,所谓情绪也就是热点的意思.大数据团队通过爬虫,先从数据库词典里拿到比较靠前的几个行业名称,然后通过爬虫在网上抓取这几个行业的热度值.每天固定时间抓取,统计一次. <!DOCTYPE HTML> <html> <hea

Xcode 6制作动态及静态Framework

Xcode 6制作动态及静态Framework iOS 静态库 关键点 新建Target为Cocoa Touch Framework,deployment target(支持的最低版本的系统)设置成5.1.1. 制作通用动态库(可同时在真机以及模拟器上使用) # Sets the target folders and the final framework product. # 如果工程名称和Framework的Target名称不一样的话,要自定义FMKNAME # 例如: FMK_NAME =

利用SD_SALESDOCUMENT_CREATE 批导动态数据SO

期初上线时,SO作为动态数据,是批导入系统必须做的一步,好多朋友利用bdc.lsmw.scatt等工具都可以做,下面是项目中利用SD_SALESDOCUMENT_CREATE 进行批导的一些代码,分享一下,希望对用到的朋友有帮助. *&---------------------------------------------------------------------* *& Report  ZSD_BATCH_SO *& *&---------------------