调整选项卡式刻度图窗口的大小 [英] resizing tabbed dygraph window

问题描述

我正在使用jquery和dygraph制作一个简单的页面，其中包含每个dygraph图的选项卡.

I'm using jquery and dygraphs to make a simple page with tabs for each dygraph plot.

当我调整浏览器窗口的大小时，活动选项卡可以正常工作，但是当我单击另一个选项卡时，图形不会出现. 如果我再次调整浏览器的大小，将出现丢失的图形.我希望两个图形在调整浏览器大小一次后会出现在它们各自的选项卡中. 预先感谢.

When I resize the browser window, the active tab works fine but when I click the other tab the graph doesn't appear. If I resize the browser again, the missing graph will appear. I would like both graphs to appear in their respective tabs after resizing the browser once. Thanks in advance.

小提琴:选项卡式笔谱

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

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

推荐答案

dygraphs在创建Dygraph对象时检查包含<div>的图表的大小.如果div在该点被隐藏，则大小将为零.更改选项卡时，不会发生Dygraph对象可以监听的事件，该事件将告诉它div的大小已更改.它会监听window.onresize，但是，正如您所发现的，您必须手动触发它.

dygraphs checks the size of the chart's containing <div> when you create the Dygraph object. If the div is hidden at that point, the size will be zero. When you change tabs, there's no event that the Dygraph object can listen to which will tell it that the div has changed size. It listens to window.onresize but, as you've discovered, you have to trigger that manually.

解决方案是告诉Dygraph对象在切换选项卡时应再次检查其容器div的大小.您可以通过以下方式完成此操作:

The solution is to tell the Dygraph object that it should check the size of its container div again when you switch tabs. You can do this via:

g.resize()

这篇关于调整选项卡式刻度图窗口的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！