带有引导选项卡的 Google 图表

Question

我在一个带有 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.：任何有关优化此代码的建议也会有所帮助。谢谢。

Answer 1

问题在于您使用

重新绘制图表

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

当您使用标签进行更改时。我不知道为什么当你按照你写的方式绘制时它的大小不正确，但我从来没有使用过引导程序。

（作为旁注，我不明白您为什么在标签更改时加载谷歌包，这会导致谷歌服务器的大量负载。类似

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

就够了。）

一种解决方案是在页面加载时渲染两个图表，然后使用它们，检查this fiddle，您会看到它有效。

Answer 2

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

此类问题的原因

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

如果 div 元素有一个属性display: none;，这是导致此问题的主要原因，那么 width 也被视为 0px。

为了解决这个问题，我添加了以下 CSS，我没有使用 display: none; 隐藏选项卡，而是使用 height 和 overflow 属性通过此方法宽度不会设置为 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;       
}