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

时间:2013-06-25 01:52:52

标签: jquery highcharts

首先,对帖子标题道歉,但我没有想出更好的方法来描述我的问题。

在highcharts中是否有办法将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等价物?或者有吗?

4 个答案:

答案 0 :(得分:5)

似乎没有maxRange等效(特征请求,Torstein?),因此必须在调用Highcharts之前确定轴的最大值。根据Sanath的建议,解决方案就是:

$(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/

答案 1 :(得分:4)

请使用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);
    }
    });
});

答案 2 :(得分:1)

Updated 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极值,如果您知道每个系列的最大数据范围就很容易,否则您需要计算每个系列的最大值。

答案 3 :(得分:1)

自Highcharts 4.0以来,我们可以使用yAxis.ceilingyAxis.floordemo

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