引导选项卡更改时的图表更新

Question

我的 nvd3 图表和引导响应选项卡有问题。基本上我在一个选项卡上有一个图表。它加载正常，但是当我更改选项卡时，图形新选项卡的大小设置为 0 或类似的东西。我猜非活动选项卡上的宽度设置为 0，并且图形具有最小宽度。如果我更改选项卡，图形宽度不会调整大小。所以我必须在单击选项卡时使用 onclick 更新图形？或者什么是最好的解决方案？
很抱歉，我无法制作 jsfiddle，this is my try。但我得到了TypeError: nv.addGraph is not a function。
这是我的带有标签的图表： 这是我更改标签的时候： 当我调整窗口大小时，图形也会更新： 调整窗口大小后，我点击了每年股息。也没有调整大小： 如何使用简单的 onclick 函数调用更新图？存在类似于 WindowResize 的东西吗？

<ul class="nav nav-tabs responsive" role="tablist">
        <li role="presentation" class="active">
            <a href="#yearly" aria-controls="yearly" role="tab" data-toggle="tab"
                    onclick="nv.utils.windowResize(chart.update);">
                Dividends Yearly</a></li>
        <li role="presentation">
            <a href="#quaterly" aria-controls="#quaterly" role="tab" data-toggle="tab"
                    onclick="nv.utils.windowResize(chart.update);">
                Dividends Quarterly</a></li>
      </ul>

Answer 1

我找到了相同的线程 - bootstrap tab with nvd3 graphs in it。

$(function () {
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        window.dispatchEvent(new Event('resize'));
    });
});