完全隐藏 chart.js 中的空条

Completely hide empty bars in chart.js

在我的Chart.js条形图中,每个标签有大约 6 个数据集。 其中一些数据集的值为“0”。 这会导致 x 轴上出现空白,请参阅:

我想删除这些空白。我应该怎么做?

从数据库中呈现我的代码后,它看起来像这样。请注意,为了简单起见,我已经大大减少了代码,因此它只包含两年。上图只有一年

const labels = [2019, 2020];

const data = {
    labels: labels,
    datasets: [{
        label: 'Dataset 1',
        data: ['0','0']
    },
    {
        label: 'Dataset 2',
        data: ['0', '300']
    },
    {
        label: 'Dataset 3',
        data: ['0','360']
    },
    {
        label: 'Dataset 4',
        data: ['0','0']
    },
    {
        label: 'Dataset 5',
        data: ['0','0'],
    },
    {
        label: 'Dataset 6',
        data: ['0', '1020']
    }]
};

将“0”替换为“null”没有帮助。我需要包括“0”/“null”,否则所有数据集都会转移到错误的年份。但是,如前所述,我不想松散 space,因为每年的数据集都不同,接下来会有更多的数据集!

我应该以不同的样式呈现数据集吗?我应该使用插件来隐藏这些空白点吗?

非常感谢!

我在这里问了同样的问题:

How to prevent empty bars from taking up width in Chart.js bar chart

如果你的问题和我的一样,你需要添加skipNull到你的数据集。