jquery - 带有 Bootstrap 标签的 Google Chart

Question

我在带有 Bootstrap 选项卡的页面中使用两个(或更多)Google 图表。根据我的选项卡导航，图表会失去默认(？)大小的大小。下面是一个简化的测试用例，其中包含一个查看问题的步骤:

https://jsfiddle.net/73o0rfqe/

如何重现:

情况#1:

• 单击两个 选项卡。只有在单击选项卡后图表才会调整为实际大小。我正在寻找一种在页面加载后(在点击选项卡之前)呈现它的方法。

情况#2:

• 点击Two标签，点击TwoC标签，点击One标签，点击Two标签，点击>TwoA 选项卡。现在图表失去了实际大小。点击一个标签，点击两个标签。现在图表再次以实际大小呈现。

这部分代码:

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

我正在尝试这个，但它并没有像它应该的那样工作。任何帮助都会有所帮助。

PS.: 任何关于优化此代码的建议也会有所帮助。谢谢。

Answer 1

问题在于您使用

重新绘制了图表

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

当你用标签切换时。我不知道为什么当你按照你写的方式绘制时它会以不正确的大小绘制，但我从来没有使用过 Bootstrap 。

(作为旁注，我不明白为什么要在选项卡更改时加载 google 包，这会导致来自 google 服务器的大量负载。类似

$("a[href='#One']").on('shown.bs.tab', function (e) {
    drawChart();
}); 

就够了。)

一个解决方案是在页面加载时呈现两个图表，然后完成它们，检查 this fiddle你会看到它起作用了。