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

最新推荐文章于 2022-03-21 10:28:48 发布
最新推荐文章于 2022-03-21 10:28:48 发布
阅读量4.7k 收藏
点赞数
分类专栏： 实例 文章标签： 折线图 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nightliar/article/details/70257205
版权

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" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
                <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" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<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.示例图片
Nightliar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
highcharts x轴 按照时间 datetime排序
solocao的专栏
01-09 635
1、我的配置文件代码： var chart = Highcharts.chart('warningCharts', { chart: { type: 'line', }, style: { fontSize: '12px', color: '#006cee', padding: '10rpx', }, title: { text: null, }, subtitle: { text: null, },
12.企业快速开发平台Spring Cloud+Spring Boot+Mybatis之Highcharts 时间间隔图表
m0_59198293的博客
07-01 212
以下实例演示了时间间隔图表。我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。文件名：highcharts_spline_time.htm 以上实例输出结果为：
Highcharts不规则时间间隔图表
实践求真知
12-09 1194
一 代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Highcharts不规则时间间隔图表&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&am
highcharts 24小时显示数据，显示00:00格式的数据
weixin_30387423的博客
03-19 274
Showing 24 hours on xAxis WITHOUT a date on 00:00 格式参考PHP手册中的:strftime 转载于:https://www.cnblogs.com/fsong/p/5295552.html
HighCharts报表之条形统计图
hcstudio的专栏
07-24 1467
机构推送资源数据分析(有效性)                         $(function () {             var chart;             $(document).ready(function () {                 chart = new Highcharts.Chart({
Vue 中使用vue2-highcharts实现曲线数据展示的方法
08-27
在本文中，我们将使用多个Vue组件，包括yesterdaypicker、daypicker、vchooser等，来创建一个完整的曲线数据展示页面。这些组件将帮助我们实现日期选择、曲线图表展示等功能。 知识点4: 使用Highcharts库 ...
jQuery+highcharts各种数据统计图表代码
11-08
而 Highcharts 是一个基于 JavaScript 的图表库，提供了丰富的图表类型，如折线图、柱状图、饼图、散点图等，适用于多种数据可视化场景。 ### 一、jQuery 的准备工作 在使用 Highcharts 之前，需要确保页面已经...
数据统计-图形化展示-HighCharts插件
05-29
例如，我们可以设定一个定时器，每隔一定时间就加载一组新的数据，从而达到轮换展示的目的。同时，为了响应用户交互，可以添加双击事件监听器，当用户双击图表时触发切换。 ```javascript var intervalId; ...
Highcharts多个图表共用一个提示框,每个图表多条曲线
01-26
在这个特定的场景中，我们关注的是如何实现"Highcharts多个图表共用一个提示框，每个图表多条曲线"的功能。这通常涉及到对Highcharts API的深入理解和定制。 首先，我们要理解Highcharts的提示框（tooltip）是用于...
highcharts好用的前端统计js
07-23
Highcharts是一款广泛应用于前端开发中的JavaScript图表库，它以其易用性和灵活性著称，能够帮助开发者轻松创建出各种丰富的...如果你正在寻找一个快速、高效的前端图表解决方案，Highcharts无疑是一个值得考虑的选择。
php+highchart绘制最近7天的用户积分折线图
10-28
php+highchart绘制最近7天的用户积分折线图
C# chart实时数据显示简单示例工程文件
08-04
C# chart实时数据显示简单示例工程文件， 详细说明可以参看相关博文
C#编写的基于串口的Chart数据曲线图
03-04
自己用C#编写的基于串口的Chart数据曲线图，已调试通过。
如何实现数据大屏在各种场景下的时间展示？
迪赛智慧数的博客
03-21 2169
如果你用可视化互动平台做数据报表大屏的时候需要展示“时间”，那时间组件应该是你的不二之选。它擅长于以各种方式为你报表大屏呈现“时间”。 “时间”作为人机界面交互中不可缺少的元素之一，其本质是为了传递时间维度的信息。 我们平时在使用电子设备和互联网产品过程中发现，关于“时间”在不同的页面和场景，它的呈现状态和方式往往是不同的，这选用“时间”的展示方式是出于怎样的考虑呢？ 今天我们就来聊一聊在用可视化平台设计数据报表大屏时，如何掌握“时间”的诀窍，让其在报表中发挥最大的作用，满足观看者随时知道“时间”的需
Highcharts 时间截断 利用主轴可以做上下限设定---不是很可取 上下限设定---最佳可取方案
moustar007的专栏
09-19 938
//时间截断 $(function () {     var chart = new Highcharts.Chart({         chart: {             renderTo: 'container',             type: 'column',             rightMargin: 80         },
2 C#串口或TCP远程采集数据 chart图表使用示例 保存数据到access数据库和每日.txt文件并实时显示各参数曲线
chenhao0568的专栏
10-29 5999
之前项目1通过GSM短信采集项目 本版采用了TCP服务器模式，来接收数据。还有数据格式有些变化 1.先上图（其实也支持串口，因为暂时不用，被我隐藏了） 很简单，没什么要说的。
使用highcharts来建立多轴时间序列图
李子无为的杂货铺
02-07 2832
实现效果如图的timeseries chart，一些概念在图上做了标注。 有几个特点： 1.多个Y轴，两个、三个数量不限，均匀地垂直排列，每个轴只有一条数据线 2.共享X轴，X轴是时间轴，同是crosshair可以在多个轴上同步移动 3.支持plot band，就是半透明的带状图形，可以从第三个维度表示一段时间的某种状态，在开始结束的地方有flag。 highcharts
highcharts的时间轴只展示8个label
最新发布
05-26
高图（Highcharts）的时间轴默认情况下会自动计算并只展示一定数量的标签，以避免标签重叠。如果您想要展示更多的标签，可以通过以下方法进行调整： 1. 设置xAxis.labels.step属性为1，强制显示所有标签。 2. 设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值