Chart.js柱状图显示异常，如何按年份正确展示所有柱子？

我将以下Chart.js配置作为负载从外部应用发送至Node.js服务器，由服务器渲染为图片，但柱状图无法按年份正常展示所有柱子，当前显示效果如下：

配置代码：

var configuration = {
        type: 'bar',
        data: {
            labels: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],
            datasets: [{
                label: "2019",
                backgroundColor: "#E23D16",
                data: [Math.random() * 100],
            }, {
                label: "2020",
                backgroundColor: "#BF9810",
                data: [Math.random() * 100],
            }, {
                label: "2021",
                backgroundColor: "#C18D11",
                data: [Math.random() * 100],
            }, {
                label: "2022",
                backgroundColor: "#088B64",
                data: [Math.random() * 100],
            }, {
                label: "2023",
                backgroundColor: "#0F428D",
                data: [Math.random() * 100],
            }, {
                label: "2024",
                backgroundColor: "#AB290D",
                data: [Math.random() * 100],
            }, {
                label: "2025",
                backgroundColor: "#0F428D",
                data: [Math.random() * 100],
            }
            ]
        },
        options: {
            interaction: {
                intersect: true,
                mode: 'nearest'
            },
            indexAxis: 'x',
            //maintainAspectRatio: false,
            legend: { display: true, position: 'right' },
            title: { display: true, text: "" },
            plugins: {
                legend: {
                    display: true,
                    position: 'right'
                },
                tooltip: {
                    callbacks: {
                        title: () => null
                    }
                },
                datalabels: {
                    display: true,
                    color: "white",
                    labels: {
                        title: { color: "white", font: { weight: "bold" } },
                        value: { color: "white" }
                    },
                    formatter: (value) => {
                        return value + '%';
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    scaleLabel: {
                        labelString: 'Month'
                    },
                    ticks: {
                        format: {
                            style: 'percent'
                        }
                    }
                },

            }
        }
    }

问题原因 #

每个数据集的data数组仅包含一个数值，Chart.js会将所有数据集的这个数值映射到**第一个x轴标签（2019）**上，导致所有柱子重叠显示，无法对应到各自的年份。

修改方案 #

调整每个数据集的data数组长度与labels数组一致，仅在对应年份的位置填入数值，其余位置设为null（或0），确保每个柱子对应到正确的年份标签：

修改后的配置代码（重点修改datasets中的data字段）：

var configuration = {
        type: 'bar',
        data: {
            labels: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],
            datasets: [{
                label: "2019",
                backgroundColor: "#E23D16",
                data: [Math.random() * 100, null, null, null, null, null, null],
            }, {
                label: "2020",
                backgroundColor: "#BF9810",
                data: [null, Math.random() * 100, null, null, null, null, null],
            }, {
                label: "2021",
                backgroundColor: "#C18D11",
                data: [null, null, Math.random() * 100, null, null, null, null],
            }, {
                label: "2022",
                backgroundColor: "#088B64",
                data: [null, null, null, Math.random() * 100, null, null, null],
            }, {
                label: "2023",
                backgroundColor: "#0F428D",
                data: [null, null, null, null, Math.random() * 100, null, null],
            }, {
                label: "2024",
                backgroundColor: "#AB290D",
                data: [null, null, null, null, null, Math.random() * 100, null],
            }, {
                label: "2025",
                backgroundColor: "#0F428D",
                data: [null, null, null, null, null, null, Math.random() * 100],
            }
            ]
        },
        options: {
            interaction: {
                intersect: true,
                mode: 'nearest'
            },
            indexAxis: 'x',
            //maintainAspectRatio: false,
            legend: { display: true, position: 'right' },
            title: { display: true, text: "" },
            plugins: {
                legend: {
                    display: true,
                    position: 'right'
                },
                tooltip: {
                    callbacks: {
                        title: () => null
                    }
                },
                datalabels: {
                    display: true,
                    color: "white",
                    labels: {
                        title: { color: "white", font: { weight: "bold" } },
                        value: { color: "white" }
                    },
                    formatter: (value) => {
                        return value + '%';
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    scaleLabel: {
                        labelString: 'Month'
                    },
                    ticks: {
                        format: {
                            style: 'percent'
                        }
                    }
                },

            }
        }
    }

补充说明 #

如果你的需求是每个年份对应一个独立柱子，也可以简化为单个数据集，将所有年份的数值按顺序放入data数组，这样代码更简洁：

datasets: [{
    label: "年度数据",
    backgroundColor: ["#E23D16", "#BF9810", "#C18D11", "#088B64", "#0F428D", "#AB290D", "#0F428D"],
    data: [Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100],
}]

内容的提问来源于stack exchange，提问作者learningmode