Ridimensiona altezza con Highcharts

Question

Ho un diagramma alto che ridimensiona la larghezza beatuifully quando la finestra cambia dimensione. Ma non all'altezza. Ho provato questo formato grafico ma non funziona proberamente. C'è un altro modo per cambiare automaticamente l'altezza quando le dimensioni della finestra cambiano?

Questo è il mio codice css per l'output. Ho una scheda di jQuery UI, l'altra scheda sta mostrando DataTable

#output-container 
{ 
float: right; 
display: inline; 
position: absolute; 
right: 10px; 
left: 400px; 
top:120px; 
overflow-y: auto; 
} 

Questo è il mio css per la chartdiv:

#chartContainer{ 
margin: auto; 
} 

E questa è la funzione js Grafico:

function qchart(){ 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartContainer', 
      type: 'column', 
      spacingBottom: 3, 
      //height: (screen.availHeight)-500, 
      marginRight: 30, 
      marginBottom: 30, 
      reflow: true 
     }, 
     //etc.. 
    }; 
    //... 
} 

Answer 1

risposta di Ricardo è corretta, però: a volte si può trovare in una situazione in cui il contenitore semplicemente non ridimensiona, se lo desideri come la finestra del browser cambia dimensione, quindi non consente il ridimensionamento di diagrammi highchart.

Funziona sempre:
1. Impostare un listener di eventi di ridimensionamento temporizzato e pipelined. Example with 500ms on jsFiddle
2. Uso chart.setSize(width, height, doAnimation = true); nella vostra funzione di ridimensionamento effettivo per impostare l'altezza e la larghezza in modo dinamico
3. Impostare reflow: false nelle Highcharts-opzioni e naturalmente impostare height e width esplicitamente sulla creazione. Poiché eseguiremo la gestione degli eventi di ridimensionamento, non ci sarà bisogno di agganci di Highcharts in un altro.

Answer 2

Secondo l'API Riferimento:

By default the height is calculated from the offset height of the containing element. Defaults to null.

Quindi, è possibile controllare è height in base al div padre utilizzando l'evento redraw, che viene chiamato quando cambia le sue dimensioni.

Riferimenti

• http://api.highcharts.com/highstock#chart.height
• http://api.highcharts.com/highstock#chart.events.redraw

Answer 3

È necessario impostare l'altezza del contenitore esplicitamente

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

See other stackoverflow answer

highcharts documentation

Answer 4

Ho avuto un problema simile con altezza tranne il mio schema era all'interno di un popup modale bootstrap, che ho' m già controllando la dimensione di con css. Tuttavia, per qualche motivo quando la finestra è stata ridimensionata orizzontalmente, l'altezza del contenitore del grafico si espanderebbe indefinitamente. Se si dovesse trascinare la finestra avanti e indietro, si espanderebbe verticalmente all'infinito. Inoltre, non mi piacciono le soluzioni di altezza/larghezza codificate.

Quindi, se stai facendo questo in modale, combinare this solution con un evento di ridimensionamento della finestra.

// from link 
$('#ChartModal').on('show.bs.modal', function() { 
    $('.chart-container').css('visibility', 'hidden'); 
}); 

$('#ChartModal').on('shown.bs.modal.', function() { 
    $('.chart-container').css('visibility', 'initial'); 
    $('#chartbox').highcharts().reflow() 
    //added 
    ratio = $('.chart-container').width()/$('.chart-container').height(); 
}); 

Dove "ratio" diventa un rapporto di aspetto altezza/larghezza, che verrà ridimensionata quando il modal bootstrap ridimensiona. Questa misurazione viene eseguita solo quando viene aperto il modale. Sto memorizzando il rapporto come globale ma probabilmente non è la migliore pratica.

$(window).on('resize', function() { 
    //chart-container is only visible when the modal is visible. 
    if ($('.chart-container').is(':visible')) { 
     $('#chartbox').highcharts().setSize( 
      $('.chart-container').width(), 
      ($('.chart-container').width()/ratio), 
      doAnimation = true); 
    }  
}); 

Quindi, con questo, è possibile trascinare lo schermo di lato (ridimensionamento) e il grafico manterrà le proporzioni.

Widescreen

vs piccolo

(ancora trafficando con le unità di VW, quindi tutto nella parte posteriore è troppo piccola per leggere lol!)