11

我正在使用带有标签的 twitter 引导程序。我在每个选项卡中有多个选项卡和图表。在浏览器调整大小时，不在当前活动选项卡上的图表不会调整大小。事实上，细条看起来有点有趣。当前活动选项卡工作正常。有没有人看到这个问题并且有任何解决方法？

4

9 回答 9

23

这是一个工作示例：

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:16:18.363 回答
4

这是我对此的修复（使用 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;
});

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

于 2013-07-23T15:37:54.980 回答
2

我有一个类似的问题，我发现最好的办法是在显示选项卡之前不要加载图表。所以在标签显示的事件中，我正在快速加载图表（但只有一次）

于 2013-06-04T18:49:24.853 回答
2

添加class="chart"到选项卡内的所有 highcharts 容器中。

添加这个jQuery代码：

jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () { 
    $( '.chart' ).each(function() { 
        $(this).highcharts().reflow();
    });
})
于 2016-06-03T20:56:23.420 回答
2

我刚刚用以下方法解决了这个问题。使用引导版本 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>
于 2015-09-02T20:40:57.080 回答
2

经过一段时间的寻找，我找到了答案。这让我发疯了，所以我想与大家分享，因为这里没有任何东西对我有用。

将此添加到您的 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/找到解决方案的页面

于 2017-09-06T21:50:27.650 回答
1

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

        $('#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”

我希望对你有用。

于 2018-07-02T17:50:57.580 回答
0

所以这有点老了，但对于任何偶然发现这一点的人来说，我遇到了类似的问题，即在引导选项卡式显示中，highchart 大小不正确。我想出的解决方案是使用 setTimeout() 将创建图表的时间延迟 100 毫秒。

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

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

于 2017-04-06T11:53:38.127 回答
0

我有 2 个标签，遇到了同样的问题。我只更改了 Druska 的 2 行代码，它起作用了。

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

});

}

并向您的 HTML 选项卡代码添加一个 onclick 事件，如下所示：

   <input type="radio" id="tab1_1" checked  onclick="anyname();" >
于 2019-05-07T01:16:38.547 回答