首页 文章

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

提问于
浏览 次
9

首先，为帖子 Headers 道歉，但我没有想出一个更好的描述我的问题 .

在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/

附：刚注意到Highcharts中的minRange设置 . 现在，为什么没有相应的 maxRange ？还是有吗？

jquery highcharts

4 回答

  • 1

    似乎没有 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

    请用

    setExtremes to define a range. The JSfiddle has been updated. 

 $('#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);
    }
    });
});
    回复于
  • 5

    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

    从Highcharts 4.0开始，我们可以使用yAxis.ceiling和yAxis.floor，demo .

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

相关问题