9

First of all, apologies for the post title, but I failed to come up with a better one to describe my problem.

Is there a way in highcharts to set the maximum value for the yAxis to, say, 1000 (i.e. via max: 1000) but keep it dynamic if the maximum values are lower than the set maximum? As an example, let's say we have two datasets.

The first one ranges between 0 and 1500. Here any data >1000 should not be displayed. Setting yAxis: { max: 1000 } does the trick.

Now we update the data series with the second data set which ranges between 0 and 48. Now max: 1000 causes the line to virtually hug the x-axis. So here it would be best if Highcharts dynamically adjusts the yAxis to range from 0-50.

Here's a fiddle to illustrate the problem: http://jsfiddle.net/PanicJ/s7fZu/1/

P.S. Just noticed the minRange setting in Highcharts. Now, why isn't there a maxRange equivalent? Or is there?

4

4 回答 4

5

It seems that there is no maxRange equivalent (feature request, Torstein?) so that the axis maximum has to be determined before Highcharts is called. Building upon Sanath's suggestion a solution would be this:

$(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
       }]
   });
});

As working example: http://jsfiddle.net/PanicJ/H2pyC/8/

于 2013-06-25T03:14:24.410 回答
4

please use 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);
    }
    });
});
于 2013-06-25T02:23:12.850 回答
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);
        }
    });
});

This solution should work for you, you just need to set yAxis extremes for the chart, if you know the maximum data range for each series it would be easy, otherwise you need to calculate the maximum value for each series.

于 2015-07-30T12:31:05.580 回答
1

Since Highcharts 4.0 we can use yAxis.ceiling and 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]
  }]
});
于 2017-08-28T12:11:50.217 回答