Question

我正在使用带有标签的twitter bootstrap。我在每个标签中都有多个标签和图表。浏览器调整大小后，不会调整当前活动选项卡上的图表的大小。事实上，它看起来很有趣，有一个细条。当前活动选项卡工作正常。有谁见过这个问题，有没有解决方法？

Answer 1

这是一个有效的例子：

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

Answer 2

这是我对此的修复（使用jQuery）：

$("[data-highcharts-chart]").each(function () {
    var highChart = Highcharts.charts[$(this).data('highchartsChart')];
    var highChartCont = $(highChart.container).parent();
    highChart.setSize(highChartCont.width(), highChartCont.height());
    highChart.hasUserSize = undefined;
});

每当图表获得焦点时调用此函数以确保其正确调整大小。

Answer 3

我有一个类似的问题，我发现最好的事情是在显示标签之前不加载图表。因此，在显示的事件中，我正在快速加载图表（但只有一次）

Answer 4

我刚刚用以下方法解决了这个问题。使用bootstrap版本3.3.5

我要离开这里了，因为这个链接在我开始搜索问题时出现了。我希望它有所帮助。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $(e.target.hash).highcharts().reflow();
    });

HTML

<!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist" id="taks-tabs">
    <li role="presentation" class="active"><a href="#taks_met_std" aria-controls="taks_met_std" role="tab" data-toggle="tab">Met Standard</a></li>
    <li role="presentation"><a href="#taks_comm_perf" aria-controls="taks_comm_perf" role="tab" data-toggle="tab">Commended Performance</a></li>
    <li role="presentation"><a href="#taks_m_met_std" aria-controls="taks_m_met_std" role="tab" data-toggle="tab">TAKS-M Met Standard</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="taks_met_std"></div>
    <div role="tabpanel" class="tab-pane" id="taks_comm_perf"></div>
    <div role="tabpanel" class="tab-pane" id="taks_m_met_std"></div> 
</div>

Answer 5

将class="chart"添加到标签内的所有highcharts容器中。

添加此jQuery代码：

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})

Answer 6

找了一段时间后我找到了答案。这让我发疯，所以我想和你们分享，因为这里没有任何东西可供我使用。

将此添加到您的CSS

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}

有关详细信息，请访问我找到解决方案的页面 https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/

Answer 7

我用下一个代码解决了这个问题。

        $('#yourDivChart').highcharts({
            chart: {
                type: data.EjeX.Tipo,
                //width: width,
                //height: height,
                options3d: {
                    enabled: true,
                    alpha: 15,
                    beta: 15,
                    viewDistance: 25,
                    depth: 40
                },
                width: $('#DivContainerWithYourTabs').width() - 150
            },

在我的情况下是部分“ _partialDetalleProyecto”

我希望你能工作。

Answer 8

所以这有点旧，但对于任何绊倒这个的人来说，我遇到了一个类似的问题，在引导标签显示中高图尺寸不正确。我想出的解决方案是使用setTimeout（）延迟创建图表100ms。

setTimeout(function() {
    drawBarChart();
}, 100);

注意：drawBarChart是我创建的自定义函数，用于生成我需要的图表。问题（至少在我的情况下）似乎是图表是在容器之前（或同时）创建的，因此选择了一些默认宽度而不是容器的宽度。

Answer 9

我有2个标签，遇到了同样的问题。我只更改了Druska的2行代码，就可以了。

function anyname() {
$("[data-highcharts-chart]").each(function () {
var highChart = Highcharts.charts[$(this).data('highchartsChart')];
var highChartCont = $(highChart.container).parent();
highChart.reflow();

}）;

}

并向您添加一个onclick事件到您的HTML标签代码中，如下所示：

   <input type="radio" id="tab1_1" checked  onclick="anyname();" >

Highcharts不会调整选项卡内的图表

9 个答案: