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

您可以通过编程方式触发'resize'事件：

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

希望它有所帮助！

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

1 个答案: