如何在Chart.js中避免刻度标签重叠时自动跳过绘制？

针对你遇到的数据点过近导致x轴刻度标签重叠的问题，可以通过在afterBuildTicks回调中过滤间距过小的刻度来解决，具体实现如下：

修改后的核心配置 #

scales: {
  x: {
    border: {
      display: false,
    },
    min: d0,
    ticks: {
      source: 'auto',
      maxRotation: 80,
      minRotation: 60,
      autoSkip: false,   
      callback: function(value, index, ticks) {
          return moment(value).format('HH:mm');
      }
    },
    afterBuildTicks: function(axis) {
      // 基于原始数据生成初始刻度数组
      const rawTicks = values.map(v => ({ value: v }));
      if (rawTicks.length <= 1) {
        axis.ticks = rawTicks;
        return;
      }

      const filteredTicks = [rawTicks[0]]; // 保留首个刻度，避免左侧无刻度
      const minPixelGap = 50; // 最小像素间距，可根据字体大小调整

      for (let i = 1; i < rawTicks.length; i++) {
        // 计算前后两个刻度的画布像素位置
        const prevPixel = axis.getPixelForValue(filteredTicks.at(-1).value);
        const currPixel = axis.getPixelForValue(rawTicks[i].value);
        // 判断像素间距是否满足要求
        if (Math.abs(currPixel - prevPixel) >= minPixelGap) {
          filteredTicks.push(rawTicks[i]);
        }
      }

      axis.ticks = filteredTicks;
    }
  },
  y: {
    grid: {
      display: false
    },
    stacked: true
  },
}

关键逻辑说明 #

• 利用axis.getPixelForValue()方法，将时间戳转换为画布上的像素位置，精准判断两个刻度的实际显示间距
• minPixelGap是自定义的最小像素间距阈值，可根据标签字体大小、旋转角度调整（字体越大/旋转角度越高，阈值需设置更大）
• 强制保留第一个刻度，避免最左侧无刻度的异常情况，后续仅保留间距符合要求的刻度

如果需要更精准的适配，还可以通过axis._ctx.measureText()获取标签的实际宽度，动态调整阈值，但上述方案已能解决绝大多数重叠场景。

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