所以我使用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。）当标签处于活动状态时到底发生了什么？看一下bootstrap css，这似乎涉及display：none和display：block，但是我不太了解这种情况下的工作原理。
3。）这是一个高级问题还是一个引导问题？我注意到这发生在我身上的非高图元素（比如在侧边栏中显示推文），所以我倾向于引导。
4。）是否有任何解决方案可以让一切都保持一致？
谢谢你们！
答案 0 :(得分：146)
这不是Highcharts问题，至少本身不是问题，问题是由于Bootstrap使用display: none隐藏非活动标签这一事实引起的：
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
这导致Highcharts无法获得预期宽度来初始化图表，因此默认为600px。使用相同方法隐藏内容的其他工具会发生这种情况。
我们可以使用height: 0; overflow-y: hidden来实现隐藏效果，而不是使用额外重绘或延迟初始化解决问题，这样隐藏的标签窗格仍然存在且具有有效width：< / p>
/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}
/* bootstrap hack end */
更新：先前的两步解决方案首先隐藏所有标签，然后再次显示活动标签。相比之下，现在我们有一个单步解决方案，它直接针对非活动选项卡。
此解决方案是无缝的，因此您不必再担心图表是否位于选项卡窗格内。它是有效的，因为它首先解决了宽度问题，因此无需使用javascript通过resize / redraw / reflow解决宽度问题。
这个补丁需要在bootstrap css之后加载，因为CSS cascading order rules，简而言之，后一个规则获胜。
提示：切换到配置文件标签以查看差异。
答案 1 :(得分：28)
问题是Highcharts无法计算具有CSS的容器的宽度：display:none，因此应用的是默认宽度（600px）。实际上，浏览器无法计算这些元素的宽度。
例如，当您使用分隔符调整“结果”窗口的大小时，图表将调整大小并且将起作用。所以你有三个选择：
chart.setSize(w,h)新的宽度和高度chart.reflow() 答案 2 :(得分：5)
根据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());
})
答案 3 :(得分：5)
根据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
});
})
答案 4 :(得分：1)
我在另一篇文章中找到了一个更简单的解决方案基本上，问题出现是因为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。图表将很好地呈现。
答案 5 :(得分：-1)
图表的内嵌式“宽度”不同。我不确定这些计算的时间和方式，但你可以在css中覆盖那些。例如。