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

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

我遇到了类似的问题，我发现最好的办法是在显示选项卡之前不要加载图表。因此，在显示的选项卡事件中，我快速加载图表（但仅一次）