在隐藏元素中绘制谷歌图表

Question

尝试在隐藏元素中渲染 Google 图表，但并不走运。小提琴下面有一个带有引导选项卡的示例：

Fiddle

在这里得到了 Andrew 的一些帮助：How to draw a google chart when a tab is showed?，但现在图表在我与之交互的任何时候都会重新渲染（例如使用范围过滤器）。

HTML代码是：

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs" data-tabs="tabs">
            <li class="active">
                <a href="#A" data-toggle="tab">Tab A</a>
            </li>
            <li class="">
               <a href="#B" data-toggle="tab">Tab B</a>
            </li>
            <li class="">
                <a href="#C" data-toggle="tab">Tab C</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="A">
                <div id='ChartA'></div>
            </div>
            <div class="tab-pane" id="B">
                <div id='ChartB'></div>
            </div>
            <div class="tab-pane" id="C">
                <div id='ChartC'></div>
            </div>
        </div>
    </div>
</div>

所有的JS代码都在小提琴中。

Answer 1

一个简单的例子，我在这里所做的就是在每个选项卡触发选项卡显示事件时重新加载图表。我确信有一个更优雅的解决方案，但它可以完成工作。

$("a[href='#A']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartA
    });
});

$("a[href='#B']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartB
    });
});

$("a[href='#C']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {
        packages: ['timeline'],
        callback: drawChartC
    });
});

Answer 2

就这么简单：

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