web-dev-qa-db-ja.com

プロット円グラフは、firebugでエラーを返します：「キャッチされない例外：プロットの無効な寸法、幅= null、高さ= null」

flot 円グラフをプロットに使用します。しかし、それはfirebugでエラーを示しています

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

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

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

これを解決するには？

jquerychartspie-chart
28
user1662343

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

  • 最初にjQueryライブラリーを組み込み、次にflot jsライブラリーを組み込みます

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

  • 正しいidでフロットをバインドしますが、同じidの繰り返しはありません。

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

37
thecodeparadox

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

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

_<div class="bars_two" style="height:300px;"></div>
_
13
John Fonseka

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

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

9
Millar248

私が見つけた簡単な解決策は、divタグの間に何かを入力することです。例：<div id="placeholder"></div>を<div id="placeholder">.</div>または<div id="placeholder">randomtext</div>に変更します。

個人的には、スペース/タブ/改行を使用してもこの簡単なソリューションでは機能しないことがわかりました。

7
hexicle

テンプレートをRailsに統合するのと同じ問題がありました。それは悪い方法ですが、例外をスローする行にコメントし、2行を追加して幅と高さを0に設定します-それが助けになりました。

Canvas.prototype.resize = function(width, height) {

  if (width <= 0 || height <= 0) {
    // COMMENTED NEXT LINE
    // throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
    // NEW LINES ADDED
    width = 0;
    height = 0;
  }

  // ... others code 
}
2
kpblc

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

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

「jquery.flot.js」がロードされたときにこのHTMLがclass="display: none"を持つdivにある場合、それをdisplay: blockに変更します

2
Hubeyb Özkul

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

レンダーで、以下を実行します。

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

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

お役に立てれば！

1
Brian Corbin