Highcharts案例-区域分布图

最新推荐文章于 2024-04-23 09:58:36 发布

宏微

最新推荐文章于 2024-04-23 09:58:36 发布

阅读量4k

点赞数

分类专栏： javaweb web前端

本文链接：https://blog.csdn.net/shuaicihai/article/details/61616684

版权

javaweb 同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

web前端

13 篇文章 0 订阅

订阅专栏

客户端报表技术—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();