{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 贪生不怕死 的问题《Using Flot with Bootstrap: IE8 incompatibility?》','https://www.manongdao.com/q-646870.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to use Flot in a Bootstrap project. I am finding that in IE8, the Flot graph is invisible, and I've narrowed the problem down to the HTML5 shim used by Bootstrap.
Here is the page in full: it's the basic Flot example plus the HTML5 shim, and the graph is invisible in IE8 (it's fine in Chrome).
If I remove the HTML5 shim line, the graph is fine in IE8. However, I need the HTML5 shim for Bootstrap styles to work (when I add Bootstrap back in - I've removed references to it for the purposes of this example) - if it's not there then the Bootstrap styles go screwy.
What can I do?
<!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>
I've also run into a problem with bootstrap and flot in ie8, but couldn't entirely identify with the OP's question. Even though what resolved the problem for me is about the same as Ryley's answer, it took me an hour to understand what I needed to do to make it work.
Simple Solution:
<!--[if IE 8]> <script src="@Url.Content("~/Scripts/canvas/excanvas.min.js")" type="text/javascript"></script> <[endif]-->Quite simple, but: I got on this track by debugging javascript in IE, with "break on error" activated. That got me the following error msg:
'window.G_vmlCanvasManager' is null or not an object. Googling that lead me to excanvas.js. And pronto, flot.js suddenly worked. I don't know if this has anything to do with HTML5shim, but it works... and is simpler than the answer Ryley proposes.html5shim and and excanvas somewhat do the same thing I'm guessing? excanvas emulates html5 canvas elements and html5shim does some other magic that I'm not too clear on. In short, you'll want to tell html5shim to knock it off when it comes to IE<9 and canvas elements. I dug around in the source a bit and found this information.
Soon after it lists all the elements that will be "shiv"d, so I came up with this as a solution:
The giant list in elements I took out of the source as well, only removing
canvas.Apart from that, I used all of your example and it seemed to work fine.