如何为Chart.js图表的X轴与Y轴添加轴标签？

要给X轴和Y轴添加标签，只需在options.scales对应的轴配置中加入title配置项即可。以下是整合了轴标签功能的完整代码，同时修正了你代码中backgroundColor的格式错误（原写法'blue, 0.2'不符合Chart.js的颜色规范，需改为rgba格式）：

const ctx = document.getElementById('chart').getContext('2d');
window.myChart = new Chart(ctx,{ 
    type: 'line',
    data: {
        labels: arrayTheta,
        datasets: [{
            //label: graphLabels,
            data: arrayRangeArray[0],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            pointRadius: 0,
            tension: 0.4
        },
        {
          //label: graphLabels,
          data: arrayRangeArray[1],
          backgroundColor: 'rgba(0, 0, 255, 0.2)', // 修正颜色格式
          borderColor: 'blue',
          pointRadius: 0,
          tension: 0.4
        },
        {
          //label: graphLabels,
          data: arrayRangeArray[2],
          backgroundColor: 'rgba(255, 192, 203, 0.2)', // 修正颜色格式
          borderColor: 'pink',
          pointRadius: 0,
          tension: 0.4
        },
        {
          //label: graphLabels,
          data: arrayRangeArray[3],
          backgroundColor: 'rgba(255, 165, 0, 0.2)', // 修正颜色格式
          borderColor: 'orange',
          pointRadius: 0,
          tension: 0.4
        },
        {
          //label: graphLabels,
          data: arrayRangeArray[4],
          backgroundColor: 'rgba(255, 255, 0, 0.2)', // 修正颜色格式
          borderColor: 'yellow',
          pointRadius: 0,
          tension: 0.4
        },
        {
          //label: graphLabels,
          data: arrayRangeArray[5],
          backgroundColor: 'rgba(0, 0, 0, 0.2)', // 修正颜色格式
          borderColor: 'black',
          pointRadius: 0,
          tension: 0.4
        }],
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                // 添加Y轴标签配置
                title: {
                    display: true,
                    text: 'Y轴标签' // 替换为你需要的标签文本
                }
            },
            x: {
                display: true,
                type: 'linear',
                // 添加X轴标签配置
                title: {
                    display: true,
                    text: 'X轴标签' // 替换为你需要的标签文本
                }
            }
        }
    }
});

关键修改说明 #

• 在options.scales.y和options.scales.x中分别添加title对象，通过display: true开启标签显示，text字段设置轴标签的具体内容
• 修正了所有backgroundColor的格式错误，Chart.js要求半透明颜色必须使用rgba(r,g,b,alpha)格式才能正常生效

内容的提问来源于stack exchange，提问作者Abinesh.co