Highcharts案例-区域分布图

来源：互联网发布：如何学好数据库编辑：程序博客网时间：2024/05/02 04:16

客户端报表技术—HighCharts图表

常见流行的客户端（JS）报表技术有FusionCharts、HighCharts、ECharts等。
Highchart是基于JQuery的一个插件。

Highcharts

引入Highcharts的js和样式资源
参考官方文档案例：

  <%@ page language="java" contentType="text/html; charset=UTF-8"        pageEncoding="UTF-8"%>    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    <html>    <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <!-- 引入jquery -->    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>    <!--highchart核心 -->    <script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/highcharts.js"></script>    <!--highchart 3d -->    <script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/highcharts-3d.js"></script>    <!--highchart 导出模块 -->    <script type="text/javascript" src="${pageContext.request.contextPath}/js/highcharts/modules/exporting.js"></script>    <title>图表</title>    <script type="text/javascript">        //初始化        $(function () {            //初始化容器div（存放报表-）-div：报表对象            //初始化语法有两种：            //1.div.highchats({各种属性})            //2. var chart = new Highcharts.Chart({各种属性：chart: {renderTo: 'container',})            $('#container').highcharts({                //报表本身的一些基础设置                chart: {                    //报表的类型                    type: 'column'//柱状图                    //type: 'bar'//条形图                    ,                    //3d效果                    options3d: {                        enabled: true,//生效                        alpha: 15,                        beta: 15,                        depth: 50,                        viewDistance: 25                    }                },                //覆盖导出服务器的地址                exporting: {                    //将来要换成自己搭建的导出服务器地址即可                    url: 'http://export.hcharts.cn/'                },             //主标题                title: {                    text: '月份平均降雨量'                },                //副标题（可选）                subtitle: {                    text: '数据来源: WorldClimate.com'                },                //x轴的类别                xAxis: {                    categories: [                        '一月',                        '二月',                        'Mar',                        'Apr',                        'May',                        'Jun',                        'Jul',                        'Aug',                        'Sep',                        'Oct',                        'Nov',                        'Dec'                    ],                    //鼠标放到某一个类别上是否有阴影                    crosshair: true                },                //y轴                yAxis: {                    //y轴的最小值                    min: 0,                    //y轴标题                    title: {                        text: '降雨量 (mm)'                    }                },                //鼠标放到图上的提示                tooltip: {                    //{point.key}:获取x轴的当前分类名字                    headerFormat: '<span style="font-size:20px">{point.key}</span><table>',                    //{series.name}数据的name                    //{point.y:.1f}当前分类中y轴的值,保留一个小数点                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +                        '<td style="padding:0"><b>{point.y:.2f} mm</b></td></tr>',                    footerFormat: '</table>',                    shared: true,                    useHTML: true                },                plotOptions: {                    column: {                        pointPadding: 0.2,                        borderWidth: 0                    }                },                //数据                series: [{                    name: '客户新增数量',                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]                }, {                    name: '客户流失数量',                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]                }]            });    });    </script>    </head>    <body>    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>    </body>    </html>

区域分布图案例（使用JavaScript和Java）

页面

引入资源文件
创建区域分布窗口

    <!-- 区域分区分布图 -->        <div class="easyui-window" title="分区分布图" id="searchCharWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">            <div id="subareaChart" style="overflow:auto;padding:5px;" border="false"></div>        </div>         //查询分区,分布图        $("#searchCharWindow").window({            title: '分区分布图',            width: 700,            modal: true,  //模式窗口            shadow: true, //窗口显示阴影            closed: true, //设置默认关闭            height: 400,            resizable: false //窗口不可以调整大小        });

添加按钮，绑定事件

    //工具栏        var toolbar = [        {            id : 'button-charts',            text : '分区分布图',            iconCls : 'icon-tip',            handler : doCharts        }];        //打开分布图        function doCharts(){            $("#searchCharWindow").window("open");        }

发送异步请求获取数据

//ajax查询所有分区数据,返回json        $.post("${pageContext.request.contextPath}/subarea_fingGroupSubareas.action",                function(data){                    $("#subareaChart").highcharts({                        chart:{                            type:'pie',                            height:350,                            width:600                        },                        series:[{                            data:data                        }],                        title:{                            text:'区域分区分布图'                        }                    });                },                "json"            );        });

Java实现

Action

        /**         * 根据省对分区进行分组统计         * @return  json字符串         * @throws Exception         */        @Action(value="subarea_fingGroupSubareas")        public String fingGroupSubareas() throws Exception{            //调用service查询            List<Object> list = subareaService.fingGroupSubareas();            //转为json,使用了struts-json插件            //将list压入栈顶            pushToValueStack(list);            return JSON;        }

Service

        /**         * 根据省对分区进行分组统计         */        @Override        public List<Object> fingGroupSubareas() {            return subareaDao.fingGroupSubareas();        }

        /**         * 根据省对分区进行分组统计         * @return         */        @Query(value="select r.province,count(*) from Subarea s join s.region r group by r.province")        public List<Object> fingGroupSubareas();

0 0