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

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

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

 

 

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

$.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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值