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位于导航器中整个绘图的最低部分时，显示的绘图位置很好;当A像上面的捕获一样，情节显示沉没。

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

如何让我的情节稳定？

Answer 1

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

将系列的值与可见范围内的第一个非零，非零值进行比较。

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

JSFiddle example

API Reference

情节漂浮＆amp;拖动导航器时，在StockChart中超出y轴

1 个答案: