Question

我使用flot饼图绘制饼图。但它显示了萤火虫中的错误

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

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

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

如何解决这个问题？

Answer 1

检查这些：

首先包含jQuery库，然后包含fls js library
将整个代码包裹在$(document).ready()处理函数中。
您使用正确的id绑定flot，并且不会重复相同的id。
如果您的div是动态的，即在页面加载后出现在DOM中，则在plot()之后绑定{{1}} 该元素出现在DOM中。

Answer 2

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

你可以使用内联css（就像我做的那样）或JS来设置高度和宽度。但是，只有在我们设置plot()

的高度后才能调用<div>函数

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

Answer 3

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

<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

Answer 4

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

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

Answer 5

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

Answer 6

如果您将图表html放在div中，并给出“display：none”类，您将收到此错误。您必须将图表html放在div中，当加载“jquery.flot.js”时，它将被赋予“display：block”类。

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

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

Answer 7

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

在渲染中，执行：

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

这与$(document).ready()中的内容无关，尽管将其置于此内是一种好习惯。

希望这有帮助！

Flot饼图在firebug中给出错误：“未捕获的异常：绘图的尺寸无效，width = null，height = null”

7 个答案: