Highstock导航器步骤类似于父图表

Highstock navigator step like the parent chart

本文关键字：类似于导航 Highstock 更新时间：2023-09-26

我正在使用Hilitock为我的web应用程序可视化一些数据。

数据显示为步骤(即一个值保持直到新的值接管)，但是Hilitock的导航器似乎对数据使用样条算法。我希望它像主图表一样显示为"块"。

我已经尝试添加步骤:"true"到导航器。级数在选项中，但这似乎无关紧要。

有人知道用Hilitock API做这件事的方法吗?我一直在钻研文档一段时间，没有任何运气。

初始化hilitock图表的代码:

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

    rangeSelector: {
        inputEnabled: true,
        selected: 0,
        buttons: [{
            type: 'day',
            count: 1,
            text: 'Day'
        }, {
            type: 'week',
            count: 1,
            text: 'Week'
        }]
    },
    series: [{
        name: 'Light level',
        data: data,
        type: 'area',
        step: true,
        threshold: null,
        tooltip: {
            valueDecimals: 2
        },
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, "#fff800"],
                [1, Highcharts.Color("#fff800").setOpacity(0).get('rgba')]
            ]
        }
    }],
    yAxis: {
        labels: {
            formatter: function () {
                if (this.value > 0) return "" + this.value + "%";
                return "";
            }
        },
        plotLines: [{
            value: 0,
            color: 'green',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: '0%',
                align: "right"
            }
        }, {
            value: 100,
            color: 'red',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: '100%',
                align: "right"
            }
        }],
        tickPositions: [0, 25, 50, 75, 100]
    },
    credits: {
        enabled: false
    },
    navigator: {
        //enabled: false
    }
});

我还用示例数据创建了一个jsfiddle。http://jsfiddle.net/EJZ5x/

根据docs - step选项不支持

然而，当您直接为导航器设置type时，它可以工作!参见:http://jsfiddle.net/EJZ5x/1/

    navigator: {
        series: {
            type: 'area',
            step: 'left' 
        }
    }