javascript - Flot:尝试在页面加载时绘制图表时弹出奇怪的错误？

Question

图表未绘制，控制台抛出以下错误:未捕获错误:绘图尺寸无效，宽度 = 1350，高度 = 0 是错误。

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

有关此错误的一些注释:

• 有时，在第一个 x 页面加载时，将绘制图表，然后在抛出该错误后停止。

• 这是完整的错误:

  未捕获错误:绘图尺寸无效，宽度 = 1350，高度 = 0 jquery.flot.js:119

  Canvas.resize jquery.flot.js:119

  Canvas jquery.flot.js:98

  setupCanvases jquery.flot.js:1261

  绘制 jquery.flot.js:674

  $.plot jquery.flot.js:3039

  visc_graph active-scripts.js:45

  (匿名函数)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但是，当我为每个占位符 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 ，则可能会发生这种情况，但也可能以其他方式发生。您的绘图是否保存在选项卡、 Accordion 、对话框或任何其他其内容在页面加载时隐藏的小部件中？如果是这样，这可能是通过将内容 div 保留在 DOM 之外来实现的，这意味着绘图占位符也在 DOM 之外并且无法测量。

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