30

円グラフのプロットにフロット円グラフを使用しています。しかし、それはファイアバグのエラーを示しています

キャッチされない例外：プロットの寸法が無効、幅= null、高さ= null

スタイルシートからも高さと幅を指定しました。このようにもやってみました

<div id="placeholder1" style="width:140px;height:140px" ></div>

これを解決する方法は？

4

7 に答える 7

41

これらを確認してください：

  • 最初にjQueryライブラリを含めてから、jsライブラリをフロートします

  • コード全体を$(document).ready()ハンドラー関数内にラップします。

  • flot を correctidでバインドすると、 same の繰り返しはありませんid。

  • あなたdivが動的である場合、つまりページの読み込み後にDOMに表示された場合plot()、要素がDOMに表示された後にバインドします。

于 2012-09-11T09:27:31.410 に答える
14

私も同じ問題を抱えていました。タグに高さと幅を設定すると<div>、エラーが修正されました。

インライン css (私が行ったように) または JS を使用して、高さと幅を設定できます。ただし、plot()関数は高さを設定した後にのみ呼び出す必要があります<div>

<div class="bars_two" style="height:300px;"></div>
于 2014-05-29T09:05:45.107 に答える
10

私もこれと同じ問題を抱えていました！答えは上にリストされていなかったので、ここに私の問題と解決策があります。

<div id="chart" class="chart" style="width:100%;height:250px;"></div>

Javascript:

 <script type="text/javascript">
    $(document).ready(function () {
        var data = [...];
        var options = {...};
        $.plot($("#placeholder"), data, options);
    });
</script>

そう。プロット関数に注目してください。最初は、最初のパラメーターに # がありませんでした。それは明らかに必要です。それは私の問題を解決しました。

GG。

于 2015-04-30T13:59:29.730 に答える
3

「display: none」クラスが指定された div にチャート html を配置すると、このエラーが発生します。「jquery.flot.js」がロードされたときに「display:block」クラスが与えられるdivにチャートhtmlを配置する必要があります。

<div id="pie_chart" class="chart"> </div>

このhtmlが、class="display: none"「jquery.flot.js」がロードされたときにあるdivにある場合は、次のように変更しますdisplay: block

于 2014-04-13T15:54:16.917 に答える
1

そのため、チャートにレンダリングする前に、DOM 要素を再取得する必要があるようです。flot は要素を操作して独自の要素を挿入するため、要素を独自の要素に置き換えているように見えます。

レンダリングで、次のことを行います。

$.plot($(".myChartId || #myChartClass"), myData, myOptions);

これは にあることとは関係ありませんが$(document).ready()、この中に配置することをお勧めします。

お役に立てれば！

于 2015-12-10T18:22:11.890 に答える