显示后隐藏的元素未正确加载

Question

我有一个标签式切换统计页面,其中有10个单独的选项卡,其中包含图表.通过单击每个选项卡,将显示预加载的相应图表.但是,它不会扩展到其容器中.更奇怪的是,当我调整窗口大小时,可见图表显示正确(我想它会做一些重新计算).我应该如何修改我的代码,以便在点击之后进行重新计算,或者对问题提出任何建议？

这是我的jsfiddle:http: //jsfiddle.net/g66ut7c6/

<!--BEGIN TABS-->
               <div class="tabbable tabbable-custom">
                  <ul class="nav nav-tabs">
                     <li>
                        <a href="#tab_1_1" data-toggle="tab">
                        1
                        </a>
                     </li>
                     <li>
                        <a href="#tab_1_2" data-toggle="tab">
                        2
                        </a>
                     </li>
                     <li>
                        <a href="#tab_1_3" data-toggle="tab">
                        3
                        </a>
                     </li>
                  </ul>
                  <div class="tab-content">
                     <div class="tab-pane" id="tab_1_1">
                        <div class="scroller">
                           <div class="col-md-6 col-md-offset-3">
                              <div class="portlet light">
                                 <p> Piechart by ülkeler </p>

                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab_1_2">
                        <div class="scroller">
                           <div class="col-md-6 col-md-offset-3">
                              <div class="portlet light">
                                 <p> Piechart by step da??l?m? </p>

                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="tab-pane" id="tab_1_3">
                        <div class="scroller">
                           <div class="col-md-6 col-md-offset-3">
                              <div class="portlet light">
                                 <p> Piechart by hasta say?s? ay </p>

                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!--END TABS-->

在调整大小之前

调整大小后,大小合适

我无法在我的jsfiddle中包含图表,因为它们包含一些ruby代码.

PS:使用Chartkick和Google Charts绘制图表,使用MetronicJS绘制标签.

编辑:默认情况下可见的第一个图表最初是正确显示的,但其他图表则不是.调整窗口大小后,当另一个图表可见时,前一个图表再次被破坏.

Answer 1

您可以通过编程方式触发“调整大小”事件：

window.dispatchEvent(new Event('resize'));

只需将其附加到显示选项卡的“单击”事件即可。

在你的情况下：

$('div.tabbable > ul > li > a').click( function() {
    window.dispatchEvent(new Event('resize'));
});

如果您的组件没有根据事件调整大小，您实际上可以使用以下方法调整窗口大小：

window.resizeTo(width, height);

更新：

如果无法调整窗口大小（请参阅注释），您可以尝试在选项卡可见时重新绘制图表。也许通过这种方式，图表能够正确计算它需要适合的尺寸。比如：

$( 'div.tabbable > ul > li > a' ).click( function() {
    myChart.draw( myData );
});

希望能帮助到你！