Jquery 在隐藏元素中绘制Google图表

尝试在没有lucky的情况下在隐藏元素中呈现Google图表。fiddle bellow有一个带有引导选项卡的示例：

从Andrew那里得到了一些帮助：但是现在只要我与图表交互，图表就会重新呈现（例如，使用范围过滤器）

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代码都在小提琴中。

一个简单的例子，我在这里所做的就是在每个选项卡触发tabs show事件时重新加载图形。我相信有一个更优雅的解决方案，但它确实起到了作用

$("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
    });
});

简单地说：

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

---

嗯…你需要以某种方式连接到Bootstrap的选项卡事件。我会调查他们，看看能不能弄清楚。谢谢你的时间，安德鲁！谢谢它起作用了。我觉得奇怪，如果我一直点击标签，导航会变慢或变慢。但它确实起到了作用。再次感谢。可能是内存泄漏。我会进一步阅读文档，看看是否有比一直调用

google.load

更好的方法。当选项卡关闭时，您可能需要添加额外的事件回调，并删除所有旧的图形引用。请看，底部的响应建议调用

clearChart（）

函数。在您的js文件中，谢谢，这正是我要查找的。重要提示：jquery绑定应该在选项卡的html代码之后定义。我的方式：

$（'a[data toggle=“tab”]”）。单击（（）=>window.dispatchEvent（新事件（'resize'））