Bootstrap 标签和 C3 图表不合

Question

我正在使用 Bootstrap 导航选项卡，每个选项卡中都有一个图表。无论在导航到主页时加载哪个选项卡，它都显示得非常好。但是，其他图表都与这些页面上的其他内容重叠，例如：

我不知道如何让它始终正确显示，无论哪个 bootstrap 选项卡处于活动状态。

我查看了这篇文章 - C3 chart sizing is too big when initially loaded - 它提到有时使用 Bootstrap 选项卡等时 c3 图表显示不正确。建议的修复是使用 jQuery(window).trigger('resize');。但是，我尝试在控制台中执行此操作，但它没有为我修复选项卡。

知道如何解决这个问题吗？如果我只是点击里面的 开发人员控制台，然后返回网页，图表会正确调整自身大小并调整其 width 和 x 值以适应它应该显示的 div。

这是用于生成图表的脚本：

var chart = c3.generate({
    bindto: '#opened-ports-chart',
    data: {
        columns: <%= @data %>,
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    legend: {
        position: "right"
    }
});

Answer 1

通过在 Bootstrap 选项卡更改时调整图表大小解决了这个问题：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  chart.resize();
});

Answer 2

对我来说，只有调整大小事件是不够的，我不得不从 window 调用调整大小事件。

首先css，因为我使用display:grid来划分行，与使用col-x

相同

.c3 svg {
    width: 100%;
    height: 100%;
 }

然后：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
    }, 100);
});

Bootstrap 标签和 C3 图表不合

Bootstrap tabs and C3 charts not getting along

javascript

jquery

html

css

c3.js