Highcharts展示一天24个时间段的数据统计

柔光的暖阳◎ 2022-06-17 07:27 375阅读 0赞

1.前端页面

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    
                    <link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
                    <link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
                    <link rel="stylesheet" type="text/css" href="${base}/static/lib/Hui-iconfont/1.0.7/iconfont.css" />
                    <link rel="stylesheet" type="text/css" href="${base}/static/lib/icheck/icheck.css" />
                    <link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
                    <link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
    
    <title>实时统计</title>
    <style>
    li {list-style-type:none;}
    #tablebox td{
             height:200px;
    }
    .first td{
            cursor:pointer;
            background-color:#EAEAEA;
    }
    .va-m div{
         height:200px;
         width:600px;  
         display: table-cell;
         vertical-align: middle;
    }
    .box{
        position: relative;
    }
    .box:before{
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        left: 48%;
        top: 217px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #EAEAEA;
        border-bottom: 20px solid transparent;
    }
    .box:after{
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        left: 48.3%;
        top: 216px;
        border-left: 19px solid transparent;
        border-right: 19px solid transparent;
        border-top: 19px solid #fff;
        border-bottom: 19px solid transparent;
    }
    </style>
    </head>
    <body>
    <nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 统计管理 <span class="c-gray en">></span> 实时统计 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
            <div class="page-container ">
                    <table id="tablebox" class="table table-border table-bordered radius" >
                    
                      <tr>
                            <td colspan="4" style="background-color:#778899;height:10px;"><p class="c-white f-20 mt-5 ml-5">实时统计</p></td>
                      </tr>
                      
                      <tr class="first">
                        <td class="va-m box" did="1" οnclick="search(1)" sid="1" style="background-color:#fff">
                            <div id="undelivered" class="text-c" >
                            <li><h1>新增用户(今日)</h1></li>
                            <li><h1>${addMember}</h1></li>
                            </div>
                </td>
                        <td class="va-m" οnclick="search(2)" sid="2">
                             <div id="numberMember" class="text-c">
                                  <li><h1>销售商品(今日)</h1></li>
                                              <li><h1>${numberProduct}</h1></li>
                                 </div>
                    </td>
                        <td class="va-m" οnclick="search(3)" sid="3">
                            <div  id="addMember" class="text-c">
                                            <li><h1>新增画报(今日)</h1></li>
                                            <li><h1>${pictorialAddNumber}</h1></li>
                                </div>
                        </td>
                        <td class="va-m" οnclick="search(4)" sid="4">
                            <div id="numberProduct" class="text-c">
                                            <li><h1>新增动态(今日)</h1></li>
                                            <li><h1>${moodAddNumber}</h1></li>
                                </div>
                        </td>
                      </tr>
                      
                      <tr>
                            <td colspan="4">
                                    <div class="pd-20">
                                            <input class="btn btn-default radius" id="changeDate" type="button"  style="width:100px" value="实时统计" οnfοcus="d533_focus(this)">
                                            <div id="container" style="min-width:700px;height:400px"></div>
                                    </div>
                            </td>
                      </tr>
                    </table>
            </div>
    
    <script type="text/javascript" src="${base}/static/lib/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="${base}/static/lib/layer/2.1/layer.js"></script>
    <script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
    <script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
    <script type="text/javascript" src="${base}/static/lib/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="${base}/static/lib/Highcharts/4.1.7/js/highcharts.js"></script>
    <script type="text/javascript" src="${base}/static/lib/Highcharts/4.1.7/js/modules/exporting.js"></script>
    <script type="text/javascript">
    var chart;
    $(function(){
            init();
            search(1);
    })
    
    function init() {
            
            chart = new Highcharts.Chart({
                    credits: {
                enabled: false       //去除版权信息
            },
            chart: {  
                //将报表对象渲染到层上  
                    renderTo: 'container'  
                },
            title: {
                text: '实时数据统计',
                x: -20 //center
            },
            subtitle: {
                text: '数据来源: buoumall.com',
                x: -20
            },
            xAxis: {
                    title: {
                    text: '时间'
                },
                    labels: {
                            align:'left',
                            step:3
                    },
                categories: ['00', '01', '02','03', '04', '05','06', '07', '08','09', '10', '11','12', '13', '14','15', '16', '17','18', '19', '20','21', '22', '23']
            },
            yAxis: {
                title: {
                    text: '人数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ''
            },
            series: [{
                name: '今日',
                data: [0, 0, 0, 0, 0, 5, 2, 6, 1, 13, 13, 19, 18, 13, 19, 20, 10, 21, 0, 0, 0, 0]
            }, {
                name: '昨日',
                data: [1, 0, 5, 11, 17, 22, 28, 21, 2, 14, 8, 2, 20, 10, 21, 0, 0, 0, 0]
            }, {
                name: '7天前',
                data: [1, 0, 3, 8, 13, 17, 18, 17, 14, 9, 3, 1, 20, 10, 21, 0, 0, 0, 0]
            }, {
                name: '30天前',
                data: [3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4, 20, 10, 21, 0, 0, 0, 0]
            }]
        });
             
    }
    
    function d533_focus(element){
            var clearedFunc = function(){ 
                    $('#changeDate').val("对比时段");
                    var obj = $('td[did=1]').attr('sid');
                    search(obj)
            }
            
            var picking = function(dp){
                    var obj = $('td[did=1]').attr('sid');
                    var newDate = dp.cal.getNewDateStr();
                $('#changeDate').val(newDate);
                search(obj,newDate);
            }
            WdatePicker({errDealMode:4,el:element,oncleared:clearedFunc,onpicking:picking,dateFmt:'yyyy-MM-dd'})
    }
    
     function getForm(obj,newDate){  
           //使用JQuery从后台获取JSON格式的数据  
            jQuery.getJSON('/chart/getData', {"type":obj,"newDate":newDate}, function(data) {  
                if(data.data.theDay != null ){
                        chart.series[0].update({"name": "今天", "data": data.data.today});
                        chart.series[1].update({"name": newDate, "data": data.data.theDay});
                        chart.series[2].hide();
                        chart.series[3].hide();
                }else{
                    init();
                        chart.series[0].update({"name": "今天", "data": data.data.today});
                        chart.series[1].update({"name": "昨天", "data": data.data.yesterday});
                        chart.series[2].update({"name": "7天前", "data": data.data.sevenDay});
                        chart.series[3].update({"name": "30天前", "data": data.data.thirtyDay});
                }
                //为图表设置值  
                if(obj == 2){
                        chart.yAxis[0].update({title: {text: '件数'},});
                }else if(obj == 3){
                        chart.yAxis[0].update({title: {text: '条数'},});
                }else if(obj == 4){
                    chart.yAxis[0].update({title: {text: '条数'},});
                }
            });  
    } 
    
    function search(obj,newDate){
            $('#changeDate').val("对比时段");
            $(".first td").each(function(){
                    if($(this).attr('sid') == obj){
                            $(this).css("background-color","#fff");
                            $(this).addClass('box');
                            $(this).attr('did','1');
                    }else{
                            $(this).css("background-color","#EAEAEA");
                            $(this).removeClass('box');
                            $(this).attr('did','0');
                    }
    //              init();
                    
            }); 
            getForm(obj,newDate);
    }
    </script>
    </body>
    </html>

2.后台代码

@RequestMapping(value = "getData")
    @ResponseBody
    public Result getData(Integer type,Date newDate){
            Map<String,long[]> mapList = Maps.newHashMap();
            //得到查询的时间的数据
            long[] theData = null;
            //得到今天的数据
            long[] todayData = new long[24];
            //得到昨天的数据
            long[] yesterdayData = new long[24];
            //得到7天前的数据
            long[] sevenData = new long[24];
            //得到30天前的数据
            long[] thirtyData = new long[24];
            //查找的时间
            Date startDate = null;
            Date endDate = null;
            //今天的时间
            Date theDateStart = DateUtil.getSomeDayStart(0);
            Date theDateEnd = DateUtil.getSomeDayEnd(0);
            //昨天的时间
            Date oneDateStart = DateUtil.getSomeDayStart(1);
            Date oneDateEnd = DateUtil.getSomeDayEnd(1);
            //7天前的时间
            Date sevenDateStart = DateUtil.getSomeDayStart(7);
            Date sevenDateEnd = DateUtil.getSomeDayEnd(7);
            //30天的时间
            Date thirtyDateStart = DateUtil.getSomeDayStart(30);
            Date thirtyDateEnd = DateUtil.getSomeDayEnd(30);
            if(newDate != null){
                    startDate = DateUtil.getStartTimeOfDay(newDate);
                    endDate = DateUtil.getEndTimeOfDay(newDate);
            }
            try {
                    if(type.equals(1)){
                            //用户新增
                            if(newDate != null){
                                    theData = memberBizService.getSomeDayAddMemberCount(startDate, endDate);
                                    todayData = memberBizService.getSomeDayAddMemberCount(theDateStart, theDateEnd);
                            }else{
                                    todayData = memberBizService.getSomeDayAddMemberCount(theDateStart, theDateEnd);
                                    yesterdayData = memberBizService.getSomeDayAddMemberCount(oneDateStart, oneDateEnd);
                                    sevenData = memberBizService.getSomeDayAddMemberCount(sevenDateStart, sevenDateEnd);
                                    thirtyData = memberBizService.getSomeDayAddMemberCount(thirtyDateStart, thirtyDateEnd);
                            }
                    }else if(type.equals(2)){
                            //销售商品
                            if(newDate != null){
                                    theData = borderService.getSomeDayAddPostCount(startDate, endDate);
                                    todayData = borderService.getSomeDayAddPostCount(theDateStart, theDateEnd);
                            }else{
                                    todayData = borderService.getSomeDayAddPostCount(theDateStart, theDateEnd);
                                    yesterdayData = borderService.getSomeDayAddPostCount(oneDateStart, oneDateEnd);
                                    sevenData = borderService.getSomeDayAddPostCount(sevenDateStart, sevenDateEnd);
                                    thirtyData = borderService.getSomeDayAddPostCount(thirtyDateStart, thirtyDateEnd);
                            }
                    }else if(type.equals(3)){
                            //新增画报
                            if(newDate != null){
                                    theData = postBizService.getSomeDayAddPostCount(startDate, endDate);
                                    todayData = postBizService.getSomeDayAddPostCount(theDateStart, theDateEnd);
                            }else{
                                    todayData = postBizService.getSomeDayAddPostCount(theDateStart, theDateEnd);
                                    yesterdayData = postBizService.getSomeDayAddPostCount(oneDateStart, oneDateEnd);
                                    sevenData = postBizService.getSomeDayAddPostCount(sevenDateStart, sevenDateEnd);
                                    thirtyData = postBizService.getSomeDayAddPostCount(thirtyDateStart, thirtyDateEnd);
                            }
                    }else if(type.equals(4)){
                            //新增动态
                            if(newDate != null){
                                    theData = moodBizService.getSomeDayAddMemberCount(startDate, endDate);
                                    todayData = moodBizService.getSomeDayAddMemberCount(theDateStart, theDateEnd);
                            }else{
                                    todayData = moodBizService.getSomeDayAddMemberCount(theDateStart, theDateEnd);
                                    yesterdayData = moodBizService.getSomeDayAddMemberCount(oneDateStart, oneDateEnd);
                                    sevenData = moodBizService.getSomeDayAddMemberCount(sevenDateStart, sevenDateEnd);
                                    thirtyData = moodBizService.getSomeDayAddMemberCount(thirtyDateStart, thirtyDateEnd);
                            }
                    }
            } catch (BizException e) {
                    e.printStackTrace();
            }
            mapList.put("theDay", theData);
            mapList.put("today", todayData);
            mapList.put("yesterday", yesterdayData);
            mapList.put("sevenDay", sevenData);
            mapList.put("thirtyDay", thirtyData);
            return buildDataResult(mapList);
    }

3.biz中的方法

//统计某一天各个时间段新增的人数
    public long [] getSomeDayAddMemberCount(Date startTime, Date endTime) throws BizException{
            long [] count = new long[24];
            List<Map<String,Object>> mapList = memberService.getSomeDayCount(startTime, endTime);
            for (Map<String, Object> map : mapList) {
                    int i = (int) map.get("hh");
                    long value = (long) map.get("cnt");
                    count[i] = value;
            }
            return count;
    }

4.sql语句

select HOUR(createTime) as hh, count(*) as cnt from user_member
    where createTime<'2016-06-24 23:06:41' and createTime>'2016-06-24 00:06:41'
    group by hh;

5.示例图片 ![20170428120138629][] ![20170420130158715][]

[20170428120138629]: https://img-blog.csdn.net/20170428120138629
[20170420130158715]: /images/20220617/de60ded96398461e90dc9dbfee9acd2b.png