Highcharts不会调整标签中的图表大小 [英] Highcharts does not resize charts inside tabs

问题描述

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

解决方案

下面是一个可行的例子：

http://codepen.io/colinsteinmann/pen/BlGfE

基本上单击选项卡时，每个图表上都会调用.reflow（）函数。这样，图表就会根据应用于容器的新维度重新绘制。

这是最重要的代码片段：

  //修复位于隐藏元素中的图表的维数
 jQuery（document）.on（'shown.bs.tab' ，'a [data-toggle =tab]'，function（e）{//选项卡选择事件
 jQuery（.contains-chart）.each（function（）{// target each element与.contains-chart类
 var chart = jQuery（this）.highcharts（）; //将图表本身作为目标
 chart.reflow（）//重新绘制图表
}）; 
}）
  

I am using twitter bootstrap with tabs. I have multiple tabs and charts inside each tab. Upon browser resize, charts that are not on the current active tab do not get resized. Infact, it looks kind of funny with a thin bar. The current active tab works fine. Has anyone seen this issue and are there any workarounds ?

解决方案

Here is a working example:

http://codepen.io/colinsteinmann/pen/BlGfE

Basically the .reflow() function is called on each chart when a tab is clicked. That way the chart gets redrawn based on the new dimensions which are applied to the container when it becomes visible.

This is the most important snippet of code:

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

这篇关于Highcharts不会调整标签中的图表大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！