上一篇文章寫道:三分鐘上手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 } } ] }); }