Flot:当试图在页面加载时绘制图形时，会弹出一个奇怪的错误

Flot: Weird error pops up when attempting to draw graph on page load?

本文关键字：错误 一个 图形 绘制 加载 Flot      更新时间：2023-09-26

图形没有绘制，控制台抛出以下消息：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不同，我使用该函数绘制多个图——然而，当我为每个placeholderdiv创建单独的函数时，并没有发生这种情况。

  • 从控制台调用绘图功能，即visc_graph(2,3,'#placeholder');似乎工作正常：（

我已经为此挣扎了一段时间，因为我无法诊断这是什么真正的原因。任何关于我如何解决这一问题的意见都将不胜感激。

更新：

  • 以下是设法捕获相同错误的DOM的Fiddle

当Flot无法确定占位符div的大小时，就会出现此错误。这种情况可能有多种方式，但通常意味着在占位符进入DOM之前调用了$.plot。

正如@Mark所建议的，如果在文档准备好之前调用$.plot，这种情况可能会发生，但也可能以其他方式发生。您的绘图是否保存在选项卡、手风琴、对话框或任何其他内容在页面加载时隐藏的小部件中？如果是这样，那么很可能是通过将内容div排除在DOM之外来实现的，这意味着绘图占位符也在DOM之外，无法测量。

出现这个错误的原因真的没有其他原因，所以如果你仍然没有发现问题，你需要发布更多的代码，特别是DOM部分，这样我们才能了解发生了什么。

我昨晚也遇到了同样的问题，我解决这个问题的方法是使用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大小后，它开始工作。

我希望这对你有帮助。

相关文章：