30

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

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

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

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

如何解决这个问题？

4

7 回答 7

41

检查这些：

  • 您首先包含 jQuery 库，然后包含 flot js 库

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

  • 您将 flot 与正确绑定，id并且没有相同的重复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 回答
7

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

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

于 2013-08-31T02:39:07.403 回答
3

如果你把你的图表 html 放在给出“显示：无”类的 div 中，你会得到这个错误。您必须将图表 html 放在 div 中，当加载“jquery.flot.js”时，该 div 会给出“display:block”类。

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

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

于 2014-04-13T15:54:16.917 回答
2

我在将模板集成到导轨时遇到了同样的问题。这是一个不好的方法，但我只是注释引发异常的行并添加 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 
}
于 2014-04-10T12:20:43.723 回答
1

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

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

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

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

希望这可以帮助！

于 2015-12-10T18:22:11.890 回答