拖动导航器时在 StockChart 中绘制超出 y 轴的上下浮动

Question

这是我的 js 代码：

Highcharts.stockChart('utilizations', {
                chart: {
                        zoomType: 'x'
                },
                title: {
                    text: 'KPI'
                },
                subtitle: {
                    text: 'CCE & PRB Utilization (%)'
                },
                rangeSelector: {
                    buttons: [{
                        type: 'day',
                        count: 1,
                        text: '1d'
                    }, {
                        type: 'day',
                        count: 3,
                        text: '3d'
                    }, {
                        type: 'day',
                        count: 7,
                        text: '1w'
                    }, {
                        type: 'day',
                        count: 14,
                        text: '2w'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    selected: 1
                },
                yAxis: {
                    labels: {
                        formatter: function () {return this.value + '%';}
                    },
                    max: 100,
                    min: 0,
                    tickInterval: 20,
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    },{
                        value: 70,
                        width: 1,
                        color: 'red'
                    }]
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    series: {
                        compare: 'value',
                        showInNavigator: true
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                xAxis: {
                    type: 'datetime'    
                },
                series: [{
                    name: 'CCE Util',
                    type: 'spline',
                    yAxis: 0,
                    data: (function(){
                        var data = [];
                        for (var i = 0; i < result.length; i++) {
                            var time = result[i]["time"];
                            var kpi = result[i]["cce"];
                            data.push([time, kpi]);
                        }
                        return data;
                    })(),
                    tooltip: {
                        valueSuffix: '%',
                        valueDecimals: 2,
                        split: true
                    }
                },{
                    name: 'PRB Util',
                    type: 'spline',
                    yAxis: 0,
                    data: (function(){
                        var data = [];
                        for (var i = 0; i < result.length; i++) {
                            var time = result[i]["time"];
                            var kpi = result[i]["prb"];
                            data.push([time, kpi]);
                        }
                        return data;
                    })(),
                    tooltip: {
                        valueSuffix: '%',
                        valueDecimals: 2,
                        split: true
                    }

还有我的剧情：

拖动导航栏时，有时情节会转到正确的位置，有时看起来像上面的截图。根据我的经验，绘图位置与导航器选择器的左端（记为 A）位置有关。当A位于navigator中整个图的最下方时，显示的图定位良好；当 A 像上面的捕获那样进行时，显示的情节就沉没了。

请参阅此处包含 100 个数据的简短演示：https://jsfiddle.net/ghqyvo0x/

如何让我的情节稳定？

Answer 1

您的问题是由您在 plotOptions 配置对象中设置的 series.compare: 属性引起的。如果您删除这行代码，一切都应该按您的需要工作。我们可以阅读 Highstock API:

Compare the values of the series against the first non-null, non- zero value in the visible range.

plotOptions: {
  series: {
    //compare: 'percent',
    showInNavigator: true    
  }
}

JSFiddle example

API Reference

拖动导航器时在 StockChart 中绘制超出 y 轴的上下浮动

Plot float up & down beyond y-axis in StockChart while dragging navigator

javascript

jquery

highcharts

highstock