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