2

我正在使用 Twitter 引导导航选项卡来创建一个仪表板，其中每个图表的单个页面都是选项卡。我正在使用 chartkick 来生成这些图表。当我将它与选项卡配对时，后两个选项卡会调整 chartkick 图形的大小并使其无法使用。

<div>
  <ul class="nav nav-tabs responsive" id="myTab">
        <li id="10" class="active"><a data-toggle="tab" href="#I">Need By Monthly Breakout</a></li>
        <li id="11"><a data-toggle="tab" href="#J">Model Quantities Breakout</a></li>
        <li id="12"><a data-toggle="tab" href="#K">Monthly Quantities Breakout</a></li>
  </ul>
</div>
<div class="tab-content responsive">
  <div class="tab-pane fade in active" id="I">
    <%= render partial: 'orderschart_a' %>
  </div>  
  <div class="tab-pane fade in" id="J">
    <%= render partial: 'orderschart_b' %>
  </div>
  <div class="tab-pane fade in" id="K">
    <%= render partial: 'orderschart_c' %>
  </div>
</div>

![这是第一个选项卡的输出，看起来很正常。][1]

![这是第二个选项卡的输出，你可以看到它出于某种原因压缩了图形。][2]

![这是第三个选项卡的输出，你可以看到它出于某种原因压缩了图形。][3]

如您所见，这在尝试制作仪表板时非常不方便，但我不知道如何解决它。

我已经测试了独立于选项卡页面的第二个和第三个图表，它们在不属于选项卡的情况下工作正常。

我试过添加响应式标签，但我也无法让它工作。

我真的不想为我的图表使用标签页，但如果我不能让它工作，我会的。

4

1 回答 1

0

原来问题出在 div 和选项卡实际上是分区的细分和总可用框大小的方式上。我最终将每个图表放在自己的页面上。

于 2015-05-20T15:54:09.780 回答