Question

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

$(".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

chartist.js：第一个标签中图表的大小太小

1 个答案: