57

因此，我正在使用 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.) 这是 highcharts 问题还是 bootstrap 问题？我注意到这发生在我身上的非 highchart 元素（比如在侧边栏中显示推文），所以我倾向于 bootstrap。

4.) 是否有任何解决方案可以使所有内容保持一致？

多谢你们！

4

6 回答 6

158

原因

这不是 Highcharts 问题，至少不是其本身，问题是由 Bootstrapdisplay: none用来隐藏非活动选项卡的事实引起的：

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

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

纯 CSS 解决方案

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

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

更新：我们现在通过 直接定位非活动标签:not(.active)，以避免可能的副作用（如果有）。

此解决方案是无缝的，因此您不再需要担心图表是否在选项卡窗格内。而且它很有效，因为它首先解决了宽度问题，因此无需通过使用 javascript 调整大小/重绘/重排来解决宽度问题。

关于级联顺序的注意事项

这个补丁需要在 bootstrap css 之后加载，因为css 级联顺序规则，总之后者规则胜出。

演示

之前与之后

提示：切换到配置文件选项卡以查看差异。

于 2014-04-24T11:06:24.457 回答
30

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

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

  • 第一次单击该选项卡后呈现图表
  • 在开始时渲染图表，但在每次单击和窗口调整大小后使用chart.setSize(w,h)新的宽度和高度
  • 在开始时渲染图表，但在选项卡单击调用之后chart.reflow()
于 2013-06-20T13:33:38.653 回答
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
    });
})
于 2014-10-10T21:17:28.803 回答
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());
})

来源： http: //getbootstrap.com/javascript/#tabs-usage

于 2014-01-24T21:55:19.587 回答
2

我在另一篇文章中找到了一个更简单的解决方案。基本上，问题出现是因为 Highcharts 无法在设置了“显示：无”的 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. 图表将很好地呈现。

于 2015-11-19T21:19:41.527 回答
-1

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

于 2013-06-20T07:26:27.917 回答