Chart.js：副Y轴刻度如何引用主Y轴最大值进行配置

当然有办法实现这个需求！不用依赖隐藏数据集，我们可以利用Chart.js的钩子函数或者动态更新配置来达成目标，下面给你两种实用方案：

方案一：使用afterDataLimits钩子（推荐，适配动态数据） #

这个钩子会在Chart计算完坐标轴的数据范围之后触发，此时主Y轴的最大值已经确定，我们可以直接在副Y轴的配置里引用它：

scales: {
  yAxes: [
    { 
      id: 'y-primary', 
      display: true, 
      ticks: { beginAtZero: true } 
    },
    { 
      id: 'y-secondary', 
      display: true, 
      ticks: { beginAtZero: true }, 
      position: 'right',
      // 利用afterDataLimits钩子获取主Y轴最大值
      afterDataLimits: function(axis) {
        const primaryAxis = this.chart.scales['y-primary'];
        // 将副Y轴的suggestedMax设置为主Y轴的实际最大值
        axis.suggestedMax = primaryAxis.max;
      }
    }
  ]
}

为什么推荐这个方案？
如果你的数据是动态更新的，这个钩子会在每次数据变化后自动重新计算主Y轴的最大值，并同步更新副Y轴，完全不需要额外的手动操作，适配性很强。

方案二：初始化后动态配置（适合静态数据或外部逻辑控制） #

如果你的数据是固定的，或者需要在外部逻辑里手动控制轴的配置，可以在图表初始化完成后，直接获取主Y轴的最大值并设置给副Y轴：

// 初始化你的图表
const myChart = new Chart(document.getElementById('yourChartId'), {
  type: 'bar', // 根据你的需求替换图表类型
  data: {
    // 你的数据集配置
    datasets: [
      { yAxisID: 'y-primary', /* 主Y轴数据集配置 */ },
      { yAxisID: 'y-secondary', /* 副Y轴数据集配置 */ }
    ]
  },
  options: {
    scales: {
      yAxes: [
        { id: 'y-primary', display: true, ticks: { beginAtZero: true } },
        { id: 'y-secondary', display: true, ticks: { beginAtZero: true }, position: 'right' }
      ]
    }
  }
});

// 渲染完成后获取主Y轴最大值并更新副Y轴
myChart.render();
const primaryYMax = myChart.scales['y-primary'].max;
myChart.options.scales.yAxes.find(axis => axis.id === 'y-secondary').suggestedMax = primaryYMax;
myChart.update();

注意事项：如果后续有数据更新，你需要重复执行上述获取最大值、更新配置、调用update()的步骤，才能保证副Y轴的范围和主Y轴同步。

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