在浏览器检查窗口打开或浏览器resize之前，dygraphs div不可见

这困扰了我一个星期，所以我不得不来这么做。 （原谅URL，它是开发服务器）。 http://www.stagestudio.com.ua/shutter_stat/wiev_base.php?cat=34

当我点击照片时，会出现带有折线图的弹出窗口，但实际上线图是不可见的。 只有在调整窗口大小或打开浏览器检查窗口后才能看到它。

我怎样才能解决这个问题？

此方法不起作用 var graph = new Dygraph(document.getElementById("graphPanel"), "temperatures.csv", { animatedZooms: true }); $(document).ready(function () { graph.resize(800, 500) }); var graph = new Dygraph(document.getElementById("graphPanel"), "temperatures.csv", { animatedZooms: true }); $(document).ready(function () { graph.resize(800, 500) });

Answer 1

这是一个不时出现的已知问题 。 如果

不可见，则它没有任何明确定义的高度或宽度。 因此，在其中渲染图表并没有做任何有用的事情（它的高度为零）。 dygraphs无法知道图表

已变得可见。 这实际上是DOM Events API中的一个空白。 谷歌地图等其他图书馆也存在类似问题。

解决方法是：

• 您可以在没有任何参数的情况下调用.resize()以在弹出窗口显示时强制重绘。
• 您可以在弹出窗口时创建图表，而不是在页面加载时创建图表。 这样，图表

  在呈现图表时将具有大小。

• 您可以在dygraphs构造函数中显式指定高度和宽度，也可以在图表

  上显示样式。

Answer 2

  // These will be zero if the dygraph's div is hidden. In that case, // use the user-specified attributes if present. If not, use zero // and assume the user will call resize to fix things later. this.width_ = div.clientWidth || attrs.width || 440; this.height_ = div.clientHeight || attrs.height ||320;