如何使用导航选项卡使 Google Charts 具有响应性答案

【问题标题】：How to make Google Charts responsive with navigation tabs如何使用导航选项卡使 Google Charts 具有响应性
【发布时间】：2016-09-19 01:41:16
【问题描述】：

我已经能够使用以下代码使我的 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>

【问题讨论】：

在标签被激活并且可见后需要重绘图表 -- 更改标签的代码在哪里？
谢谢。我只是在上面添加了部分选项卡代码。

标签： javascript html charts google-visualization

【解决方案1】：

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

下面的代码首先通过.nav-pills 类获取选项卡的导航元素。然后我们在整个导航元素本身上设置了一个点击事件监听器。单击特定选项卡项时，该事件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
    }
});

【讨论】：