Html 为什么引导选项卡在使用highcharts时显示宽度不正确的选项卡窗格div？

因此，我使用Twitter的引导程序创建了一个带有标签内容的页面，但是我的起始活动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>

试验






一个
$（函数（）{
$（“#container1”）。高图({
图表：{
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}]
});
});
两个
$（函数（）{
$（“#container2”）。高图({
图表：{
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}]
});
});
三
$（函数（）{
$（“#container3”）。高图({
图表：{
},
xAxis：{
类别：[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}]
});
});
这是我的侧边栏上的内容

在这种情况下，在页面加载时切换活动选项卡使该图表看起来对我来说是正确的，但其余的总是一直延伸到边缘（对于我的数据，我只想填充span9 div的空间。在这种情况下，我只使用了虚拟图表，但这是相同的想法

下面是一个JSFIDLE：

我想问大家的问题是：

这就是我吗

2.）选项卡处于活动状态时到底发生了什么？看看引导css，它似乎处理display:none和display:block，但我不太了解在这种情况下如何工作

3.）这是highcharts问题还是bootstrap问题？我注意到这种情况发生在我的非highchart元素上（比如在侧边栏中显示tweets），所以我倾向于引导

4.）是否有任何解决方案可以让一切保持一致

---

谢谢大家

对于图表，内嵌样式“宽度”是不同的。我不确定何时以及如何计算这些值，但您可以覆盖css中的值。

问题是Highcharts无法计算包含css的容器的宽度：

display:none

，因此应用的是默认宽度（600px）。事实上，浏览器无法计算此类元素的宽度

例如，当您将使用分隔符调整结果窗口的大小时，图表将调整大小并正常工作。所以你有三个选择：

• 在第一次单击该选项卡后渲染图表
• 在开始时渲染图表，但每次单击并调整窗口大小后，请使用新宽度和高度的

  chart.setSize（w，h）

• 在开始时呈现图表，但在选项卡之后单击调用

  chart.reflow（）

---

根据Pawel的回答，我在开始时呈现图表，然后调整图表的大小

使用的代码（使用bootstrap 3.0.3和HighCharts 3.0.7）

来源：

原因 这不是Highcharts问题，至少不是它本身的问题，问题是由引导使用

display:none

隐藏非活动选项卡引起的：

.tab content>.tab窗格，.pill content>.pill窗格{
显示：无；/*这就是问题所在*/
}

这导致Highcharts无法获得初始化图表的预期宽度，因此默认值为

600px

。这将发生在使用相同方法隐藏内容的其他工具上

纯CSS解决方案 而不是用一个额外的重画来解决这个问题

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#container').highcharts().setSize($('#container').width(),$('#container').height());
})

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