ChartJS如何实现Y轴支持HTML模板的自定义刻度

ChartJS 本身基于 Canvas 渲染，原生 ticks 配置仅支持纯文本渲染，无法直接解析HTML模板，要实现带自定义样式/富文本的Y轴刻度，需要通过自定义插件+外部DOM挂载的方式实现，具体步骤如下：

• 第一步：隐藏原生Y轴刻度
  配置scales.y.ticks.display = false，关闭原生的刻度渲染，避免和自定义的DOM重叠，基础配置参考如下：

const chartConfig = {
  type: 'bar',
  data: {/* 你的图表业务数据 */},
  options: {
    scales: {
      y: {
        ticks: {
          display: false // 隐藏原生刻度
        }
      }
    }
  }
}

• 第二步：编写自定义渲染刻度的插件
  在ChartJS的plugins配置中注册自定义插件，监听图表渲染完成/更新事件，获取Y轴每个刻度的坐标位置，在对应位置插入你需要的HTML元素即可：

const customYAxisTicksPlugin = {
  id: 'customYAxisTicks',
  afterDraw: (chart) => {
    const yScale = chart.scales.y;
    // 先清理之前渲染的自定义刻度DOM，避免重复生成
    const existingTicks = document.querySelectorAll('.custom-y-tick');
    existingTicks.forEach(el => el.remove());
    
    // 遍历所有Y轴刻度值
    yScale.ticks.forEach((tick, index) => {
      // 获取当前刻度对应的Canvas坐标
      const tickYPos = yScale.getPixelForTick(index);
      // 创建自定义刻度DOM
      const tickEl = document.createElement('div');
      tickEl.className = 'custom-y-tick';
      // 这里填写你自己的HTML模板，支持插入图标、多色文本、自定义标签等任意内容
      tickEl.innerHTML = `
        <span style="display:inline-block;width:12px;height:12px;background:${tick.value > 50 ? '#22c55e' : '#ef4444'};border-radius:50%;margin-right:6px;"></span>
        <span>${tick.label}</span>
      `;
      // 设置定位样式，需要确保图表外层容器是position:relative
      tickEl.style.position = 'absolute';
      tickEl.style.left = '0'; // 可根据实际布局调整左偏移量
      tickEl.style.top = `${tickYPos}px`;
      tickEl.style.transform = 'translateY(-50%)';
      // 插入到图表容器中
      chart.canvas.parentNode.appendChild(tickEl);
    })
  }
}

• 第三步：注册插件到图表实例

const myChart = new Chart(ctx, {
  ...chartConfig,
  plugins: [customYAxisTicksPlugin]
})

注意事项：

1. 图表外层容器必须设置position: relative，否则自定义刻度的绝对定位会错位
2. 可以监听图表的resize事件触发重绘，保证窗口尺寸变化时刻度位置同步更新
3. 如果需要适配暗黑模式/动态样式，直接修改自定义DOM的CSS即可，比Canvas自定义绘制灵活度更高

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