Highcharts - Wie kann man ein Diagramm mit dynamischer Höhe haben?

Question

Ich möchte ein Diagramm haben, in dem sich das Browserfenster verändert, aber das Problem ist, dass die Höhe auf 400 PX festgelegt ist. Dieses JSFIDDLE -Beispiel hat das gleiche Problem.

Wie kann ich das machen? Ich habe versucht, das Diagramm zu verwenden.

Answer 1

Setzen Sie einfach nicht die Höhe der Höhe in Highcharts ein und sie wird sie für Sie dynamisch behandeln, solange Sie eine Höhe in das enthaltende Element des Diagramms einstellen. Es kann eine feste Zahl oder eine sogar Prozent sein, wenn die Position absolut ist.

Highcharts -Dokumente:

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

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

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

Answer 2

Was ist, wenn Sie das Fenster -Größen -Ereignis angeschlossen haben:

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

Siehe Beispiel Geige hier.

Highcharts -API -Referenz: setSize ().

Answer 3

Entfernen Sie die Höhe, die Ihr Problem behebt, da HighChart nach Design reagiert, wenn Sie Ihren Bildschirm anpassen.

Answer 4

Alternativ können Sie JavaScripts Fenster direkt verwenden.

Als Beispiel lautet mein Code (mit Scriptaculos):

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

Wo Formular ein HTML -Formular auf meiner Webseite und GFX Die Highchart -Grafik ist.

Answer 5

Eine weitere gute Option besteht darin, eine Renderto -HTML -Referenz zu übergeben. Wenn es sich um eine Zeichenfolge handelt, wird das Element durch diese ID verwendet. Ansonsten können Sie:

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

oder mit jQuery:

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

Weitere Informationen finden Sie hier:https://api.highcharts.com/higstock/chart.renderto

Answer 6

Wenn Sie den Prozentsatz verwenden, wird die Höhe der Breite in Bezug auf die Breite und verändert sich dynamisch zusammen mit:

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

Jsfiddle Highcharts mit prozentualer Höhe