如何在Chart.js中为Y轴设置日期标签并显示自定义HTML刻度

一、将日期作为Y轴标签的实现方式 #

Chart.js的Y轴默认是线性数值轴，要显示日期分两种场景处理：

场景1：离散日期映射（如你的代码中0对应2024-01-01） #

直接通过ticks.callback将Y轴数值映射为日期字符串，这也是你当前代码的思路：

y: {
  ticks: {
    callback: function(value) {
      return yAxisLabelsLookup[value]?.label || value;
    }
  }
}

这种方式适合Y轴是离散的日期节点，每个数值对应唯一日期。

场景2：连续日期轴 #

如果Y轴是连续的日期范围，可将Y轴类型设为time，需确保数据中y值为日期对象或可解析的日期字符串：

scales: {
  y: {
    type: 'time',
    time: {
      unit: 'day',
      displayFormats: {
        day: 'YYYY-MM-DD'
      }
    }
  }
}

此时数据中的y值要改为new Date('2024-01-01')这类日期格式，而非数值0、1。

二、为Y轴刻度显示自定义HTML标签的解决方案 #

你当前尝试用ticks.callback返回HTML字符串，但Chart.js默认用Canvas绘制刻度文本，不支持解析HTML。要实现带样式的自定义标签，需通过Chart.js插件手动渲染DOM元素：

修改后的完整代码 #

const yAxisLabelsLookup = {
  0: { label: '2024-01-01', color: 'red' },
  1: { label: '2024-01-02', color: 'blue' },
  2: { label: '2024-01-03', color: 'green' },
  3: { label: '2024-01-04', color: 'yellow' }
};
const ctx = document.getElementById('chart-container');

const data = {
  datasets: [{
    label: 'First Dataset',
    data: [
      { x: 20, y: 0, r: 15 }, { x: 40, y: 0, r: 10 },
      { x: 20, y: 1, r: 10 }, { x: 40, y: 1, r: 10 },
      { x: 25, y: 2, r: 10 }, { x: 35, y: 2, r: 10 }
    ],
    backgroundColor: 'rgb(255, 99, 132)'
  }]
};

const chart = new Chart(ctx, {
  type: 'bubble',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'time',
        position: 'top',
        ticks: { padding: 15 }
      },
      y: {
        ticks: { display: false }, // 隐藏默认Canvas刻度
        grid: { drawTicks: false } // 关闭默认刻度线，避免视觉冲突
      }
    },
    plugins: {
      // 绘制完成后渲染HTML刻度
      afterDraw: function(chart) {
        const yAxis = chart.scales.y;
        const chartRect = chart.canvas.getBoundingClientRect();
        
        yAxis.ticks.forEach(tick => {
          const labelInfo = yAxisLabelsLookup[tick.value];
          if (!labelInfo) return;
          
          // 创建自定义标签元素
          const labelEl = document.createElement('span');
          labelEl.textContent = labelInfo.label;
          labelEl.style.cssText = `
            position: absolute;
            color: ${labelInfo.color};
            font: ${chart.options.font.size}px ${chart.options.font.family};
            white-space: nowrap;
            pointer-events: none;
          `;
          
          // 计算标签位置，确保与刻度对齐
          labelEl.style.left = `${chartRect.left + yAxis.left - 12}px`;
          labelEl.style.top = `${chartRect.top + tick.y - labelEl.offsetHeight/2}px`;
          labelEl.dataset.chartId = chart.id; // 标记所属图表，方便后续清理
          
          document.body.appendChild(labelEl);
        });
      },
      // 响应式更新前清理旧标签
      beforeResize: function(chart) {
        document.querySelectorAll(`[data-chart-id="${chart.id}"]`).forEach(el => el.remove());
      }
    }
  }
});

核心逻辑说明 #

1. 隐藏默认刻度：关闭Y轴ticks.display，避免Canvas文本与HTML标签重叠。
2. 插件渲染HTML：利用afterDraw钩子，在图表绘制完成后遍历刻度，创建并定位自定义HTML标签。
3. 响应式适配：通过beforeResize钩子在图表尺寸变化前移除旧标签，防止重复创建。
4. 位置校准：基于Canvas的页面坐标和刻度的Y轴坐标，计算标签的绝对位置，确保对齐准确。

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