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

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

希望对您有所帮助!