Highcharts - come avere un grafico con altezza dinamica?

Voglio avere un grafico che ridimensiona la finestra del browser, ma il problema è che l'altezza è fissato a 400px. This JSFiddle example ha lo stesso problema.Highcharts - come avere un grafico con altezza dinamica?

Come posso farlo? 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.

fonte

2012-01-10 duality_

Semplicemente non impostare la proprietà height in HighCharts e lo gestirà dinamicamente finché si imposta un'altezza sull'elemento contenitore del 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 del contenente elemento

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

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

fonte

2013-11-01 17:08:27 tybro0103

Qualche idea su come fare questo con un grafico a barre? la sua non funziona. Vedi demo: http://jsfiddle.net/a40a0bjy/ –

@Hanoncs la tua regola CSS ha avuto l'id sbagliato. http://jsfiddle.net/a40a0bjy/3/ – tybro0103

Ho notato che grazie. Quello che sto cercando di fare è far crescere il grafico in quanto ha dati. Con la demo di mt se ho una barra, la espande in un enorme bar e se ho 100 barre sono tutte schiacciate insieme. Voglio far crescere la pagina e mantenere il padding tra ogni barra. ecco la mia domanda senza risposta ancora. http://stackoverflow.com/questions/30868963/highcharts-bar-chart-auto-height –

cosa succede se si agganciato l'evento finestra di ridimensionamento:

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

Vedi esempio violino here.

Highcharts API Reference: setSize().

fonte

2012-01-11 01:56:12 Mark

Credo che questo funziona, ma non riesce per la larghezza del grafico se è diversa dal 100%. Vedere questo mutato violino: http://jsfiddle.net/DdtsD/ –

@duality_, funziona per la larghezza, se si imposta l'opzione grafico riflusso false. Vedi qui: http://jsfiddle.net/6MnFA/ – Mark

Ecco, grazie. –

In alternativa, è possibile utilizzare direttamente window.onresize di javascript

A titolo di esempio, il mio codice (utilizzando scriptaculos) è:

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

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

fonte

2013-06-15 22:34:56 destroyedlolo

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

fonte

2013-09-13 04:30:48 RAM

Solo al caricamento iniziale, non sarà reattivo. – user959690

Highcharts - come avere un grafico con altezza dinamica?

risposta

Problemi correlati