2

Twitter ブートストラップ ナビゲーション タブを使用して、グラフごとに 1 つのページがタブ化されたダッシュボードを作成しています。これらのグラフを生成するために chartkick を使用しています。タブとペアにすると、2 番目の 2 つのタブが 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 番目のタブの出力です。何らかの理由でグラフが縮小されていることがわかります。][2]

![これは 3 番目のタブの出力です。何らかの理由でグラフが縮小されていることがわかります。][3]

ご覧のとおり、これはダッシュボードを作成しようとすると非常に不便ですが、修正方法がわかりません。

タブ ページとは別に 2 番目と 3 番目のグラフをテストしましたが、タブの一部でない場合は正常に動作します。

レスポンシブタブを追加しようとしましたが、それも機能しません。

グラフにタブ付きページを使用しないようにする必要はありませんが、これを機能させることができない場合は使用します。

4

1 に答える 1

0

問題は div にあり、タブが実際には分割のサブ分割であり、利用可能なボックスの合計サイズであることが判明しました。最終的に、各グラフを独自のページに配置しました。

于 2015-05-20T15:54:09.780 に答える