javascript - Chartist.js:第一个选项卡中的图表尺寸太小

Question

我有一个页面，其中有两个不同的选项卡布局，其中包含 Chart.js 图表。可以在此处找到工作示例 Codepen我面临的问题(正如您在上面提到的笔中注意到的那样)是，尽管具有相同的图形选项值，但第一个选项卡上的图形与其他选项卡相比非常小。我已经尝试过 Chart.js github issue 中提到的解决方案它要求我们更新点击选项卡上的图表，如下所示:

$(".tab").find(".ct-chart").each(function(i, e) {
    e.__chartist__.update();
});

但这仅解决了所有选项卡中图表未显示/尺寸太小的总体问题。我也尝试更新文档加载图表，但没有成功。

仅供引用:我在同一页面的选项卡结构中有更多图表(折线图)，显示正常。

Answer 1

display:flex 导致图表出现问题，只有第一个图表选项卡包含事件类，该类具有导致此问题的属性。这真的有必要吗，我们只需注释掉这个 CSS 属性，问题就解决了。如果需要此属性，请告诉我，然后我们需要将 Flexbox 调整为全宽!

.tab.active {
    display:block;
    //display: flex;
    //flex-wrap: wrap;
}

Codepen Demo