Question

我想要一个堆积的条形图，其时间显示在y轴上，如此jsFiddle。

y轴上的时间对于所有值都是00:00。我想知道为什么它没有显示不同的时间。对于两个条形，不同区域的宽度应该是不同的，因为它们具有不同的时间但是对于每个数据它们是相等的。我传递的数据是UTC毫秒。即使它们具有不同的起始值，两个条都开始于相同的水平。

我想要达到这样的目的：
Screenshot Example

这是我的代码：

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。显然我不能在没有代码的情况下发布一个jsfiddle链接：

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

Highcharts日期时间轴

1 个答案: