上一篇文章寫道：三分鐘上手Highcharts簡(jiǎn)易甘特圖：http://www.itdecent.cn/p/d669d451711b，在官方文檔里面，x軸默認(rèn)為年月日。

在項(xiàng)目需求中，x軸要表示24小時(shí)之內(nèi)的狀態(tài)，不可以使用年月日坐標(biāo)軸，需要使用時(shí)分秒，那么highcharts 怎么設(shè)置x軸時(shí)間格式？這個(gè)問題卡了好久，因?yàn)榫W(wǎng)上沒有找到合適的方案，關(guān)于Highcharts圖表的博客也不是很多，只能自己動(dòng)手研究了。

圖片.png

關(guān)于從后臺(tái)請(qǐng)求過來的數(shù)據(jù)：

$.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); 
            },
        });

// 圖表初始化函數(shù)
    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 : '睡眠檢測(cè)',
            borderColor : 'gray',
            pointWidth : 20,
            data : data,
            dataLabels : {
                enabled : true
            }
        } ]
    });
    }

原文作者：祈澈姑娘
原文鏈接：http://www.itdecent.cn/u/05f416aefbe1創(chuàng)作不易，轉(zhuǎn)載請(qǐng)告知
90后前端妹子，愛編程，愛運(yùn)營(yíng)，愛折騰。堅(jiān)持總結(jié)工作中遇到的技術(shù)問題，堅(jiān)持記錄工作中所所思所見，歡迎大家一起探討交流。