Flot gráfico no se representa cuando el contenedor primario está oculto

Estaba teniendo un problema donde un gráfico de flot no se representaría en una interfaz con pestañas porque los divs de marcador de posición eran hijos de divs con 'display: none'. Los ejes se mostrarán, pero no el contenido gráfico.Flot gráfico no se representa cuando el contenedor primario está oculto

Escribí la función javascript a continuación como un contenedor para la función de trazado para resolver este problema. Puede ser útil para otros que hacen algo similar.

function safePlot(placeholderDiv, data, options){ 

    // Move the graph place holder to the hidden loader 
    // div to render 
    var parentContainer = placeholderDiv.parent(); 
    $('#graphLoaderDiv').append(placeholderDiv); 

    // Render the graph 
    $.plot(placeholderDiv, data, options); 

    // Move the graph back to it's original parent 
    // container 
    parentContainer.append(placeholderDiv); 
}

Aquí es el CSS para el div cargador gráfico que se puede colocar en cualquier lugar en la página.

#graphLoaderDiv{ 
    visibility: hidden; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 500px; 
    height: 150px; 
}

Fuente

2011-03-25 beauburrier

Éste es un FAQ:

Su #graphLoaderDiv debe tener una anchura y altura, y por desgracia, divs invisibles no los tienen. En cambio, hazlo visible, pero establece su izquierda en -10000px. Luego, una vez que esté listo para mostrarlo, simplemente configure su izquierda a 0px (o lo que sea).

Fuente

2011-03-25 15:36:30 Ryley

Divs con visibilidad: oculto realmente tiene dimensiones, es divs con pantalla: ninguno que no lo haga. – beauburrier

si es un elemento secundario de un elemento 'display: none' div, entonces no lo haría? – Ryley

Derecha, hijos de una pantalla: ninguna div no tendrá las dimensiones disponibles para que Flot la use para renderizar la gráfica, en IE con seguridad. Ese es el problema que se utiliza para resolver este div de carga invisible porque se coloca en un nivel superior fuera de cualquier divisor de contenedor. – beauburrier

OK, entiendo mejor ahora lo que dices ... Todavía creo que tu respuesta es demasiado complicada. Acabo de probar esto usando una interfaz con pestañas donde el gráfico está en una pestaña oculta cuando está cargado. Parece funcionarme bien.

http://jsfiddle.net/ryleyb/dB8UZ/

yo no tenía el bit visibility:hidden allí, pero no parece necesario ...

También podría tener visibility:hidden set y luego cambiar el código de pestañas para algo como esto :

$('#tabs').tabs({ 
    show: function(e,ui){ 
    if (ui.index != 2) { return; } 
    $('#graphLoaderDiv').css('visibility','visible'); 
    } 
});

Pero dada la información proporcionada, nada de eso parece particularmente necesario.

Fuente

2011-03-26 23:11:01 Ryley

Esto fue principalmente un problema que vi en IE e hizo una solución general para. Si prueba su ejemplo en IE8, probablemente verá el mismo problema. Primero, debería usar excanvas.js para incluso obtener su representación en IE sin embargo. – beauburrier

Parece que funciona bien en IE7/9 para mí una vez que agregue excanvas: http://jsfiddle.net/dB8UZ/1/ – Ryley

Quizás esta es la mejor solución. Puede ser utilizado como una gota en el reemplazo para $.plot():

var fplot = function(e,data,options){ 
    var jqParent, jqHidden; 
    if (e.offsetWidth <=0 || e.offetHeight <=0){ 
    // lets attempt to compensate for an ancestor with display:none 
    jqParent = $(e).parent(); 
    jqHidden = $("<div style='visibility:hidden'></div>"); 
    $('body').append(jqHidden); 
    jqHidden.append(e); 
    } 

    var plot=$.plot(e,data,options); 

    // if we moved it above, lets put it back 
    if (jqParent){ 
    jqParent.append(e); 
    jqHidden.remove(); 
    } 

    return plot; 
};

A continuación, sólo tomar su llamada a $.plot() y el cambio a fplot()

Fuente

2012-11-07 17:43:14 jsd

La única cosa que funciona sin ningún tipo de truco CSS es cargar la trama 1 segundos después de la siguiente manera:

$('#myTab a[href="#tabname"]').on("click", function() { 
    setTimeout(function() { 
     $.plot($(divChartArea), data, options);  
    }, 1000); 
});

o para jQuery mayor

$('#myTab a[href="#tabname"]').click (function() { 
     setTimeout(function() { 
     $.plot($(divChartArea), data, options);  
     }, 1000); 
    });

El ejemplo anterior se aplica a las etiquetas Bootstrap para la función Click. Pero debería funcionar para cualquier div u objeto oculto.

Ejemplo de trabajo: http://topg.org/server-desteria-factions-levels-classes-tokens-id388539 Simplemente haga clic en la pestaña "Jugadores" y verá el ejemplo anterior en acción.

Fuente

2014-09-27 02:40:14

¡Gracias, buenísimo! Siempre es mejor evitar los trucos :) –

Sé que esto es un poco viejo, pero también puedes intentar usar el plugin Resize para Flot.

http://benalman.com/projects/jquery-resize-plugin/

No es perfecta, porque a veces se obtendrá un destello de la gráfica no de tamaño que puede ser reducido.Además, algunos formatos y posicionamientos pueden estar desactivados según el tipo de gráfico que esté utilizando.

Fuente

2016-04-06 23:23:06 slopapa

Flot gráfico no se representa cuando el contenedor primario está oculto

Respuesta

Cuestiones relacionadas