5

BootstrapプロジェクトでFlotを使用しようとしています。IE8では、Flotグラフが表示されないことがわかり、問題をBootstrapで使用されるHTML5シムに絞り込みました。

これが完全なページです。これは基本的なFlotの例とHTML5シムであり、グラフはIE8では表示されません（Chromeでは問題ありません）。

HTML5のシムラインを削除すると、IE8のグラフは正常になります。ただし、Bootstrapスタイルを機能させるにはHTML5シムが必要です（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」されるすべての要素がリストされた直後に、解決策としてこれを思いつきました。

<!--[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 に答える