在隐藏元素中绘制Google Chart

尝试在没有幸运的情况下在隐藏元素中渲染Google图表。 小提琴波纹管有一个带引导标签的例子：

小提琴

安德鲁在这里得到了一些帮助： 如何在显示标签时绘制谷歌图表？ 但是图表现在可以在我与它交互的任何时候重新渲染（例如使用范围filter）。

HTML代码是：

 
 
 
 Tab A 
 
 Tab B 
 
 Tab C 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

所有的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')); });