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

简介: highcharts中的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
            }
        } ]
    });
    }
相关文章
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
571 0
|
1月前
让星星⭐月亮告诉你,打印完全格式的日期格式 包含 年月日时分秒毫秒
此方法用于获取完整的日期时间格式,返回值形如“2020-06-30 15:15:15:015”,精确到毫秒。通过`Calendar`类获取当前时间的年、月、日、时、分、秒及毫秒,并将其格式化拼接成字符串返回。
26 1
|
C# 前端开发
WPF DatePicker默认显示当前日期,格式化为年月日
原文:WPF DatePicker默认显示当前日期 WPF的日历选择控件默认为当前日期,共有两种方法,一种静态,一种动态。 静态的当然写在DatePicker控件的属性里了,动态的写在对应的cs文件里,具体请看下面。
6487 0
|
6月前
可修改文字颜色和限制最大日期的时间选择器使用示例
可修改文字颜色和限制最大日期的时间选择器使用示例
37 0
|
12月前
|
JavaScript
DateTimePicker 日期时间选择器,默认获取当前日期
DateTimePicker 日期时间选择器,默认获取当前日期
345 1
|
12月前
|
JavaScript 前端开发 程序员
DatePicker 日期选择器,获取系统默认当前年月日
DatePicker 日期选择器,获取系统默认当前年月日
461 0
181Echarts - 日历坐标系(Calendar Effectscatter)
181Echarts - 日历坐标系(Calendar Effectscatter)
40 0
186Echarts - 日历坐标系(Calendar Pie)
186Echarts - 日历坐标系(Calendar Pie)
45 0
187Echarts - 日历坐标系(Simple Calendar)
187Echarts - 日历坐标系(Simple Calendar)
32 0
183Echarts - 日历坐标系(Calendar Heatmap)
183Echarts - 日历坐标系(Calendar Heatmap)
42 0