Usando Flot con Bootstrap: ¿incompatibilidad con IE8?

Estoy tratando de usar Flot en un proyecto Bootstrap . Estoy descubriendo que en IE8, el gráfico de Flot es invisible, y he reducido el problema al calce HTML5 utilizado por Bootstrap.

Aquí está la página completa: es el ejemplo básico de Flot más la plantilla de HTML5, y el gráfico 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 la versión HTML5 para que funcionen los estilos de Bootstrap (cuando vuelvo a agregar Bootstrap – He eliminado las referencias a los mismos para los fines de este ejemplo) – si no está allí, entonces los estilos de Bootstrap se vuelven locos.

¿Que puedo hacer?

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

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

El objeto html5 se expone de manera que se pueden esquivar más elementos y se puede detectar el shiving existente en los iframes.
las opciones se pueden cambiar antes de incluir el script html5 = {‘elements’: ‘mark section’, ‘shivCSS’: false, ‘shivMethods’: false};

Poco después, enumera todos los elementos que serán “shiv” d, por lo que se me ocurrió esto como una solución:

  

La lista gigante en elementos que saqué de la fuente también, solo quitando canvas .

Aparte de eso, utilicé todo tu ejemplo y pareció funcionar bien.

También me he encontrado con 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 más o menos lo mismo que la respuesta de Ryley, me tomó una hora entender lo que tenía que hacer para que funcionara.

Solución simple:

  1. Descargue excanvas.js (si no está en su paquete flot).
  2. Agregue un comentario condicional antes de cargar todos los demás archivos javascript en la etiqueta principal:

Bastante simple, pero: me metí en esta pista depurando javascript en IE, con “break on error” activado. Eso me dio el siguiente 'window.G_vmlCanvasManager' is null or not an object error: 'window.G_vmlCanvasManager' is null or not an object . Google que me llevan 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.