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（点击主页加载后的＆＃34;学生人口统计数据＆＃34;标签）。以下是页面上一个图表的规范：

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元素。然后，我们在整个nav元素本身上设置一个click事件监听器。单击特定选项卡项时，将在使用事件侦听器声明的函数（回调）中处理该事件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
    }
});

如何使用导航标签响应Google Charts

1 个答案: