我正在使用twitter标签引导程序。每个选项卡内有多个选项卡和图表。在浏览器调整大小时，不在当前活动选项卡上的图表不会调整大小。事实上，它看起来很有趣，用一根细条。当前活动选项卡正常工作。有没有人看到这个问题，并有任何解决方法？
解决方案下面是一个可行的例子：
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:
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不会调整标签中的图表大小
发布评论