ChartJS能否为次Y轴设置十进制偏移且保持双Y轴刻度比例一致

你可以通过声明固定偏移量、同步双轴步长、配合刻度回调的方式实现需求，无需手动定义所有刻度，核心逻辑如下：

• 左侧Y轴按业务需求配置整数范围、整数步长，网格线跟随左侧轴生成
• 右侧Y轴关闭独立网格线，范围设置为左侧范围减去固定偏移量，步长和左侧保持一致
• 两侧轴通过ticks.callback过滤仅显示整数刻度即可

可参考如下实现代码：

// 仅需修改这几个配置项即可适配不同场景
const Y_OFFSET = 11.74; // 左侧轴偏移值
const Y1_MIN = 0; // 左侧轴最小刻度（整数）
const Y1_MAX = 15; // 左侧轴最大刻度（整数）
const Y1_STEP = 1; // 左侧轴刻度步长（整数）

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [
      // 绑定左侧Y轴的数据集（带11.74m偏移）
      {
        yAxisID: 'y-left',
        data: [11.74, 11.84, 12.24, 16.74, 15.24, 14.74, 14.99, 13.74, 13.24, 12.74]
      },
      // 绑定右侧Y轴的数据集（无偏移）
      {
        yAxisID: 'y-right',
        data: [0, 0.1, 0.5, 5, 3.5, 3, 3.25, 2, 1.5, 1]
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          id: 'y-left',
          position: 'left',
          ticks: {
            min: Y1_MIN,
            max: Y1_MAX,
            stepSize: Y1_STEP,
            callback: function(value) {
              // 仅显示整数刻度
              return Number.isInteger(value) ? value : null;
            }
          }
        },
        {
          id: 'y-right',
          position: 'right',
          gridLines: {
            drawOnChartArea: false // 关闭右侧网格线，复用左侧网格线
          },
          ticks: {
            min: Y1_MIN - Y_OFFSET,
            max: Y1_MAX - Y_OFFSET,
            stepSize: Y1_STEP,
            callback: function(value) {
              // 仅显示整数刻度
              return Number.isInteger(value) ? value : null;
            }
          }
        }
      ]
    }
  }
});

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