我正在使用带有选项卡的 Twitter Bootstrap。我有多个选项卡和每个选项卡内的图表。调整浏览器大小后,不在当前活动选项卡上的图表不会调整大小。事实上,它看起来很有趣,有一个细条。当前活动选项卡工作正常。有谁见过这个问题并且有任何解决方法吗?
这是一个工作示例:
http://codepen.io/colinsteinmann/pen/BlGfE 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
});
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)