Bootstrap 4手风琴卡的C3图形溢出答案

【问题标题】：C3 graph overflow from Bootstrap 4 accordion cardBootstrap 4手风琴卡的C3图形溢出
【发布时间】：2018-06-10 21:30:00
【问题描述】：

我正在尝试将 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>

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-4 c3.js

【解决方案1】：

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

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

这种方法的缺点是更新不是很流畅，你可以看到图表大小在折叠时跳跃。

【讨论】：