Uso de Flot con Bootstrap: ¿incompatibilidad IE8?

Estoy tratando de usar Flot en un proyecto Bootstrap. Estoy descubriendo que en IE8, el gráfico de Flot es invisible, y reduje el problema al HTML5 shim utilizado por Bootstrap.Uso de Flot con Bootstrap: ¿incompatibilidad IE8?

Aquí está la página completa: es la basic Flot example más la cuña HTML5, y la gráfica es invisible en IE8 (está bien en Chrome).

Si elimino la línea de corrección HTML5, el gráfico está bien en IE8. Sin embargo, necesito el ajuste HTML5 para que los estilos de Bootstrap funcionen (cuando agrego Bootstrap de nuevo - he eliminado las referencias a este propósito) - si no está ahí, los estilos de Bootstrap se vuelven complicados.

¿Qué puedo hacer?

<!DOCTYPE html><html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Flot Examples</title> 
    <!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/scripts/plugins/excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script> 
    <script language="javascript" type="text/javascript" src="/scripts/plugins/jquery.flot.js"></script> 
</head> 
<body> 
<div id="placeholder" style="width:100%;height:300px;"></div> 
<script type="text/javascript"> 
$(function() { 
    var d1 = []; 
    for (var i = 0; i < 14; i += 0.5) 
     d1.push([i, Math.sin(i)]); 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; 
    $.plot($("#placeholder"), [ d1, d2, d3 ]); 
}); 
</script> 
</body> 
</html>

Fuente

2012-04-18 Richard

El gráfico aparece bien para mí en IE7 y 8, aunque no sé qué shim está incluido en el bootstrap. ¿Puedes publicar una demostración con la cuña y el programa de arranque incluido para echar un vistazo? –

html5shim y excanvas hacen lo mismo, supongo? excanvas emula elementos de lienzo html5 y html5shim hace alguna otra magia que no soy muy clara. En resumen, querrá decirle a html5shim que lo detenga cuando se trata de IE < 9 y elementos de lienzo. Busqué un poco en el source y encontré esta información.

El objeto html5 está expuesta de manera que más elementos pueden ser shived y shiving existente pueden ser detectados en iframes.
las opciones se pueden cambiar antes de que el script sea incluido html5 = {'elementos': 'marcar sección', 'shivCSS': falso, 'shivMethods': falso};

Poco después de que se enumeran todos los elementos que serán "Shiv" d, por lo que se me ocurrió esto como una solución:

<!--[if lt IE 9]> 
    <script type="text/javascript"> 
    var html5 = { 'elements': 'abbr article aside audio bdi data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video' }; 
    </script> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

La lista gigante en elementos Saqué de la fuente como bueno, solo eliminando canvas.

Aparte de eso, utilicé todo su ejemplo y parecía funcionar bien.

Fuente

2012-04-18 16:04:06 Ryley

¡Eso es absolutamente fantástico, gracias! – Richard

Gracias Richard & Ryley ... Tuve el mismo problema y esto me ahorró mucho tiempo de depuración, sospecho. – randlet

Te mereces una cerveza por esta respuesta, terminas un día de depuración loca :) –

También he tenido un problema con bootstrap y flot en ie8, pero no pude identificarme por completo con la pregunta del OP. Aunque lo que resolvió el problema para mí es casi lo mismo que la respuesta de Ryley, me tomó una hora entender lo que tenía que hacer para que funcionara.

solución simple:

Download excanvas.js (Si no está en su paquete Flot.)
Añadir conditional comment antes de cargar todos los demás archivos Javascript en su etiqueta de la cabeza:

Bastante simple, pero: Me metí en esta pista al depurar javascript en IE, con el "error de interrupción" activado. Eso me dio el siguiente mensaje de error: 'window.G_vmlCanvasManager' is null or not an object. Google que me lleva a excanvas.js. Y pronto, flot.js de repente funcionó. No sé si esto tiene algo que ver con HTML5shim, pero funciona ... y es más simple que la respuesta que Ryley propone.

Fuente

2012-11-26 13:40:22

Uso de Flot con Bootstrap: ¿incompatibilidad IE8?

Respuesta

Cuestiones relacionadas