javascript - Error de redimensionamiento del gráfico de Flotante, altura no válida

css resize

Question

Estoy tratando de agregar flot graph a mi página, y estoy teniendo algunos problemas para agregar el tamaño al gráfico. Para que el tamaño del complemento para cambiar el tamaño y la altura del lugar, el separador de posición debe establecerse en 100%. Pero cuando hago eso y quiero cargar el gráfico en una ventana nueva trato de llamar al método de trazado en el doc ready pero la altura de mi div es 0, aunque la altura de div = 600px (¿el divisor de posición debería tener lo mismo? )

 <div id ="ResizableContainer" class="ui-widget-content" style="width:900px;height:600px;">
    <div id="placeholderForGraph" class="graph-placeholder" ></div>
</div>

my.css:

.graph-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

my.js

$("#placeholderForGraph").text('''');
$("#ResizableContainer").show();
$("#placeholderForGraph").plot([data], options);<- error

Error: Dimensiones no válidas para la gráfica, ancho = 900, altura = 0

Si establece la altura antes de llamar a la trama, la gráfica no cambiará de tamaño en altura. ¿Cómo puedo agregar altura a la div sin destruir la capacidad de cambio de tamaño?

¡Gracias por adelantado!

Answer 1

Establezca min-height para su .graph-placeholder en algún valor razonable razonable como .graph-placeholder .

Y también recomendaría establecer valores mínimos y máximos para el contenedor de tamaño variable (ver aquí ).

Answer 2

Toda mi solución es un poco hacky, pero funciona. Primero configuré la altura para que sea igual a los contenedores

 $("#ResizableContainer").show();
    if ($("#placeholderForGraph").height() === 0) {
        $("#placeholderForGraph").css(''min-height'', $("#ResizableContainer").height()); 
    }
    plot = $.plot($("#placeholderForGraph"), []); 

Y luego complete el gráfico con datos y opciones de mi elección y luego cambie el estilo del marcador de posición:

 $("#placeholderForGraph").css(''min-height'', "100px");
 $("#placeholderForGraph").css(''height'', "100%");
 $("#placeholderForGraph").css(''width'', "100%"); 

Muchas gracias a @Raidri por su ayuda :)