带有Bootstrap标签的Google Chart

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();
}); 

当你用标签改变时.我不知道为什么当你按照你写的方式绘制时,它绘制的大小不正确,但我从未使用过bootstrap.

(作为旁注,我不明白为什么你在标签更改上加载谷歌包,这会导致谷歌服务器的大量负载.有点像

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

就够了.)

一个解决方案是在页面加载时渲染两个图表,然后用它们完成,检查这个小提琴,你会发现它有效.

Answer 2

在实施的charts,graphs内部的tabs,内容调整,可能会出现问题.

此类问题的原因

在引导标签,当我们切换标签仅激活的标签将拥有财产display: block;的其他部分tab-contents被应用到display: none;.

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

要覆盖此问题,我添加了以下CSS,而不是通过使用隐藏选项卡display: none;,我通过此方法处理高度和溢出属性宽度不会设置为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解决此问题的方法之一.