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

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

更新：

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

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

希望对你有帮助！