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

Question

我有一个页面，其中有两个不同的选项卡布局，其中有 chart.js 个图表。可在此处找到工作示例 Codepen 我面临的问题（正如您在上面提到的笔中注意到的那样）是尽管具有相同的图形选项值，但与其他选项卡相比，第一个选项卡上的图形非常小。我已经尝试过 chart.js github issue 中提到的解决方案，它要求我们像这样更新 click 标签上的图表：

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

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

仅供参考：我在选项卡结构的同一页面中有更多图表（折线图），显示正常。

Answer 1

display:flex 导致了图表问题，只有第一个图表选项卡包含活动的 class，而属性导致了这个问题。真的有这个必要吗，把这个CSS属性注释掉，问题就迎刃而解了。让我知道是否需要属性，然后我们需要努力将 flexbox 调整为全宽！

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

Codepen Demo

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

chartist.js: size of graph in first tab too small

javascript

jquery

chartist.js