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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (337)

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>

选项卡激活时究竟发生了什么?怎么解决这个问题?

提问于
用户回答回答于

问题是Highcharts无法计算具有CSS的容器的宽度:display:none,所以应用的是默认宽度(600px)。事实上,浏览器无法计算这些元素的宽度。

例如,使用分隔符调整“结果”窗口的大小时,图表将调整大小并将工作。所以你有三个选择:

  • 在第一次点击该标签后呈现图表
  • 在开始时渲染图表,但在每次点击和窗口调整大小后使用chart.setSize(w,h)创建新的宽度和高度
  • 在开始时渲染图表,但在标签点击之后调用chart.reflow()
用户回答回答于

不是Highcharts问题,至少不是本身,问题是由Bootstrap display: none用来隐藏不活动的选项卡导致的:

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

这会导致Highcharts无法获得预期宽度来初始化图表,因此默认为600px。对于使用相同方法隐藏内容的其他工具也会发生这种情况。

纯粹的CSS解决方案

我们可以通过height: 0; overflow-y: hidden这种方式实现隐藏效果,而不是通过额外重绘或延迟初始化来解决问题,这样隐藏的选项卡窗格仍然存在并且具有有效性:

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励