Highcharts-设置yAxis的最大范围，但保持轴在该范围内的动态

Question

首先，我为帖子标题感到抱歉，但我没能想出一个更好的标题来描述我的问题。

在高图中，是否有方法将yAxis的最大值设置为1000（即通过max: 1000），但如果最大值低于设置的最大值，则保持动态？举个例子，假设我们有两个数据集。

第一个范围在0到1500之间。此处不应显示任何大于1000的数据。设置yAxis: { max: 1000 }就可以了。

现在，我们使用范围在0到48之间的第二个数据集更新数据系列。现在max: 1000使直线实际上拥抱x轴。因此，在这里，最好是Highcharts动态调整yAxis，使其在0-50之间。

这里有一把小提琴来说明这个问题：http://jsfiddle.net/PanicJ/s7fZu/1/

p.S。刚刚注意到Highcharts中的minRange设置。现在，为什么没有maxRange等效物？还是有？

Answer 1

似乎没有等效的maxRange（功能请求，Torstein？），因此必须在调用Highcharts之前确定轴的最大值。根据萨纳特的建议，一个解决方案是：

$(function () {
   var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
   var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
   var data = Math.random() < 0.5 ? setA : setB;
   var height=Math.max.apply(Math, data);
   if(height > 1000){ height = 1000; }
   $('#container').highcharts({
       chart: {
           marginRight: 80 // like left
       },
       xAxis: {
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },
       yAxis: [{
           lineWidth: 1,
           max: height,
           min: 0,
           title: { text: 'yAxis' }
       }],
       series: [{
           data: data
       }]
   });
});

作为工作示例：http://jsfiddle.net/PanicJ/H2pyC/8/

Answer 2

请使用setExtremes来定义范围。JSfiddle已更新。

 $('#button').click(function () {
    var chart = $('#container').highcharts(
    );
    if ($(this).hasClass('big')) {
        $(this).removeClass('big');
        chart.series[0].setData([29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]);
        //chart.setSize(null,100,true);
        chart.yAxis[0].setExtremes(0,50);
    } else {
        $(this).addClass('big');
        chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]);
        //chart.setSize(null,1600,true);
        chart.yAxis[0].setExtremes(0,1600);
    }
    });
});

Answer 3

由于Highcharts 4.0，我们可以使用yAxis.ceiling和yAxis.floor，演示。

Highcharts.chart('container1', {
  yAxis: {
    floor: 0,
    ceiling: 100
  },
  series: [{
    data: [-10, 1, 0, 2, 3, 5, 8, 5, 15, 14, 25, 154]
  }]
});

Answer 4

更新的jsfiddle

$(function() {
    $('#container').highcharts({
        chart: {
            marginRight: 80 // like left
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            lineWidth: 1,
            max: 1000,
            min: 0,
            title: {
                text: 'Primary Axis'
            }
        }, {
            lineWidth: 1,
            opposite: true,
            title: {
                text: 'Secondary Axis'
            }
        }],
        series: [{
            data: [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]
        }]
    });
    $('#button').click(function() {
        var chart = $('#container').highcharts();
        if ($(this).hasClass('big')) {
            $(this).removeClass('big');
            chart.series[0].setData([29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]);
            chart.yAxis[0].setExtremes(0, 50);
        } else {
            $(this).addClass('big');
            chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]);
            chart.yAxis[0].setExtremes(0, 1600);
        }
    });
});

这个解决方案应该适用于您，您只需要为图表设置yAxis极值，如果您知道每个系列的最大数据范围，这将很容易，否则您需要计算每个系列的最高值。