zoukankan      html  css  js  c++  java
  • highcharts中的x轴如何显示时分秒时间格式

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

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

    5640239-4527028e465ef55a.png
    图片.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
                }
            } ]
        });
        }
    
  • 相关阅读:
    Delphi 的字符及字符串 Char、AnsiChar、WideChar、PChar、PAnsiChar、PWideChar
    C# DllImport的用法
    delphi 枚举类型与字符串的转换
    MSSQL2005不能用IP访问
    Delphi制作DLL
    Delphi接口的底层实现
    MacBook下每次SourceTree每次拉取代码都要输入密码解决办法
    因子分析AF
    蒲公英组网
    485通信
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701324.html
Copyright © 2011-2022 走看看