在项目需求中,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 } } ] }); }