jQuery Flot 饼图在萤火虫中出现错误：“未捕获的异常：绘图尺寸无效，宽度 = 空，高度 = 空”

Flot pie chart gives error in firebug: "uncaught exception: Invalid dimensions for plot, width = null, height = null"

提问by user1662343

I using flotpie chart for plotting pie charts. but it shows error in firebug that

我使用浮动饼图绘制饼图。但它在萤火虫中显示错误

uncaught exception: Invalid dimensions for plot, width = null, height = null

未捕获的异常：绘图尺寸无效，宽度 = 空，高度 = 空

I have given the height and width from stylesheet also. and tried also like this

我也从样式表中给出了高度和宽度。并尝试过这样

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

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

how to resolve this?

如何解决这个问题？

回答by thecodeparadox

Check these:

检查这些：

• You include the jQuery library first and then flot js library

• Wrap the whole code within $(document).ready()handler function.

• you bind the flot with correct idand there is no repeat of same id.

• if your divis dynamic i.e. appeared to DOM after page load then bind plot()after the element appeared to DOM.

• 您先包含 jQuery 库，然后再包含 Flot js 库

• 将整个代码包装在$(document).ready()处理程序函数中。

• 你绑定了正确的浮标id并且没有相同的重复id。

• 如果您div是动态的，即在页面加载后出现在 DOM 中，则plot()在元素出现在 DOM 后进行绑定。

回答by John Fonseka

I also had the same problem. I set a height and a width to the <div>tag and it fixed the error.

我也有同样的问题。我为<div>标签设置了高度和宽度，并修复了错误。

You can use either inline css (as I did) or JS to set the height and the width. But plot()function should be called only after we set the height of the <div>

您可以使用内联 css（就像我一样）或 JS 来设置高度和宽度。但是plot()只有在我们设置了高度后才应该调用函数<div>

<div class="bars_two" style="height:300px;"></div>

回答by Millar248

I had this same problem too! The answer was not listed above, so here was my problem and solution.

我也有同样的问题！上面没有列出答案，所以这是我的问题和解决方案。

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

Javascript:

Javascript：

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

So. Notice the plot function. At first, I didn't have the # in the first parameter. That is necessary apparently. It solved my problems.

所以。注意 plot 函数。起初，我在第一个参数中没有#。这显然是必要的。它解决了我的问题。

GG.

GG。

回答by hexicle

A quick solution I found is to just type something between the div tags. For example: Change <div id="placeholder"></div>to <div id="placeholder">.</div>or <div id="placeholder">randomtext</div>.

我找到的一个快速解决方案是在 div 标签之间输入一些内容。例如：更改 <div id="placeholder"></div>为 <div id="placeholder">.</div>或<div id="placeholder">randomtext</div>。

Personally, I found that using space/tabs/newlines doesn't work in this quick solution.

就我个人而言，我发现在这个快速解决方案中使用空格/制表符/换行符不起作用。

回答by kpblc

I had the same problem integrating template to rails. That's a bad way, but I just comment the line which throws the exception and add 2 lines to set width and height to 0 - it helped me.

我在将模板集成到 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 
}

回答by Hubeyb ?zkul

If you put your chart html in div which is given "display: none" class you will get this error. You must put your chart html in div which is given "display:block" class when "jquery.flot.js" is loaded.

如果您将图表 html 放在 div 中，该 div 给出了“显示：无”类，您将收到此错误。您必须将图表 html 放在 div 中，该 div 会在加载“jquery.flot.js”时提供“display:block”类。

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

if this html is in any div which has class="display: none"when "jquery.flot.js" is loaded, change it to display: block

如果此 html 位于class="display: none"加载“jquery.flot.js”时具有的任何 div 中，请将其更改为display: block

回答by Brian Corbin

So, it seems that before you render to a chart, you need to re-fetch the DOM element. Since flot manipulates the elements and inserts its own, it looks like it's replacing the element with its own elements.

因此，似乎在渲染到图表之前，您需要重新获取 DOM 元素。由于 flot 操作元素并插入自己的元素，因此看起来它正在用自己的元素替换元素。

In your render, do:

在您的渲染中，执行以下操作：

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

This has nothing to do with being in $(document).ready(), although it is good practice to place it inside of this.

这与 in 无关$(document).ready()，尽管将它放在 this 中是一种很好的做法。

Hope this helps!

希望这可以帮助！