我在带有Bootstrap选项卡的页面中使用了两个（或更多）Google图表。根据我的标签导航，图表会失去默认（？）大小的大小。 Bellow是一个简化的测试用例，其中包含查看问题的步骤：
https://jsfiddle.net/73o0rfqe/
如何重现：
情况＃1：
- 点击 二 标签。仅在选项卡单击后，图表才会调整为实际大小。我正在寻找一种在页面加载后（在选项卡点击之前）渲染它的方法。
情况＃2：
- 点击 二 选项卡，单击 TWOC 选项卡，单击 一 选项卡，单击 二 选项卡，单击 TwoA 标签。现在图表失去了实际尺寸。点击 一 选项卡，单击 二 标签。现在，图表再次以实际尺寸呈现。
这部分代码：
$("a[href='#One']").on('shown.bs.tab', function (e) {
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
clearChart();
});
我正在尝试使用它，但它不能像它应该的那样工作。任何帮助都会有所帮助。
PS。：任何有关优化此代码的建议都会有所帮助。谢谢。
问题在于您重绘了图表
$("a[href='#One']").on('shown.bs.tab', function (e) {
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
clearChart();
});
当你用标签改变时。我不知道为什么当你按照你写的方式进行绘制时，它的绘制大小不正确，但我从未使用过bootstrap。
（作为旁注，我不明白为什么你在标签更改上加载谷歌包，这会导致谷歌服务器的大量负载。有点像
$("a[href='#One']").on('shown.bs.tab', function (e) {
drawChart();
});
就够了。）
一个解决方案是在页面加载时渲染两个图表，然后用它们完成，检查 这个小提琴 你会发现它有效。
问题在于您重绘了图表
$("a[href='#One']").on('shown.bs.tab', function (e) {
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
clearChart();
});
当你用标签改变时。我不知道为什么当你按照你写的方式进行绘制时，它的绘制大小不正确，但我从未使用过bootstrap。
（作为旁注，我不明白为什么你在标签更改上加载谷歌包，这会导致谷歌服务器的大量负载。有点像
$("a[href='#One']").on('shown.bs.tab', function (e) {
drawChart();
});
就够了。）
一个解决方案是在页面加载时渲染两个图表，然后用它们完成，检查 这个小提琴 你会发现它有效。
在实施的同时 charts， graphs 在 - 的里面 tabs，可能会发生内容调整大小问题。
此类问题的原因
在Bootstrap选项卡中，当我们切换选项卡时，只有活动选项卡将具有该属性 display: block; 其余的 tab-contents 适用于 display: none;。
如果div元素具有属性，则这是此问题的主要原因 display: none;那里 宽度 也被认为是 0像素。
要覆盖此问题，我添加了以下内容 CSS，而不是使用隐藏标签 display: none;，我处理 高度 ＆ 溢出 通过此方法的属性宽度不会设置为 0像素。
CSS
.tab-content>.tab-pane {
height: 1px;
overflow: hidden;
display: block;
visibility: hidden;
}
.tab-content>.active {
height: auto;
overflow: auto;
visibility: visible;
}
我已经从你的代码中分叉你的代码jsfiddle链接给出的问题（https://jsfiddle.net/73o0rfqe/）。
这是具有更新代码的链接（即，仅添加了上面给出的CSS）
https://jsfiddle.net/swasatz/28qttaqb/2/
查看小提琴希望这可能对您有所帮助
谢谢。
注意：这是使用CSS解决此问题的方法之一。
显然这是一个CSS问题。这是解决我遇到的问题的解决方案，将图表加载到隐藏的标签中：
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;
height: 0;
overflow-y: hidden;
}
.tab-content > .active,
.pill-content > .active {
height: auto;
}