Verwenden von Flot mit Bootstrap: IE8 Inkompatibilität?

Ich versuche Flot in einem Bootstrap Projekt zu verwenden. Ich finde, dass in IE8 das Flot-Diagramm unsichtbar ist, und ich habe das Problem auf die von Bootstrap verwendete HTML5 shim eingegrenzt.Verwenden von Flot mit Bootstrap: IE8 Inkompatibilität?

Hier ist die Seite in voller Länge: es ist die plus die HTML5-Shim, und die Grafik ist unsichtbar in IE8 (es ist in Ordnung in Chrome).

Wenn ich die HTML5-Shim-Linie entfernen, ist das Diagramm in IE8 in Ordnung. Allerdings brauche ich das HTML5-Shim für Bootstrap-Stile zu funktionieren (wenn ich Bootstrap wieder einfügen - ich habe Referenzen für die Zwecke dieses Beispiels entfernt) - wenn es nicht da ist, dann gehen die Bootstrap-Stile verschraubt.

Was kann ich tun?

<!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>

Quelle

2012-04-18 Richard

Die Grafik kommt für mich in IE7 und 8 in Ordnung, obwohl ich nicht weiß, welche Shim im Bootstrap enthalten ist. Kannst du eine Demo mit dem Shim und dem mitgelieferten Bootstrap posten, um einen Blick darauf zu werfen? –

html5shim und und excanvas etwas tun das gleiche, was ich vermute, ich? excanvas emuliert html5-canvas-elemente und html5shim macht noch eine andere magie, auf die ich nicht so klar bin. Kurz gesagt, Sie möchten html5shim sagen, um es abzuschlagen, wenn es um IE 912 und Canvas-Elemente geht. Ich habe ein wenig in der source gegraben und diese Information gefunden.

Die html5 Objekt ausgesetzt ist, so dass mehrere Elemente shived werden kann und bestehenden shiving kann auf iframes detektiert werden.
Optionen können geändert werden, bevor das Skript enthalten ist html5 = {'elements': 'mark section', 'shivCSS': false, 'shivMethods': false};

Bald nachdem es alle Elemente aufgelistet, die „shiv“ d wird, so kam ich mit diesem als Lösung:

<!--[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]-->

Die riesige Liste in Elemente, die ich aus der Quelle nahm als Nun, nur entfernen canvas.

Abgesehen davon habe ich all dein Beispiel benutzt und es schien gut zu funktionieren.

Quelle

2012-04-18 16:04:06 Ryley

Das ist absolut fantastisch, danke! – Richard

Danke Richard & Ryley ... Ich hatte das gleiche Problem und das hat mir eine Menge Zeit für das Debugging erspart, vermute ich! – randlet

Sie verdienen ein Bier für diese Antwort, Sie beenden einen Tag des verrückten Debugging :) –

Ich habe auch ein Problem mit Bootstrap und Flot in ie8, aber konnte nicht vollständig mit der Frage des OP identifizieren. Obwohl das, was das Problem für mich gelöst hat, ungefähr dasselbe ist wie die Antwort von Ryley, brauchte ich eine Stunde, um zu verstehen, was ich tun musste, damit es funktionierte.

Einfache Lösung:

Download excanvas.js (Wenn es nicht in Ihrem flicht Paket ist.)
conditional comment hinzufügen, bevor ich alle anderen JavaScript-Dateien im Tag-Kopf laden:

Ganz einfach, aber: Ich kam auf diese Spur durch Debuggen von Javascript in IE, mit "Break on Error" aktiviert. Das hat mir den folgenden Fehler msg: 'window.G_vmlCanvasManager' is null or not an object. Googeln, die mich zu excanvas.js führen. Und pronto, flot.js funktionierte plötzlich. Ich weiß nicht, ob das etwas mit HTML5shim zu tun hat, aber es funktioniert ... und ist einfacher als die Antwort, die Ryley vorschlägt.

Quelle

2012-11-26 13:40:22

Verwenden von Flot mit Bootstrap: IE8 Inkompatibilität?

Antwort

Verwandte Themen