Highcharts - maximale Reichweite für yAxis einstellen, aber Achsdynamik innerhalb dieses Bereichs halten

Question

Zuerst entschuldigte ich mich für den Beitragstitel, aber es gelang mir nicht, einen besseren zu finden, um mein Problem zu beschreiben.

Gibt es eine Möglichkeit in Highcharts, den Maximalwert für yAxis auf 1000 zu setzen (d. H. Über max: 1000), aber dynamisch zu halten, wenn die Maximalwerte niedriger als das eingestellte Maximum sind? Nehmen wir als Beispiel an, wir haben zwei Datensätze.

Die erste liegt zwischen 0 und 1500. Hier dürfen keine Daten> 1000 angezeigt werden. Einstellung yAxis: { max: 1000 } macht den Trick.

Jetzt aktualisieren wir die Datenreihe mit dem zweiten Datensatz, der zwischen 0 und 48 liegt. Jetzt bewirkt max: 1000, dass die Linie die X-Achse virtuell umarmt. Hier ist es am besten, wenn Highcharts die yAxis dynamisch von 0 bis 50 anpasst.

Hier ist eine Geige, das Problem zu veranschaulichen: http://jsfiddle.net/PanicJ/s7fZu/1/

P. S. Gerade bemerkte die minRange Einstellung in Highcharts. Nun, warum gibt es kein maxRange Äquivalent? Oder ist es da?

Answer 1

Es scheint, dass es keine maxRange Äquivalent (Feature-Request, Torstein?), So dass die Achse Maximum bestimmt werden muss, bevor Highcharts genannt wird. Aufbauend auf Sanath Vorschlag eine Lösung wäre dies:

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

Als Arbeitsbeispiel: http://jsfiddle.net/PanicJ/H2pyC/8/

Answer 2

benutzen Sie bitte

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); 
    } 
    }); 
}); 

Answer 3

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); 
     } 
    }); 
}); 

Diese Lösung sollte für Sie arbeiten, Sie müssen nur yAchse Extremen für die Set Diagramm, wenn Sie den maximalen Datenbereich für jede Serie wissen, wäre es einfach, andernfalls müssen Sie den maximalen Wert für jede Serie berechnen.

Answer 4

Seit Highcharts 4.0 können wir yAxis.ceiling und yAxis.floor, demo verwenden.

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