Chart.js 3.8版本如何实现Y轴ticks文本居中对齐

方案一：内置配置实现（无侵入，推荐） #

你查阅的公开样式文档没有列全所有布局相关配置，3.8版本可以直接通过轴刻度的内置对齐参数实现效果，不需要修改框架源码：

options: {
  scales: {
    y: {
      ticks: {
        // Y轴为纵向轴，crossAlign控制垂直于轴方向（即水平方向）的对齐，center为居中
        crossAlign: 'center',
        // align控制沿轴方向（即垂直方向）标签和刻度线的对齐，center为居中对齐
        align: 'center',
        // 按需调整padding，避免文本贴到轴线上
        padding: 8
      }
    }
  }
}

配置后效果和预期一致：

• 默认效果：
• 居中效果：

如果位置有细微偏差，调整ticks.padding的数值即可，数值越大标签离Y轴线越远。

方案二：自定义插件重绘（适配高度自定义场景） #

如果内置配置满足不了特殊的位置要求，可以通过自定义插件直接接管Y轴刻度文本的绘制逻辑，完全控制坐标位置：

// 自定义Y轴刻度居中插件
const yTickCenterPlugin = {
  id: 'yTickCenter',
  afterDraw(chart) {
    const yScale = chart.scales.y;
    const ctx = chart.ctx;
    ctx.save();
    // 设置文本对齐基线
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    // 遍历所有刻度重绘文本
    yScale.ticks.forEach((tick, idx) => {
      // X坐标取Y轴标签区域的水平中点
      const x = yScale.left + (yScale.width / 2);
      // Y坐标取对应刻度的纵向位置
      const y = yScale.getPixelForTick(idx);
      // 清空原有标签避免重影
      ctx.clearRect(yScale.left, y - 8, yScale.width, 16);
      ctx.fillText(tick.label, x, y);
    })
    ctx.restore();
  }
}

// 使用时在图表配置中注册插件
new Chart(ctx, {
  type: 'bar', // 所有图表类型通用
  data: yourData,
  options: {
    // 启用插件
    plugins: {
      yTickCenter: true
    }
  },
  plugins: [yTickCenterPlugin]
})

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