highcharts中的x轴如何显示时分秒时间格式

上一篇文章写道:三分钟上手Highcharts简易甘特图:https://www.jianshu.com/p/d669d451711b,在官方文档里面,x轴默认为年月日。

在项目需求中,x轴要表示24小时之内的状态,不可以使用年月日坐标轴,需要使用时分秒,那么highcharts 怎么设置x轴时间格式?这个问题卡了好久,因为网上没有找到合适的方案,关于Highcharts图表的博客也不是很多,只能自己动手研究了。

图片.png

关于从后台请求过来的数据:

$.ajax({
            url : basePath +"/stats/rest/echarts?date="+$("#date").val()+"&pid="+nodes[0].id,
            async : false,
            type : 'GET',
            dataType : 'json',
            success : function(data) {
                var obj = data.returnData.list;
                var data = [];
                for(var i = 0; i < obj.length; i++){
                     var lne = {};
                     lne['x']=obj[i].restStartTime+8*60*60*1000;
                     lne['x2']=obj[i].restStopTime+8*60*60*1000;
                     lne['y']=obj[i].state;
                     data.push(lne);
                 }
                chart(data); 
            },
        });
// 图表初始化函数
    function chart(data){
    Highcharts.chart('container', {
        chart : {
            type : 'xrange'
        },
        title : {
            text : ''
        },
        xAxis : {
            type : 'datetime',
            dateTimeLabelFormats : {
                week : '%Y/%m/%d %H%M'
            }
        },
        yAxis : {
            title : {
                text : ''
            },
            categories : [ '深睡眠', '浅睡眠', '醒着的' ],
            reversed : true
        },
        tooltip : {
            dateTimeLabelFormats : {
                day : '%Y/%m/%d %H%M'
            }
        },
        credits : {
            enabled : false
        },
        exporting : {
            enabled : false
        },
        series : [ {
            name : '睡眠检测',
            borderColor : 'gray',
            pointWidth : 20,
            data : data,
            dataLabels : {
                enabled : true
            }
        } ]
    });
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吉浦迅科技

DAY64:阅读 Memory Model

我们正带领大家开始阅读英文的《CUDA C Programming Guide》,今天是第64天,我们正在讲解CUDA C语法,希望在接下来的36天里,您可以学...

8330
来自专栏SDNLAB

CacheP4:一个关于可编程数据平面缓存机制的设想

前言 2014年, 网络领域顶级会议SIGCOMM的一篇论文“P4: Programming Protocol-independent Packet Proce...

37480
来自专栏塔奇克马敲代码

Windows平台下源码分析工具

24030
来自专栏程序猿DD

Spring Boot的应用限流

前言 在一个高并发系统中对流量的把控是非常重要的,当巨大的流量直接请求到我们的服务器上没多久就可能造成接口不可用,不处理的话甚至会造成整个应用不可用。 比如最近...

53160
来自专栏塔奇克马敲代码

Windows平台下源码分析工具

24330
来自专栏杨建荣的学习笔记

MySQL里几个查询语句的性能优化论证

前几天在网上看了一个帖子,描述的现象是在MySQL中,对in,or,union all的性能的比对,看完之后,我就产生了疑问。 文章的大意是说,使用i...

33760
来自专栏Hongten

python开发_常用的python模块及安装方法

adodb:我们领导推荐的数据库连接组件 bsddb3:BerkeleyDB的连接组件 Cheetah-1.0:我比较喜欢这个版本的cheetah cherry...

46930
来自专栏我杨某人的青春满是悔恨

RxSwift 与 BLE 实战——VisualBlue

最近发生了挺多事,也没什么时间更新博客,心中颇有点负疚感。今天就介绍一下前段时间写的一个 demo,主要功能是扫描附近的蓝牙设备,显示相关信息,点击后可以连接设...

10920
来自专栏数据小魔方

R语言数据重塑及导出操作

今天跟大家简单介绍下几个常用的R数据操纵技巧——导入(xlsx)、导出及长宽转换! 数据导入(xlsx) 之前写过一篇关于R导入不同类型数据的方式,但是其中只涉...

27430
来自专栏青青天空树

node.js+vue.js搭建程序设计类课程教学辅助系统

  毕业才刚刚两个多月而已,现在想想大学生活是那么的遥不可及,感觉已经过了好久好久,社会了两个月才明白学校的好啊。。。额,扯远了,自从毕业开始就想找个时间写下毕...

59420

扫码关注云+社区

领取腾讯云代金券