Chart.js：横向偏移/交错X轴标签而非旋转

嘿，这个需求我太懂了！Chart.js的标准配置项里确实没有直接实现X轴标签横向交错/偏移的功能，但咱们完全可以通过自定义插件来解决这个问题，而且效果还挺不错的～

核心思路就是在图表绘制完成后，手动调整奇数（或偶数）位置的X轴标签，给它们加一个垂直偏移量，让标签错开排列，避免缩放时重叠。

第一步：定义自定义插件 #

这个插件会在图表绘制完成后，遍历所有X轴标签，对奇数索引的标签进行位置调整：

const staggeredXLabelsPlugin = {
  id: 'staggeredXLabels',
  afterDraw(chart) {
    const ctx = chart.ctx;
    const xAxis = chart.scales.x;
    const labelItems = xAxis.getLabelItems();
    
    labelItems.forEach((label, idx) => {
      // 只处理奇数位置的标签，偶数位置保持原样
      if (idx % 2 !== 0) {
        ctx.save();
        // 调整垂直偏移量，这里设为15px，你可以根据字体大小自行修改
        const offsetY = 15;
        const newLabelY = label.y + offsetY;
        
        // 先清除原标签位置的内容，防止重叠
        ctx.clearRect(
          label.x - label.width / 2,
          label.y - label.height / 2,
          label.width,
          label.height
        );
        
        // 用原标签的样式重新绘制到新位置
        ctx.fillStyle = xAxis.options.color;
        ctx.font = xAxis.options.font.string;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(label.label, label.x, newLabelY);
        
        ctx.restore();
      }
    });
  }
};

第二步：在图表中注册并使用插件 #

初始化Chart的时候，把这个插件加入到plugins数组里，同时保持你的maxRotation: 0配置：

const myChart = new Chart(document.getElementById('yourChartId'), {
  type: 'line', // 替换成你的图表类型，比如bar、line等
  plugins: [staggeredXLabelsPlugin],
  data: {
    // 你的图表数据...
    labels: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6'],
    datasets: [{ /* 数据集配置 */ }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          maxRotation: 0, // 保持标签不旋转
          // 其他X轴配置...
        }
      }
    }
  }
});

额外优化建议 #

1. 动态偏移判断：如果想只在标签确实重叠的时候才启用交错，可以在插件里加入判断逻辑——计算相邻标签的间距和宽度，当间距小于标签宽度时再应用偏移。
2. 自定义偏移量：根据你的字体大小、图表高度调整offsetY的值，确保标签不会超出图表区域。
3. 兼容不同Chart.js版本：这个插件适配Chart.js v3及以上版本，如果是v2版本，只需要把chart.scales.x改成chart.scales['x-axis-0']即可。

这样设置后，缩放图表时X轴标签就会自动交错排列，既保持了不旋转的需求，又解决了重叠问题～

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