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

Quiero tener un gráfico que cambie de tamaño con la ventana del navegador, pero el problema es que la altura se fija en 400px. This JSFiddle example tiene el mismo problema.Highcharts: ¿cómo tener un gráfico con altura dinámica?

¿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.).

Fuente

2012-01-10 duality_

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.

Highcharts docs:

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

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

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

Fuente

2013-11-01 17:08:27 tybro0103

¿Alguna idea de cómo hacer esto con un gráfico de barras? no funciona. Vea la demostración: http://jsfiddle.net/a40a0bjy/ –

@Hanoncs su regla de CSS tenía una identificación incorrecta. http://jsfiddle.net/a40a0bjy/3/ – tybro0103

Me di cuenta de que gracias. Lo que realmente estoy tratando de hacer es hacer que la tabla crezca ya que tiene datos. Con mt demo, si tengo una barra, la expande a una barra enorme y si tengo 100 barras, todas quedan aplastadas juntas. Quiero hacer que la página crezca y mantener el relleno entre cada barra. aquí está mi pregunta sin respuesta aún. http://stackoverflow.com/questions/30868963/highcharts-bar-chart-auto-height –

¿Qué pasa si te engancha el evento de cambio de tamaño de ventana:

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

Ver ejemplo violín here.

Referencia de la API de Highcharts: setSize().

Fuente

2012-01-11 01:56:12 Mark

supongo que esto funciona, pero falla por el ancho del gráfico si es diferente al 100%. Vea este violín cambiado: http://jsfiddle.net/DdtsD/ –

@duality_, funciona para el ancho si configura la opción de reflujo del gráfico en falso. Vea aquí: http://jsfiddle.net/6MnFA/ – Mark

Eso es todo, gracias. –

Alternativamente, se puede utilizar directamente window.onresize de JavaScript

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

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

donde la forma es un formulario HTML en mi página web y los gráficos GFX highchart .

Fuente

2013-06-15 22:34:56 destroyedlolo

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

Fuente

2013-09-13 04:30:48 RAM

Solo en carga inicial, no responderá. – user959690

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

Respuesta

Cuestiones relacionadas