如何在Chart.js中单独自定义水平条形图的Y轴标签样式？

在最新版Chart.js中，要实现Y轴特定标签的样式自定义（如加粗、变色），可以通过插件钩子+手动重绘标签的方式实现，以下是完整的可运行方案：

完整代码示例 #

<html>
<head>
  <title>水平条形图自定义Y轴标签</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div style="width: 600px; height: 300px;">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    const ctx = document.getElementById('canvas').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['A', 'B', 'C'],
        datasets: [{
          data: [3, 5, 6],
          backgroundColor: 'lightblue'
        }]
      },
      options: {
        indexAxis: 'y', // 启用水平条形图（替代旧版horizontalBar）
        responsive: true,
        plugins: {
          legend: { display: false }
        }
      },
      plugins: [{
        afterDraw: chart => {
          const yAxis = chart.scales.y;
          const ctx = chart.ctx;

          yAxis.ticks.forEach((tick, idx) => {
            const label = tick.label;
            // 计算标签绘制的X位置：Y轴左侧 - 文本宽度 - 偏移量
            const labelX = yAxis.left - ctx.measureText(label).width - 10;
            const labelY = tick.y;

            // 清除默认绘制的标签
            ctx.clearRect(0, labelY - 10, yAxis.left, 20);

            // 为指定标签设置样式
            if (label === 'A') {
              ctx.font = 'bold 14px Arial';
              ctx.fillStyle = '#333';
            } else if (label === 'B') {
              ctx.font = '14px Arial';
              ctx.fillStyle = 'red';
            } else {
              // 其他标签使用默认样式
              ctx.font = '14px Arial';
              ctx.fillStyle = '#666';
            }

            // 重新绘制标签（+3调整垂直居中）
            ctx.fillText(label, labelX, labelY + 3);
          });
        }
      }]
    });
  </script>
</body>
</html>

核心逻辑说明 #

1. 水平条形图适配：最新版Chart.js已弃用horizontalBar类型，改用indexAxis: 'y'来创建水平条形图。
2. 插件钩子：利用afterDraw钩子在图表绘制完成后介入，手动处理标签样式。
3. 位置计算：通过yAxis.left获取Y轴的左侧坐标，结合文本宽度计算标签的X位置，确保标签显示在Y轴左侧的正确区域。
4. 样式自定义：通过判断标签内容或索引，为不同标签设置独立的字体（如加粗）和颜色。

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