ブートストラップ4アコーディオンカードからC3グラフがオーバーフローする

Question

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

私はカードの拡大に再描画するために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> 

Answer 1

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