完全隐藏 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
到你的数据集。
在我的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
到你的数据集。