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

Eine weitere gute Möglichkeit ist die Übergabe einer renderTo-HTML-Referenz. Wenn es sich um eine Zeichenkette handelt, wird das Element mit dieser ID verwendet. Andernfalls können Sie dies tun:

chart: {
    renderTo: document.getElementById('container')
},

oder mit Jquery:

chart: {
    renderTo: $('#container')[0]
},

Weitere Informationen finden Sie hier: https://api.highcharts.com/highstock/chart.renderTo

Answer 2

Ich hatte das gleiche Problem und habe es mit behoben:

<div id="container" style="width: 100%; height: 100%; position:absolute"></div>

Das Diagramm passt perfekt in den Browser, auch wenn ich die Größe verändere. Sie können den Prozentsatz je nach Bedarf ändern.