javascript - 如何通过导航选项卡使 Google 图表做出响应

Question

我已经能够使用以下代码使我的 Google 图表响应浏览器窗口大小的调整:

var chart = new google.visualization.TreeMap(
    document.getElementById('stuEnrCDTree')
);
chart.draw(data,options);

function resizeHandler () {
    chart.draw(data, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resizeHandler, false);
}
else if (window.attachEvent) {
    window.attachEvent('onresize', resizeHandler);
}

但是，我的页面顶部有一个选项卡菜单，允许用户根据类别查看 Google 图表组。当用户选择不同的选项卡时，图表不会调整大小 - 仅当调整窗口大小时才会完成调整大小。

是否有特定的功能或选项可以在用户选择另一个选项卡时调整图表大小？这是link to the page in question (主页加载后单击“学生人口统计”选项卡即可查看插图)。以下是页面上一张图表的规范:

function drawChartstuEnrCDTree() {
    var data = gvisDatastuEnrCDTree();
    var options = {};
    //options["width"] = [1100];
    options["height"] = [500];
    options["minColor"] = ["#d7191c"];
    options["midColor"] = ["#ffffbf"];
    options["maxColor"] = ["#1a9641"];
    options["fontColor"] = ["black"];
    options["title"] = ["Change in College & Department Enrollment, Fall 2011 to     2015 (right click graphic to return to college level; red [-] green [+])*"];
    options["showScale"] = [true];
    options["showTooltips"] = [true];


    var chart = new google.visualization.TreeMap(
        document.getElementById('stuEnrCDTree')
    );
    chart.draw(data,options);

    function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }

}

<div class="row">
  <div class="chart" id="stuEnrCDTree"></div>
</div>

选项卡导航代码示例:

  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="tab" href="#tab1">Pride Origins</a></li>
    <li><a data-toggle="tab" href="#tab2">Whose House?</a></li>
    <li><a data-toggle="tab" href="#tab3">Student Demographics</a></li>
    <li><a data-toggle="tab" href="#tab4">First Time In College (FTICs)</a></li>
    <li><a data-toggle="tab" href="#tab5">Faculty Demographics</a></li>
  </ul>
</div>
<div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1" role="tabpanel">
      <h2 style="text-align: center;"><strong>Pride Origins </strong></h2>
      <hr/>
      <div class="row">
        <div class="chart" id="trendUHln" style="width: 1150; height: 350;"></div>
      </div>

Answer 1

正如上面回复您的帖子的评论中所提到的，您想要做的是在单击选项卡后重新绘制图表。

下面的代码首先通过 .nav-pills 类获取选项卡的 nav 元素。然后，我们在整个导航元素本身上设置一个单击事件监听器。单击特定选项卡项时，该事件 e 将在使用事件监听器声明的函数(回调)中进行处理。我们要做的第一件事是检查以确保它确实是在整个 nav 元素中单击的选项卡导航项之一。我们通过检查选项卡项是否具有 HTML 属性 data-toggle='tab' 来做到这一点。如果是这样，那么我们就知道选项卡导航项之一被单击，然后我们想要重新绘制/调整图表大小。

var nav = document.querySelector('.nav-pills');
nav.addEventListener('click', function(e) {
    // Event delegation - make sure it was one of the tab nav items that was clicked
    if (e.target && e.target.matches('a[data-toggle="tab"]')) {
        // Call the redraw function for the charts
    }
});