Question

我在带有Bootstrap标签的页面中使用了两个（或更多）Google图表。根据我的标签导航，图表会失去默认（？）大小的大小。 Bellow是一个简化的测试用例，可以看到问题：

如何重现：

情况＃1：

点击两个标签。仅在选项卡单击后，图表才会调整为实际大小。我正在寻找一种在页面加载后（在选项卡点击之前）渲染它的方法。

情况＃2：

点击两个标签，点击 TwoC 标签，点击一个标签，点击两个标签，点击 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。

（作为旁注，我不知道为什么你在标签更改时加载谷歌包，这会导致谷歌服务器的大量负载。像

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

就够了。）

解决方案是在页面加载时渲染两个图表然后完成它们，检查this fiddle并且您将看到它有效。

Answer 2

在charts内实施graphs，tabs时，可能会出现内容调整大小问题。

此类问题的原因

在Bootstrap选项卡中，当我们切换选项卡时，只有活动选项卡的属性display: block; tab-contents的其余部分将应用于display: none;。

如果div元素具有属性display: none;，则宽度也被视为 0px ，这是此问题的主要原因。

要覆盖此问题，我添加了以下 CSS ，而不是使用display: none;隐藏标签，而是使用高度＆amp;处理此方法的溢出属性宽度不会设置为 0px 。

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解决此问题的方法之一。

Answer 3

显然这是一个CSS问题。这是解决我遇到的问题的解决方案，将图表加载到隐藏的标签中：

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}

带有Bootstrap标签的Google图表

3 个答案:

CSS