jquery - name - Cambiar el tamaño de altura con Highcharts

set series highcharts

Question

Tengo un Highchart que cambia el ancho de ancho cuando la ventana cambia de tamaño. Pero no la altura. Intenté este tamaño de gráfico establecido, pero no está funcionando correctamente. ¿Hay alguna otra forma de cambiar automáticamente la altura cuando el tamaño de cambio de ventana?

Este es mi código CSS para la salida. Tengo una pestaña de IU de Jquery, la otra pestaña muestra la tabla de datos

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

Este es mi css para el chartdiv:

#chartContainer{
margin: auto;
}

Y esta es la función de Js Chart:

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

De acuerdo con la Referencia de API:

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

Entonces, puedes controlar su height acuerdo con el div principal usando el evento redraw , que se llama cuando cambia su tamaño.

Referencias

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

Answer 2

Debe establecer la altura del contenedor explícitamente

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

Ver otra respuesta

documentación de Highcharts

Answer 3

Sin embargo, la respuesta de Ricardo es correcta: a veces puede encontrarse en una situación en la que el contenedor simplemente no cambia de tamaño según lo deseado, ya que la ventana del navegador cambia de tamaño, lo que no permite que los gráficos altos se redimensionen.

Esto siempre funciona:
1. Configure un detector de eventos de cambio de tiempo programado y enrutado. Ejemplo con 500ms en jsFiddle
2. use chart.setSize(width, height, doAnimation = true); en su función de cambio de tamaño real para establecer la altura y el ancho de forma dinámica
3. Configure reflow: false en las Highcharts-Options y, por supuesto, establezca height and width explícitamente en la creación. Como haremos nuestro propio manejo de eventos de cambio de tamaño, no hay necesidad de que Highcharts se enganche en otro.

Answer 4

Tuve un problema similar con la altura, excepto que mi gráfico estaba dentro de una ventana emergente modal de arranque, que ya estoy controlando el tamaño de css. Sin embargo, por alguna razón, cuando la ventana cambiaba de tamaño horizontalmente, la altura del contenedor del gráfico se expandiría indefinidamente. Si tuviera que arrastrar la ventana hacia adelante y hacia atrás, se expandiría verticalmente indefinidamente. Tampoco me gustan las soluciones de altura / ancho codificadas.

Entonces, si está haciendo esto en un modal, combine esta solución con un evento de cambio de tamaño de la ventana.

// 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();
});

Donde "proporción" se convierte en una relación de aspecto altura / ancho, eso cambiará de tamaño cuando cambie la modalidad de arranque. Esta medida solo se toma cuando se abre el modal. Estoy almacenando la proporción como global, pero probablemente no sea la mejor práctica.

$(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 );
    }       
});

Así que con esto, puede arrastrar su pantalla hacia un lado (redimensionándola) y su gráfico mantendrá su relación de aspecto.

Pantalla ancha

vs menor

(Todavía jugueteando con unidades vw, así que todo en la parte posterior es demasiado pequeño para leer jajaja!)