我想要一个堆积的条形图,其时间显示在y轴上,如此jsFiddle。
y轴上的时间对于所有值都是00:00。我想知道为什么它没有显示不同的时间。对于两个条形,不同区域的宽度应该是不同的,因为它们具有不同的时间但是对于每个数据它们是相等的。我传递的数据是UTC毫秒。即使它们具有不同的起始值,两个条都开始于相同的水平。
我想要达到这样的目的:
这是我的代码:
var chartOptions = {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: [ 'Actual', 'Scheduled' ]
},
yAxis: {
type : 'datetime',
dateTimeLabelFormats : {
day: '%H:%M'
},
labels:{formatter :function(){
console.log(this.value);
return Highcharts.dateFormat('%H:%M', this.value);
}},
opposite: true,
plotLines: [{
color: '#FF0000',
width: 2,
value: 1428042300000,
label :{text :'current time'}
}]
},
tooltip : {
formatter : function() {
return Highcharts.dateFormat('%H:%M:%S', this.y) + ': <b>' + this.series.name;
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels :{enabled:true,formatter :function(){ if(this.y){return this.series.name}}}
}
},
series: [{"name":"Take-Off","data":[null,1428042300000]},{"name":"Off-Block","data":[null,1428042300000]},{"name":"In-Block","data":[null,1428038700000]},{"name":"Landing","data":[1428038160000,1428038700000]}]
}
答案 0 :(得分:1)
条形显示相同的宽度,因为它们表示您传入的日期的相对值,即自纪元以来的整数毫秒数。你需要计算每个阶段的时间跨度并改为绘制。
像http://jsfiddle.net/3fu5ord0/1/
这样的东西P.S。显然我不能在没有代码的情况下发布一个jsfiddle链接:
series: [{"name": "Take-Off","data": 3600000}] // etc.