Chart.js 4.x+ 版本中，双 Y 轴不显示的根本原因是 scales 配置结构错误：x 和 y 不再支持数组形式，而需为每个轴定义唯一 ID 的独立对象（如 revenueAxis、minutesAxis），且必须在 dataset 中通过 yAxisID 显式绑定。
chart.js 4.x+ 版本中，双 y 轴不显示的根本原因是 scales 配置结构错误：x 和 y 不再支持数组形式，而需为每个轴定义唯一 id 的独立对象（如 `revenueaxis`、`minutesaxis`），且必须在 dataset 中通过 `yaxisid` 显式绑定。
在 Chart.js v3 及更高版本（包括 v4）中，scales 配置已从数组式语法（v2）彻底改为键值对对象结构。你当前代码中将 scales.x 和 scales.y 写成数组（如 scales: { x: [{...}], y: [{...}, {...}] }）是 v2 的写法，在 v3+ 中会被完全忽略，导致次坐标轴（右侧 Minutes Usage 轴）无法渲染。
✅ 正确配置要点如下：
- scales 下直接定义命名轴对象（非 x/y 数组），ID 必须与 dataset 中 yAxisID 完全一致；
- 每个轴需显式指定 type（如 'linear'），否则默认为 'linear' 但部分场景下可能失效；
- position: 'right' 必须设置在对应轴对象内（如 minutesAxis），而非嵌套在 y 数组中；
- 移除所有数组包装 —— scales.x 应为单个对象，scales.y 已被废弃，取而代之的是自定义轴 ID（如 revenueAxis, minutesAxis）。
以下是修正后的核心配置片段（适配你的业务逻辑）：
new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Minutes Usage',
data: minutesUsage,
borderColor: 'green',
borderWidth: 2,
fill: false,
yAxisID: 'minutesAxis' // ← 匹配 scales 下的键名
},
{
label: 'Total Revenue',
data: revenues,
borderColor: 'blue',
borderWidth: 2,
fill: false,
yAxisID: 'revenueAxis' // ← 匹配 scales 下的键名
}
]
},
options: {
responsive: true,
layout: {
padding: { left: 5, right: 5 }
},
scales: {
// ✅ X 轴：单个对象，非数组
x: {
type: 'time',
time: { unit: 'day' },
title: { display: true, text: 'Date' }
},
// ✅ 自定义 Y 轴 1：左侧收入轴
revenueAxis: {
type: 'linear',
position: 'left',
title: { display: true, text: 'Total Revenue', color: 'blue' },
ticks: { color: 'blue' }
},
// ✅ 自定义 Y 轴 2：右侧使用时长轴
minutesAxis: {
type: 'linear',
position: 'right',
title: { display: true, text: 'Minutes Usage', color: 'green' },
ticks: { color: 'green' }
}
},
plugins: {
datalabels: {
display: 'auto',
color: 'black'
}
}
}
});
⚠️ 注意事项：
- 确保你使用的 Chart.js 版本 ≥ 3.0（推荐 v4.x）。可通过 <script> 标签中的 URL 或 console.log(Chart.version) 验证；</script>
- 若仍不显示，请检查浏览器控制台是否有 Unknown axis type 或 Invalid scale configuration 报错 —— 多因 yAxisID 拼写不一致或 scales 键名未正确声明；
- 时间轴（type: 'time'）需引入 moment.js 或 date-fns（Chart.js v3+ 默认依赖 luxon，建议显式引入以避免兼容问题）；
- 动态创建多个图表时，确保每个
总结：Chart.js 双 Y 轴失效不是样式或数据问题，而是配置范式升级导致的结构性错误。摒弃 v2 的数组式 scales.y，改用语义化命名轴 + 显式 yAxisID 绑定，即可稳定启用左右双轴布局。
