来自Bootstrap 4手风琴卡的C3图形溢出

Question

我正在尝试将c3图插入Bootstrap手风琴组件中。在活动卡片图表上看起来不错，但如果展开卡片2 图表的右边缘会越过卡片边缘。

是否有更新事件我需要传递给c3以重新呈现卡片的扩展？

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

一种可能的解决方案是在显示折叠元素时刷新图表

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

这种方法的缺点是更新不是那么顺利，你可以看到图表大小在崩溃时跳跃。