Highcharts不能在选项卡中自动调整图表大小。

Question

我正在使用带选项卡的 Twitter Bootstrap。 我有多个选项卡和每个选项卡中的图表。 在浏览器调整大小时，未在当前活动选项卡中的图表不会被调整大小。 实际上，它看起来很有趣，有一条细细的线。 当前活动选项卡运行正常。 有人遇到过这个问题吗？有没有解决方法？

- user428900

---

你能重新复现这个问题吗？也许可以用jsFiddle演示一下？ - Paweł Fus

可能是重复问题 https://dev59.com/R2025IYBdhLWcg3w_a-r - Ricardo Alvaro Lohmann

你能解决这个问题吗？调用highcharts的resize函数是可能的吗？ - thegreyspot

是的，您可以使用 setSize() 函数。http://api.highcharts.com/highcharts#Chart.setSize() - Sebastian Bochan

我的解决方案 https://dev59.com/NmQm5IYBdhLWcg3w-S2Y#23267110 - ryenus

metaColin的回答需要标记为正确答案。 - M H

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

- metaColin

---

这是一个很棒的可重用解决方案，应该是答案。 - M H

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

当图表获得焦点时，请调用此函数以确保它被正确地调整大小。

- Druska

---

如果你正在使用jQuery，我相信$(window).trigger('resize');也会有同样的效果。 - HelloWorld

不，这段代码的目的就是如此。虽然他们可能在较新版本的Highcharts中修复了这个问题。 - Druska

Answer 3

我花了一些时间找到了答案。这让我疯狂，所以我想与大家分享，因为这里的任何方法都对我没用。

将以下内容添加到您的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/

- e11world

Answer 4

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

添加以下jQuery代码：

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

- user2511140

Answer 5

我曾经遇到过类似的问题，后来发现最好的方法是直到选项卡显示时再加载图表。所以在选项卡显示事件中，我会快速加载图表（但仅加载一次）。

- Maccurt

Answer 6

我刚刚使用以下方法解决了这个问题。使用的是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>

- ODelibalta

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

我希望它能够起作用。

- Alan

Answer 8

我有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();" >

- Shuxin Jin

Answer 9

所以这个问题有点老了，但对于任何遇到此类问题的人来说，我在使用Bootstrap选项卡显示高级图表大小时也遇到过类似的问题。最终我想到的解决方案是仅仅延迟100毫秒（使用setTimeout()函数）来创建图表。

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

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

- Brett Romero