Chart.js折线图右侧次Y轴（MinutesofUsage）不显示问题求助

你的问题出在Chart.js版本的语法差异上——如果使用的是v3及以上版本，坐标轴配置不再使用数组格式，而是直接将每个轴作为scales的属性。你当前的代码用了v2的数组写法，导致position: 'right'不生效。

修改步骤： #

1. 重构scales配置，移除x、y轴的数组包裹，直接定义每个坐标轴
2. 修正字体颜色属性：v3+中用color替代v2的fontColor
3. 确保每个y轴的id和数据集的yAxisID对应

修改后的完整options代码： #

options: {
    responsive: true,
    layout: {
        padding: {
            left: 5,
            right: 5
        }
    },
    scales: {
        x: {
            type: 'time',
            time: {
                unit: 'day'
            },
            title: {
                display: true,
                text: 'Date'
            }
        },
        'revenue-axis': {
            id: 'revenue-axis',
            position: 'left',
            title: {
                display: true,
                text: 'Total Revenue',
                color: 'blue'
            },
            ticks: {
                color: 'blue'
            }
        },
        'minutes-axis': {
            id: 'minutes-axis',
            position: 'right',
            title: {
                display: true,
                text: 'Minutes Usage',
                color: 'green'
            },
            ticks: {
                color: 'green'
            },
            // 可选：避免两个y轴刻度重叠，设置独立的网格线
            grid: {
                drawOnChartArea: false
            }
        }
    },
    plugins: {
        datalabels: {
            display: 'auto',
            color: 'black',
        }
    }
}

关键说明： #

• v3+的scales结构是扁平的，每个轴通过唯一id作为键名，不再用x[]或y[]数组
• fontColor已废弃，改用color设置文本颜色
• 可选添加grid.drawOnChartArea: false给右侧轴，避免网格线和左侧轴重叠，提升可读性

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