Highcharts - Come avere un grafico con altezza dinamica?

Question

Voglio avere un grafico che ridimensiona la finestra del browser, ma il problema è che l'altezza è fissato a 400px. Questo esempio JSFiddle ha lo stesso problema.

Come posso fare questo? Ho provato ad utilizzare il gestore di eventi chart.events.redraw per ridimensionare il grafico (usando .setSize), ma credo che avvia un (gestore di eventi fuoco, che chiama setSize, che spara un altro gestore di eventi, etc.) del ciclo senza fine.

Answer 1

Proprio non impostare la proprietà altezza in Highcharts e sarà di gestire in modo dinamico per voi fino a quando si imposta un'altezza sul elemento contenente il grafico. Può essere un numero fisso o anche una percentuale se la posizione è assoluta.

Highcharts docs :

Per impostazione predefinita, l'altezza viene calcolata dall'altezza offset della elemento di contenimento

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

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

Answer 2

Che cosa succede se è stato collegato l'evento finestra di ridimensionamento:

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

Si veda l'esempio violino qui .

Highcharts API Reference:. setSize ()

Answer 3

Rimuovi l'altezza sarà risolvere il tuo problema, perché highchart è sensibile alla progettazione se si regola lo schermo sarà anche ri-formato.

Answer 4

In alternativa, è possibile utilizzare direttamente Javascript del window.onresize

Per esempio, il mio codice (utilizzando scriptaculos) è:

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

Quando la forma è un modulo HTML sul mio sito e GFX la grafica highchart.

Answer 5

Un'altra buona opzione è, per passare un riferimento renderTo HTML. Se è una stringa, viene usato l'elemento da tale id. In caso contrario, si può fare:

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

o con jQuery:

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

Ulteriori informazioni possono essere trovate qui: https://api.highcharts.com/highstock/chart.renderTo

Answer 6

Quando si utilizza percentuale, l'altezza è relativo alla larghezza e cambierà dinamicamente con essa:

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

JSFiddle Highcharts con altezza percentuale