导航器的步骤系列

Question

"step"可以在navigator系列中使用吗？如 API 中所述，它应该是可能的，但由于某种原因对我不起作用。

我正在用 Highstock 制作一个 "Gantt" 图表，我不喜欢带有多个窗格的图表的默认导航器行为（默认情况下，导航器 "borrow" 第一个系列数据）。这就是我提供导航器系列数据的原因

$(function () {

    var data1 = [[1, 0, 1], [2, 0, 1], [2, null, null], [3, 0, 1], [5, 0, 1], [5, null, null], [6, 0, 1], [10, 0, 1]]
    var data2 = [[1, null, null], [2, 0, 1], [4, 0, 1], [10, null, null]]
    var dataNavigator = [[1, 1], [3, 2], [4, 1], [5, 0], [6, 1], [10, 1]]

    $('#container').highcharts('StockChart', {

        chart: {
            type: 'arearange'
        },

        xAxis : {
            ordinal: false
        },

        navigator : {
            series : {
                step: true,
                data: dataNavigator
            }
        },

        yAxis: [{
            gridLineWidth: 0,
            opposite: false,
            height: '50%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false},
            title : {
                text: "y0"
            }
        }, {
            gridLineWidth: 0,
            opposite: false,
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2,
            labels: {enabled: false},
            title : {
                text: "y1"
            }
        }],

        rangeSelector: {
            selected: 2
        },

        title: {
            text: 'Temperature variation by day'
        },

        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>'
        },

        series: [{
            name: 'Serie Name 1',
            data: data1,
            step: true,
            yAxis: 0
        }, {
            name: 'Serie Name 2',
            data: data2,
            step: true,
            yAxis: 1,
            id: 'series1'
        }]

    });

});

Answer 1

由于 step 是为类型 line 系列定义的，因此您必须手动定义它。此外，step 的值为 'left'、'right' 和 'center'。例如：

navigator : {
    series : {
        type: 'line',
        step: 'left',
        data: dataNavigator
    }
}

查看 this JSFiddle demonstration 它的外观。

导航器的步骤系列

Step serie for navigator

highcharts

highstock