5

我正在尝试在Bootstrap项目中使用Flot 。我发现在 IE8 中，Flot 图是不可见的，我已将问题缩小到Bootstrap 使用的HTML5 shim 。

这是完整的页面：它是基本的 Flot 示例加上 HTML5 shim，图表在 IE8 中是不可见的（在 Chrome 中很好）。

如果我删除 HTML5 垫片线，则该图在 IE8 中很好。但是，我需要 HTML5 shim 才能使 Bootstrap 样式正常工作（当我重新添加 Bootstrap 时——出于本示例的目的，我已经删除了对它的引用）——如果它不存在，那么 Bootstrap 样式就会变得混乱。

我能做些什么？

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

2 回答 2

7

html5shim 和 excanvas 在某种程度上做同样的事情我猜？excanvas 模拟 html5 画布元素，而 html5shim 还做了一些我不太清楚的其他魔法。简而言之，当涉及到 IE<9 和 canvas 元素时，您需要告诉 html5shim 将其关闭。我在源代码中挖掘了一下，发现了这个信息。

该html5对象被暴露，以便更多的元素可以被滑动，并且可以在 iframe 上检测到现有的滑动。
可以在包含脚本之前更改选项 html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };

不久之后，它列出了所有将被“shiv”d 的元素，所以我想出了这个作为解决方案：

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

我也从源代码中取出了巨大的元素列表，只删除了canvas.

除此之外，我使用了你所有的例子，它似乎工作正常。

于 2012-04-18T16:04:06.067 回答
1

我在ie8中也遇到了bootstrap和flot的问题，但不能完全认同OP的问题。尽管对我来说解决问题的方法与 Ryley 的答案大致相同，但我花了一个小时才明白我需要做什么才能使其正常工作。

简单的解决方案：

  1. 下载 excanvas.js（如果它不在你的 flot 包中。）
  2. 在我在 head 标记中加载所有其他 javascript 文件之前添加条件注释：<!--[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.

于 2012-11-26T13:40:22.767 回答