Question

我正在使用jquery和dygraphs为每个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()

Answer 2

我有类似的问题。根据danvk的回答解决了这个问题。 @danvk，我在IE8（特定于这个浏览器）中调整了dygraph大小调整的另一个问题。我的页面上有两个dygraph，一次只能看到其中一个。如果我调整窗口大小，隐藏的dygraph也会尝试使用函数resize（）在内部调整自身大小。在那里我得到this.maindiv_.clientWidth为空或未定义的异常。实际上，此处maindiv_为空。我想提出以下的dygraph变化供你考虑：

在Dygraph.prototype.resize中，第一行应为if (!this.maindiv_) return;
在createClipDiv方法中，逻辑检查应为if (area.w <= 0 || area.h <= 0) {return;}

如果我在dygraph.js中进行了这两项更改，我的页面调整大小正常。

你可以对此发表评论吗？

调整选项卡式的dygraph窗口

2 个答案: