Highcharts日期时间轴

Question

我想要一个在 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]}]
}

Answer 1

条形显示相同的宽度，因为它们代表您传递的日期的相对值，即自纪元以来的毫秒数。您需要计算出每个阶段的时间跨度并将其绘制出来。

类似于http://jsfiddle.net/3fu5ord0/1/

P.S。显然我不能 post 一个 jsfiddle link 没有一些代码：

series: [{"name": "Take-Off","data": 3600000}] // etc.

Highcharts日期时间轴

Highcharts date time axis

datetime

highcharts

timeline