Question

图表没有绘制，控制台抛出这个：Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0是错误。

我尝试在JSFiddle上重新创建错误但是无法这样做，但是它应该类似于：JSFiddle

关于此错误的一些注意事项：

有时在第一个x页面加载时，将绘制图形，然后在抛出该错误后它将停止。
以下是完整错误：

Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0 jquery.flot.js:119

Canvas.resize jquery.flot.js:119

Canvas jquery.flot.js:98

setupCanvases jquery.flot.js:1261

Plot jquery.flot.js:674

$.plot jquery.flot.js:3039

visc_graph active-scripts.js:45

(anonymous function) active-scripts.js:346

k jquery.min.js:2

l.fireWith jquery.min.js:2

p.extend.ready jquery.min.js:2

D jquery.min.js:2

它似乎从jquery.flot源中抛出：

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

        if (width <= 0 || height <= 0) {
            throw new Error("Invalid dimensions for plot, width = " + width + ", height = " + height);
Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0
        }

编辑：更多信息：与上面链接的JSFiddle不同，我正在使用该函数绘制多个图形 - 类似于this，但是，当我为每个placeholder div创建单独的函数时，这不会发生。
从控制台调用图形功能，即visc_graph(2,3,'#placeholder');似乎工作正常：（

我一直在努力解决这个问题，因为我无法诊断出这个问题的真正原因。关于如何解决这个问题的任何意见都将得到极大的赞赏。

更新：

Here is the Fiddle with the DOM that manages to capture the same error

Answer 1

当Flot无法确定占位符div的大小时，会出现该错误。这可以通过多种方式实现，但通常意味着您在占位符位于DOM之前调用了$.plot。

正如@Mark建议的那样，如果您在文档准备好之前调用$.plot，这可能会发生，但也可能以其他方式发生。您的图表是否保留在标签，手风琴，对话框或其他内容在页面加载时隐藏的小部件中？如果是这样，那可能是通过将内容div从DOM中删除来实现的，这意味着绘图占位符也在DOM之外并且无法测量。

实际上没有其他原因会出现此错误，因此如果您仍然没有看到问题，则需要发布更多代码 - 特别是DOM部分 - 以便我们了解正在发生的事情。

Answer 2

我昨晚有同样的问题，我为解决这个问题所做的是使用css设置占位符div大小：

<style type="text/css">
   #placeholder{
      width:100%;
      height:200px;
  }
</style>

<div id="content" class="demo-container">
   <div id="placeholder" class="demo-placeholder"></div>
</div>

设置div大小后，它开始工作。

我希望这会对你有所帮助。

Flot：尝试在页面加载时绘制图形时会弹出奇怪的错误？

2 个答案: