是否可以使用Highcharts将日期导航器添加到列范围图表中

Question

我有一个包含 4 个类别的列范围图表，我希望能够在底部添加导航器滚动条，或者如果不可能，请使用 Highstocks 库创建相同的图表。

这是我的代码：http://jsfiddle.net/gportela/9rjby/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: 'Machine Status: Producing'
        },
        subtitle: {
            text: 'Between Dates x and y'
        },
        xAxis: {
            categories: ['Producing', 'Idle', 'Below Rate', 'Changeover']
        },
        yAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    'Hours: ' + Highcharts.dateFormat('%e. %b (%H:%M', this.point.low) +' - '+ Highcharts.dateFormat('%H:%M', this.point.high) + ')';
            }
        },
        series: [{
            name: 'Hours',
            data: [
                {x:0,low:Date.UTC(2014,  2, 12,7),high:Date.UTC(2014,  2, 12,8),color: "lightgreen"},
                {x:0,low:Date.UTC(2014,  2, 12,10),high:Date.UTC(2014,  2, 12,13),color: "lightgreen"},
                {x:0,low:Date.UTC(2014,  2, 12,17),high:Date.UTC(2014,  2, 12,18),color: "lightgreen"},
                {x:0,low:Date.UTC(2014,  2, 12,19),high:Date.UTC(2014,  2, 12,20),color: "lightgreen"},
                {x:0,low:Date.UTC(2014,  2, 12,22),high:Date.UTC(2014,  2, 12,23),color: "lightgreen"},
                {x:1,low:Date.UTC(2014,  2, 12,15),high:Date.UTC(2014,  2, 12,16),color: "orangered"},
                {x:1,low:Date.UTC(2014,  2, 12,8),high:Date.UTC(2014,  2, 12,9),color: "orangered"},
                {x:2,low:Date.UTC(2014,  2, 12,11),high:Date.UTC(2014,  2, 12,12),color: "GreenYellow"},
                {x:3,low:Date.UTC(2014,  2, 12,19),high:Date.UTC(2014,  2, 12,20),color: "DodgerBlue "}
            ]
        }]
    });
});

有人知道如何实现这一目标吗？

谢谢

Answer 1

不幸的是，滚动条仅在 xAxis 上的高库存中可用，但在 yAxis 中不可用（因为它在像您这样的倒排图表中）