Utilizzo di Flot con Bootstrap: incompatibilità IE8?

Sto tentando di utilizzare Flot in un progetto Bootstrap. Sto trovando che in IE8, il grafico Flot è invisibile, e ho ridotto il problema al HTML5 shim utilizzato da Bootstrap.Utilizzo di Flot con Bootstrap: incompatibilità IE8?

Ecco la pagina per intero: è lo basic Flot example più lo shim HTML5 e il grafico è invisibile in IE8 (va bene in Chrome).

Se rimuovo la linea di shim HTML5, il grafico va bene in IE8. Tuttavia, ho bisogno dello shim HTML5 per far funzionare gli stili Bootstrap (quando aggiungo di nuovo Bootstrap - ho rimosso i riferimenti ad esso per gli scopi di questo esempio) - se non c'è, gli stili di Bootstrap diventano complicati.

Cosa posso fare?

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

fonte

2012-04-18 Richard

Il grafico risulta ok per me in IE7 e 8, anche se non so quale shim è incluso nel bootstrap. Puoi pubblicare una demo con lo shim e il bootstrap incluso per dare un'occhiata? –

html5shim ed ed excanvas in qualche modo fanno la stessa cosa che sto indovinando? excanvas emula gli elementi canvas html5 e html5shim fa qualche altra magia su cui non sono troppo chiaro. In breve, dovrai dire a html5shim di eliminarlo quando si tratta di IE < 9 e di elementi canvas. Ho scavato un po 'nel source e ho trovato questa informazione.

L'oggetto html5 è esposto in modo che più elementi possono essere shived e shiving esistenti possono essere rilevati su iframe.
le opzioni possono essere modificate prima dello script incluso html5 = {'elements': 'mark section', 'shivCSS': false, 'shivMethods': false};

Subito dopo vengono elencati tutti gli elementi che saranno "Shiv" d, così mi si avvicinò con questo come una soluzione:

<!--[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 di elementi presi dalla sorgente come bene, solo rimuovendo canvas.

Oltre a ciò, ho utilizzato tutto il tuo esempio e sembrava funzionare correttamente.

fonte

2012-04-18 16:04:06 Ryley

Questo è assolutamente fantastico, grazie! – Richard

Grazie Richard & Ryley ... Ho avuto lo stesso problema e questo mi ha risparmiato un sacco di tempo di debug sospetto! – randlet

Ti meriti una birra per questa risposta, hai finito un giorno di pazzesco debugging :) –

Ho anche incontrato un problema con bootstrap e flot in ie8, ma non sono riuscito a identificarmi completamente con la domanda dell'OP. Anche se ciò che ha risolto il problema per me è lo stesso della risposta di Ryley, mi ci è voluta un'ora per capire cosa dovevo fare per farlo funzionare.

soluzione semplice:

Download excanvas.js (Se non è nel vostro pacchetto flot.)
Aggiungi conditional comment prima di caricare tutti gli altri file javascript nel tag head:

Abbastanza semplice, ma: Ho ottenuto su questa pista eseguendo il debug di javascript in IE, con "break on error" attivato. Mi è arrivato il seguente messaggio di errore: 'window.G_vmlCanvasManager' is null or not an object. Googling che mi porta a excanvas.js. E pronto, flot.js ha improvvisamente funzionato. Non so se questo ha qualcosa a che fare con HTML5shim, ma funziona ... ed è più semplice della risposta che Ryley propone.

fonte

2012-11-26 13:40:22

Utilizzo di Flot con Bootstrap: incompatibilità IE8?

risposta

Problemi correlati