HighCharts: ¿cómo tener un gráfico con altura dinámica?

Question

Quiero tener un gráfico que se tamaño con la ventana del navegador, pero el problema es que la altura se soluciona a 400px. Este ejemplo de jsfiddle tiene el mismo problema.

¿Cómo puedo hacer eso? Intenté usar el controlador de eventos Chart.Events.Redraw para cambiar el tamaño de la tabla (usando .setsize), pero supongo que comienza un bucle interminable (controlador de eventos de fuego, que llama a SetSize, que dispara otro controlador de eventos, etc.).

Answer 1

Simplemente no establezca la propiedad de altura en Highcharts y la manejará dinámicamente para usted siempre que establezca una altura en el elemento que contiene la tabla. Puede ser un número fijo o un porcentaje si la posición es absoluta.

Docios de HighCharts:

Por defecto, la altura se calcula a partir de la altura de desplazamiento del elemento que contiene

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

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

Answer 2

¿Qué pasa si enganchó el evento de cambio de tamaño de la ventana?

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

Ver ejemplo de violín aquí.

Referencia de API de HighCharts: setSize ().

Answer 3

Eliminar la altura solucionará su problema porque HighChart responde por diseño si ajusta su pantalla también volverá a tamaño.

Answer 4

Alternativamente, puede usar directamente la ventana de JavaScript.

Como ejemplo, mi código (usando scriptaculos) es:

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

Donde el formulario es un formulario HTML en mi página web y GFX los gráficos HighChart.

Answer 5

Otra buena opción es pasar una referencia de Renderto HTML. Si es una cadena, se usa el elemento por esa ID. De lo contrario, puede hacer:

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

o con jQuery:

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

Se puede encontrar más información aquí:https://api.highcharts.com/highstock/chart.renderto

Answer 6

Al usar porcentaje, la altura en relación con el ancho y cambiará dinámicamente junto con él:

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

JSFIDDLE Highcharts con altura porcentual