javascript - and - highcharts yaxis line

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

Question

Quiero tener un cuadro que cambie de tamaño con la ventana del navegador, pero el problema es que la altura se fija en 400px. Este ejemplo de JSFiddle tiene el mismo problema.

¿Cómo puedo hacer eso? Intenté utilizar el controlador de eventos chart.events.redraw para cambiar el tamaño del gráfico (usando .setSize), pero supongo que comienza un ciclo interminable (controlador de eventos de incendios, que llama a setSize, que activa otro controlador de eventos, etc.).

Answer 1

¿Qué sucede si conectaste el evento de redimensionamiento de la ventana?

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

Ver ejemplo violín aquí .

Referencia de Highcharts API: setSize () .

Answer 2

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 del gráfico superior.

Answer 3

Eliminar la altura solucionará su problema porque Highchart responde por diseño si ajusta su pantalla también se volverá a clasificar según el tamaño.

Answer 4

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

Documentos de Highcharts :

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

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

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