javascript - 调整选项卡式文字窗口的大小

Question

我正在使用 jquery 和 dygraphs 制作一个简单的页面，其中每个 dygraph 绘图都有选项卡。

当我调整浏览器窗口大小时，事件选项卡工作正常，但当我单击其他选项卡时，图表不会出现。如果我再次调整浏览器的大小，就会出现丢失的图表。我希望在调整浏览器大小一次后，这两个图表都出现在各自的选项卡中。提前致谢。

Fiddle: tabbed dygraph

HTML

<div class="profiles">
  <ul class="tabs">
   <li><a href="#graphdiv1">Profile 7</a></li>
   <li><a href="#graphdiv2">Profile 8</a></li>
  </ul>
 <div class="tabcontent">
  <div id="graphdiv1" class="tab"></div>
  <div id="graphdiv2" class="tab"></div>
 </div>
</div>

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;
    });
});

Answer 1

dygraphs 检查包含 <div> 的图表的大小当您创建Dygraph时目的。如果此时 div 被隐藏，则大小将为零。当您更改选项卡时，Dygraph 对象无法监听任何事件来告诉它 div 的大小已更改。它监听 window.onresize，但是，正如您所发现的，您必须手动触发它。

解决方案是告诉 Dygraph 对象，当您切换选项卡时，它应该再次检查其容器 div 的大小。您可以通过以下方式执行此操作:

g.resize()