dygraphs div在浏览器检查窗口打开或浏览器调整大小

Question

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

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

我该如何解决这个问题？

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

Answer 1

这是known issue comes up，不时this。如果<div>不可见，则它没有任何明确定义的高度或宽度。因此，在其中渲染图表并没有做任何有用的事情（它的高度为零）。 dygraphs无法知道图表<div>已变得可见。这实际上是DOM Events API中的一个缺口。谷歌地图等其他图书馆也有类似的问题。

解决方法是：

• 您可以在没有任何参数的情况下调用.resize()以在弹出窗口显示时强制重绘。
• 您可以在弹出窗口时创建图表，而不是在页面加载时创建图表。这样，图表<div>在呈现图表时将具有大小。
• 您可以在dygraphs构造函数中明确指定高度和宽度，也可以在图表<div>上显示样式。

Answer 2

width:100%; overflow:auto;