多Y轴Chart.js图表问题：双数据集共用大刻度，如何指定第二轴刻度？

你的问题核心是未给第二个数据集指定关联的Y轴ID，Chart.js默认会将未绑定轴的数据集挂载到第一个Y轴上。以下是具体修正方案：

关键修改步骤 #

1. 给每个Y轴定义唯一id

options: {
  scales: {
    y: {
      id: 'y-axis-left',
      type: 'linear',
      position: 'left',
      // 你的左侧轴刻度、样式配置
    },
    yRight: {
      id: 'y-axis-right',
      type: 'linear',
      position: 'right',
      grid: {
        drawOnChartArea: false // 关闭右侧轴网格，避免重叠
      },
      // 你的右侧轴刻度、样式配置
    }
  }
}

2. 给第二个数据集绑定对应Y轴的ID

datasets: [
  {
    label: '主数据集',
    data: [/* 你的数据 */],
    // 可选：默认绑定第一个Y轴，可省略yAxisID
  },
  {
    label: '副数据集',
    data: [/* 你的数据 */],
    yAxisID: 'y-axis-right' // 核心：指定绑定右侧独立Y轴
  }
]

额外注意事项 #

• id和yAxisID必须完全匹配（大小写敏感）
• 如果右侧轴刻度范围不符合预期，可手动设置min/max属性，或开启beginAtZero
• 建议给不同数据集设置区分度高的颜色，方便对应到各自的Y轴

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