调整选项卡式dygraph窗口
我正在使用jquery和dygraphs为每个dygraph图创建一个带有制表符的简单页面。
当我调整浏览器窗口的大小时，活动选项卡工作正常，但是当我单击其他选项卡时，图表不会显示。 如果我再次调整浏览器大小，则会显示缺少的图形。 我希望在调整浏览器一次后，两个图表都显示在各自的选项卡中。 提前致谢。
小提琴：标签式dygraph
HTML
CSS
* {font-family: 'Segoe UI';} .profiles .tabs {list-style: none; margin: 0 10px; padding: 0;} .profiles .tabs li {list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; z-index: 1;} .profiles .tabs li a {text-decoration: none; color: #000; border: 1px solid #ccc; padding: 5px; display: inline-block; border-radius: 5px 5px 0 0; background: #f5f5f5;} .profiles .tabs li a.active, .tabbable .tabs li a:hover {border-bottom-color: #fff; background: #fff;} .tabcontent {width: 500px; border: 1px solid #ccc; margin-top: -1px; padding: 10px;}
使用Javascript
g1 = new Dygraph( // containing div document.getElementById("graphdiv1"), // CSV or path to a CSV file. "Date,Temperature\n" + "2008-05-07,75\n" + "2008-05-08,70\n" + "2008-05-09,80\n" ); g2 = new Dygraph( // containing div document.getElementById("graphdiv2"), // CSV or path to a CSV file. "Date,Temperature\n" + "2008-05-07,80\n" + "2008-05-08,75\n" + "2008-05-09,70\n" ); $(document).ready(function(){ $(".profiles").find(".tab").hide(); $(".profiles").find(".tab").first().show(); $(".profiles").find(".tabs li").first().find("a").addClass("active"); $(".profiles").find(".tabs").find("a").click(function(){ tab = $(this).attr("href"); $(".profiles").find(".tab").hide(); $(".profiles").find(".tabs").find("a").removeClass("active"); $(tab).show(); $(this).addClass("active"); return false; }); });
在创建Dygraph对象时，dygraphs会检查包含
的图表的大小。 如果在该点隐藏div，则大小将为零。 当你更改标签时，没有Dygraph对象可以监听的事件会告诉它div已经改变了大小。 它会监听window.onresize但是，正如您所发现的那样，您必须手动触发它。
解决方案是告诉Dygraph对象它应该在切换标签时再次检查其容器div的大小。 你可以这样做：
g.resize()
我有类似的问题。 根据danvk的回答解决了这个问题。 @danvk，我在IE8（特定于这个浏览器）中调整了dygraph大小调整的另一个问题。 我的页面上有两个dygraph，一次只能看到其中一个。 如果我调整窗口大小，隐藏的dygraph也会尝试使用函数resize（）在内部调整自身大小。 我得到的例外是this.maindiv_.clientWidth为null或未定义。 实际上， maindiv_在这里为空。 我想提出以下dygraph变化供您考虑：
- 在
Dygraph.prototype.resize，第一行应该是if (!this.maindiv_) return; - 在
createClipDiv方法中，逻辑检查应为if (area.w <= 0 || area.h <= 0) {return;}
如果我在dygraph.js中进行这两项更改，我的页面resize工作正常。
你能评论一下吗？