Highcharts - wie erhält man ein Diagramm mit dynamischer Höhe?

Question

Ich möchte ein Diagramm, das die Größe mit dem Browser-Fenster, aber das Problem ist, dass die Höhe auf 400px festgelegt ist. Dieses JSFiddle-Beispiel hat das gleiche Problem.

Wie kann ich das tun? Ich habe versucht, die chart.events.redraw-Ereignishandler zu verwenden, um die Größe des Diagramms (mit .setSize) zu ändern, aber ich denke, es beginnt eine Endlosschleife (Feuer-Ereignishandler, die setSize, die eine andere Ereignishandler, etc. auslöst ruft).

Answer 1

Setzen Sie einfach nicht die Höheneigenschaft in HighCharts und es wird es dynamisch für Sie handhaben, solange Sie eine Höhe auf dem Diagramm enthaltenden Element setzen. Es kann eine feste Zahl oder sogar ein Prozent sein, wenn die Position absolut ist.

Highcharts-Dokumente :

Standardmäßig wird die Höhe aus der Offset-Höhe berechnet enthaltenden Elements

Beispiel: http://jsfiddle.net/wkkAd/149/

#container {
    height:100%;
    width:100%;
    position:absolute;
}

Answer 2

Was wäre, wenn Sie das Ereignis zur Größenänderung des Fensters einhaken würden?

$(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    );   
});

Siehe Beispielgeige aquí .

Highcharts API-Referenz : setSize() .

Answer 3

Bei der Verwendung von Prozentsätzen ist die Höhe relativ zur Breite und ändert sich dynamisch mit ihr:

chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
},

JSFiddle Highcharts mit prozentualer Höhe

Answer 4

Entfernen Sie die Höhe wird Ihr Problem zu beheben, weil Highchart ist reaktionsschnell durch Design, wenn Sie Ihren Bildschirm anpassen wird es auch neu zu skalieren.

Answer 5

Alternativ können Sie auch direkt javascript's window.onresize verwenden

Als Beispiel ist mein Code (unter Verwendung von scriptaculos) :

window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

Wobei das Formular ein html-Formular auf meiner Webseite ist und die Highchart-Grafik gfx.