Question

我正在设置一个设置了最小值和最大值的图表。每10秒钟，图表将使用新数据进行更新，并且系列会被推送。一切正常，除非在极少数情况下，数据超过我的最大值。我一直试图像minHeight类型那样精确设置最大值，但是如果数据超过最大值，它会推出它直到数据再次消失？

我的值设置为min 0，max 7000，我将它设置为这样一目了然你可以看到沿600移动的线在规格范围内，并且在大约6000的位置它应该在哪里。但由于它只显示1小时，有时候条形消失了，看起来它没有加载。

以下是数据超过最大值时我的数据的样本示例 - http://jsfiddle.net/J2f47/

 $(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                min: -5,
                max: 40,
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 28.2, 36.5, 41.2, 46.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

谢谢 KIRT

Answer 1

根据您的情况，我建议在检查系列是否包含峰值后设置max，例如：http://jsfiddle.net/J2f47/2/

Array.prototype.max = function() {
  return Math.max.apply(null, this);
};

var data1 = [600, 621, 628, 656, 612, 676, 641, 648, 708, 665, 659, 640],
    data2 = [672, 689, 4820, 4864, 4871, 4880, 4869, 7786, 7692, 7744, 4770, 5769],
    max = data2.max();

然后在选项中：

        yAxis: {
            min: 0,
            max: max > 7000 ? max : 7000,
            tickInterval: 1000,
            title: {
                text: ''
            },
        },

如果您有实时更新，请检查新点是否高于7000。如果是在添加点呼叫之后：

chart.yAxis[0].setExtremes(0, new_max_value);

Answer 2

我认为最适合您需求的是plotLines元素。这将使图表自动调整大小并仍然表示规范内的内容。

Answer 3

你想要的是minRange ...在你的轴上设置minRange option，它将始终显示至少那么多的值。

Here是你的minRange jsfiddle。

Highcharts将最大值推到预设值之后

3 个答案: