2017-12-31 101 views
3

ブートストラップアコーディオンコンポーネントにc3グラフを挿入しようとしています。アクティブなカードのグラフはよく見えますが、展開するとカード2の右端がカードの端になります。ブートストラップ4アコーディオンカードからC3グラフがオーバーフローする

enter image description here

私はカードの拡大に再描画するためにC3に渡す必要がある更新イベントはありますか?このアプローチの

 $('#accordion').on('shown.bs.collapse', function (e) { 
      chart1.flush(); 
      chart2.flush(); 
     }) 

欠点は更新はそれほど滑らかではないということです

JSFiddle

<div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
      <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
       Card 2 
      </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> 
     <div class="card-body pl-0"> 
      <div id="chart2"></div> 
     </div> 
    </div> 
</div> 

答えて

0

一つの可能​​な解決策が崩壊要素を示す上でチャートをフラッシュすることで、あなたはグラフのサイズを確認することができます崩壊時に飛び降りる

関連する問題