dygraphs div 在浏览器检查 window 打开或浏览器调整大小之前不可见
dygraphs div not visible until browser Inspection window opened or browser resize
这个困扰了我一个星期，只好来SO了。 （请原谅 URL，这是一个开发服务器）。
http://www.stagestudio.com.ua/shutter_stat/wiev_base.php?cat=34
当我点击照片时，应该会出现带有折线图的弹出窗口，但实际上折线图是不可见的。只有在调整 window 或打开浏览器检查 window.
后才能看到
我该如何解决这个问题？
此方法无效<script>
var graph = new Dygraph(document.getElementById("graphPanel"), "temperatures.csv", {
animatedZooms: true
});
$(document).ready(function () {
graph.resize(800, 500)
});
</scrip>
这是一个known issue that comes up不时。如果 <div> 是不可见的，那么它没有任何明确定义的高度或宽度。所以在其中渲染图表没有任何用处（它的高度为零）。 dygraphs 无法知道图表 <div> 已经可见。这真是DOM事件API的差距。 Google 地图等其他库也有类似问题。
解决方法是：
- 您可以不带任何参数调用
.resize()来在弹出窗口出现时强制重绘。
- 您可以在弹出窗口出现时创建图表，而不是在页面加载时创建。这样，图表
<div> 将在呈现图表时具有大小。
- 您可以在 dygraphs 构造函数中或作为图表上的样式显式指定高度和宽度
<div>。
// 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;
这个困扰了我一个星期，只好来SO了。 （请原谅 URL，这是一个开发服务器）。 http://www.stagestudio.com.ua/shutter_stat/wiev_base.php?cat=34
当我点击照片时，应该会出现带有折线图的弹出窗口，但实际上折线图是不可见的。只有在调整 window 或打开浏览器检查 window.
后才能看到我该如何解决这个问题？
此方法无效<script>
var graph = new Dygraph(document.getElementById("graphPanel"), "temperatures.csv", {
animatedZooms: true
});
$(document).ready(function () {
graph.resize(800, 500)
});
</scrip>
这是一个known issue that comes up不时。如果 <div> 是不可见的，那么它没有任何明确定义的高度或宽度。所以在其中渲染图表没有任何用处（它的高度为零）。 dygraphs 无法知道图表 <div> 已经可见。这真是DOM事件API的差距。 Google 地图等其他库也有类似问题。
解决方法是：
- 您可以不带任何参数调用
.resize()来在弹出窗口出现时强制重绘。 - 您可以在弹出窗口出现时创建图表，而不是在页面加载时创建。这样，图表
<div>将在呈现图表时具有大小。 - 您可以在 dygraphs 构造函数中或作为图表上的样式显式指定高度和宽度
<div>。
// 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;