Chart.js使用字典格式数据时如何配置双Y轴完成图表渲染

问题复现 #

• 开发场景：Flask 后端传递数据，前端用 Chart.js 实现左右双Y轴混合图表，折线序列使用左侧刻度、柱状序列使用右侧独立刻度
• 异常表现：此前用数组格式存储数据时双Y轴功能正常，改用字典（对象）格式存储数据点后配置失效：两个序列共用同一条Y轴刻度，折线序列无法正常显示
• 现有配置逻辑：
  • 折线数据集：类型为line，设置yAxisID: 'y'，数据点格式为{x: 时间值, y: 折线指标值}
  • 柱状数据集：类型为bar，设置yAxisID: 'z'，数据点格式为{x: 时间值, z: 柱状指标值}
  • scales 节点已分别声明id为y、z的两个线性Y轴，以及时间类型X轴

故障根因 #

两个关键配置缺失导致逻辑不生效：

1. 自定义数据字段未声明解析规则：Chart.js 解析对象格式的数据点时，默认只会读取y字段作为纵轴数值，不会自动匹配yAxisID去读取同名字段。柱状数据集把值存在z字段但没做映射声明，框架读不到有效数值就会 fallback 到默认Y轴渲染，直接导致轴绑定失效。
2. Y轴位置未显式声明：目前主流CDN引入的Chart.js v3/v4版本中，scales采用对象结构定义，Y轴如果不手动指定position属性，会默认全部挂载在图表左侧，视觉上呈现为两个序列共用刻度的效果。

修复步骤 #

1. 给自定义字段的数据集加解析映射 #

在绑定z轴的柱状数据集内新增parsing配置，明确指定字段和轴的映射关系：

const lineDataset = {
  type: 'line',
  label: '折线指标',
  data: lineDataList, // 原有{x, y}格式数据
  yAxisID: 'y',
  // 折线用默认y字段存值，不需要额外配置parsing
  // 其余样式配置按原有逻辑保留
}

const barDataset = {
  type: 'bar',
  label: '柱状指标',
  data: barDataList, // 原有{x, z}格式数据
  yAxisID: 'z',
  // 新增以下解析配置
  parsing: {
    xAxisKey: 'x',
    yAxisKey: 'z'
  },
  // 其余样式配置按原有逻辑保留
}

2. 修正scales节点的轴配置 #

显式声明每个轴的类型、挂载位置，避免轴叠加：

const chart = new Chart(ctx, {
  data: {
    datasets: [lineDataset, barDataset]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        // 时间轴原有配置（比如时间格式、刻度间隔）保留
      },
      y: {
        type: 'linear',
        position: 'left', // 显式指定挂载在左侧
        // 左侧轴原有配置（比如刻度范围、轴标题）保留
      },
      z: {
        type: 'linear',
        position: 'right', // 显式指定挂载在右侧
        grid: {
          drawOnChartArea: false // 可选配置：隐藏右侧轴网格线，避免和左侧网格重叠干扰阅读
        },
        // 右侧轴原有配置（比如刻度范围、轴标题）保留
      }
    }
  }
})

提示：使用时间类型X轴时，需提前引入对应日期适配器，否则时间轴会报错无法渲染。

3. 有效性校验 #

配置改完后可在控制台打印chart.scales，确认存在y、z两个Y轴节点，且position属性分别为left、right；再打印两个数据集的_parsed属性，确认每个数据点都能读到对应的有效数值，无null/undefined即可正常渲染。 #

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