为什么Bootstrap选项卡在使用highcharts时会显示宽度不正确的选项卡窗格div？
因此，我使用Twitter的Bootstrap创建了一个带有选项卡式内容的页面，但我的起始活动div的内容总是与其他选项卡的内容不同。例如，我在不同的选项卡中使用highcharts.js放入图表，但活动的选项卡总是正确显示，而其他选项卡的宽度不正确。
看看下面的例子：
<div class = "row-fluid">
<div class = "span9">
<div class = "row-fluid">
<h3>Test</h3>
<ul class="nav nav-tabs">
<li class = "active">
<a data-toggle = "tab" href = "#one">One</a>
</li>
<li><a data-toggle = "tab" href = "#two">Two</a></li>
<li><a data-toggle = "tab" href = "#three">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one" >
<h4>One</h4>
<div id = "container1"></div>
<script type = "text/javascript">
$(function () {
$('#container1').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</div>
<div class="tab-pane" id="two" >
<h4>Two</h4>
<div id = "container2"></div>
<script type = "text/javascript">
$(function () {
$('#container2').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</div>
<div class="tab-pane" id="three" >
<h4>Three</h4>
<div id = "container3"></div>
<script type = "text/javascript">
$(function () {
$('#container3').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</div>
</div>
</div>
</div>
<div class = "span3">
<p>Here is the content on my sidebar</p>
</div>
</div>在这种情况下，在页面加载时切换活动选项卡会使图表对我来说看起来是正确的，但其余的总是一直延伸到边缘(对于我的数据，我只想填满span9 div的空间。在这种情况下，我只是使用了虚拟图表，但它的想法是相同的。
这是一个JSFiddle：http://jsfiddle.net/dw9tn/
我要问你们的问题是：
1.)这只是我的问题吗？
2.)当选项卡处于活动状态时，究竟发生了什么？看一下引导css，它似乎处理了display: none和display: block，但我不太理解它在这种情况下是如何工作的。
3.)这是highcharts问题还是bootstrap问题？我注意到这发生在我的非高表元素上(比如在侧边栏中显示tweet)，所以我倾向于使用bootstrap。
4.)有没有什么解决方案可以让一切保持一致？
谢谢你们！
回答 4
Stack Overflow用户
发布于 2014-01-25 05:55:20
根据Pawel的回答，我在开始时呈现图表，然后调整图表大小。
使用的代码(使用bootstrap 3.0.3和HighCharts 3.0.7)
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('#container').highcharts().setSize($('#container').width(),$('#container').height());
})Stack Overflow用户
发布于 2014-10-11 05:17:29
基于Paweł的回答，我做了一个实际的例子：
http://codepen.io/colinsteinmann/pen/BlGfE
基本上，当单击选项卡时，会在每个图表上调用.reflow()函数。这样，当容器变得可见时，图表将根据应用于容器的新维度进行重新绘制。
这是最重要的代码片段：
// fix dimensions of chart that was in a hidden element
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
jQuery( ".contains-chart" ).each(function() { // target each element with the .contains-chart class
var chart = jQuery(this).highcharts(); // target the chart itself
chart.reflow() // reflow that chart
});
})Stack Overflow用户
发布于 2015-11-20 05:19:42
我在另一篇文章中找到了一个更简单的解决方案。基本上，问题的出现是因为Highcharts不能在设置了“display:none”的div上呈现。解决方案就是在CSS样式表中编写一个修复程序。
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: inline;
visibility: hidden;
position: absolute;
width: 930px;
}
.tab-content > .active,
.pill-content > .active {
display: inline;
visibility: visible;
position: absolute;
width: 930px;
}这将使选项卡使用visibility属性，而不是display。图表将很好地呈现。
https://stackoverflow.com/questions/17206631
复制相似问题