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

问题描述

因此，我使用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 =tabhref =#one>一个< / a> 
< / li> 
< li>< a data-toggle =tabhref =#two> Two< / a>< / li> 
< li>< a data-toggle =tabhref =#three>三< / a>< / li> 
< / ul> 
 
< div class =tab-content> 
 
< div class =tab-pane activeid =one> 
< h4> One< / h4> 
< div id =container1>< / div> 
< script type =text / javascript> 
 $（function（）{
 $（'＃container1'）。highcharts（{
图表：{
}，
 xAxis：{
 categories ：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
系列：[{
数据：[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-paneid =two> 
< h4> Two< / h4> 
< div id =container2>< / div> 
< script type =text / javascript> 
 $（function（）{
 $（'＃container2'）。highcharts（{
图表：{
}，
 xAxis：{
类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
系列：[{
数据：[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-paneid =three> 
< h4>三< / h4> 
< div id =container3>< / div> 
< script type =text / javascript> 
 $（function（）{
 $（'＃container3'）。highcharts（{
图表：{
}，
 xAxis：{
 categories ：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
系列：[{
数据：[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>以下是侧边栏上的内容< / p> 
< / div> 
< / div> 
  

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

下面是一个JSFiddle：

我的问题都是：

1。）这就是我吗？

2）。选项卡处于活动状态时究竟发生了什么？看看引导CSS，这似乎与处理显示：无和显示：块，但我不知道如何在这种情况下工作。

3。）这是一个高难度问题还是引导问题？我注意到这发生在我身上的非高级元素（如在边栏中显示推文），所以我倾向于引导。

4。）有没有解决方案你可以找到使一切都一致？

感谢你们！

解决方案

问题是Highcharts不能计算具有CSS的容器的宽度： display：none ，因此应用的是默认宽度（600px）。事实上，浏览器无法计算这些元素的宽度。

例如，当您使用分隔符调整结果窗口的大小时，图表将调整大小并可以工作。因此，您有三种选择：

• 在第一次点击该选项卡后呈现图表


• 呈现图表at在每次点击和窗口大小调整后，使用 chart.setSize（w，h）添加新的宽度和高度
  
• 渲染图表在标签点击调用 chart.reflow（）

之后

So I'm creating a page with tabbed content using Twitter's Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example, I am putting in charts using highcharts.js in my different tabs, yet the active one always shows correctly while the others have an incorrect width.

Check out the example below:

        <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>

In this case, switching the active tab on page load makes that chart look correct for me, but the rest always extend all the way to the edge (In the case of my data, which I want to only fill up the space of the span9 div. I just used dummy charts in this case, but it's the same idea.

Here's a JSFiddle: http://jsfiddle.net/dw9tn/

My questions for you all are:

1.) Is this just me?

2.) What exactly is going on when tabs are made active? Looking at the bootstrap css, this seems to deal with display: none and display: block, but I don't have a good understanding of how that works in this case.

3.) Is this a highcharts issue or a bootstrap issue? I noticed this happened to me with non-highchart elements (like showing tweets in the sidebar), so I'm leaning toward bootstrap.

4.) Is there any solution you can find to make everything consistent?

Thanks guys!

解决方案

The problem is that Highcharts can not calculate width of the container which has CSS: display:none, so applied is default width (600px). In fact, browser is not able to calculate width for such elements.

For example when you will use separator to resize Result window, chart will resize and will work. So you have three options:

• render chart after first click on that tab
• render chart at the beginning, but after each click and window resize use chart.setSize(w,h) with new width and height
• render chart at the beginning, but after tab click call chart.reflow()

这篇关于为什么Bootstrap选项卡在使用highcharts时显示宽度不正确的选项卡窗格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！