如何在ChartJS 4.3.0中旋转雷达图点标签以避免重叠？

问题分析 #

雷达图数据维度较多时，默认点标签会因空间不足出现重叠。你尝试通过pointLabels.callback手动绘制旋转标签，但角度计算和位置偏移处理不完善，导致效果未达预期。

修正后的配置代码 #

pointLabels: {
  font: {
    size: 14
  },
  padding: 15, // 增加标签与雷达图的间距，避免被图表遮挡
  callback: function(value, index, values) {
    // 校准角度：ChartJS雷达图角度起始点在顶部，需修正计算逻辑
    const angle = ((2 * Math.PI) / values.length) * index - Math.PI / 2;
    const ctx = this.ctx;
    // 获取雷达图外侧的标签基础位置
    const position = this.getPointPosition((angle * 180 / Math.PI) + 90, this.maxRadius + this.padding);
    
    ctx.save();
    ctx.translate(position.x, position.y);
    // 调整旋转方向，保证下半部分标签正向可读
    const rotateAngle = angle > Math.PI / 2 && angle < 3 * Math.PI / 2 ? angle + Math.PI : angle;
    ctx.rotate(rotateAngle);
    // 设置文本对齐，让标签沿径向向外延伸
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(value, 0, 0);
    ctx.restore();
    
    // 隐藏默认标签，仅使用自定义绘制的标签
    return '';
  }
}

关键优化点 #

• 角度校准：适配ChartJS雷达图的角度起始规则（顶部为0度），同时判断角度区间，让下半部分标签旋转180度，避免文字倒置。
• 位置偏移：基于雷达图最大半径加内边距计算标签位置，确保标签在图表外侧，避免与图表元素重叠。
• 可读性保障：通过动态调整旋转角度，保证所有标签始终正向可读，提升视觉体验。

额外适配建议 #

如果数据维度超过12个，可进一步优化：

• 动态缩小字体：根据values.length调整font.size，比如维度超过15时设置为12号字
• 长标签换行：在callback中把长文本按固定长度拆分，通过多次fillText实现多行绘制
• 压缩内部空间：调整scale.ticks.padding减小刻度与轴线的间距，给外侧标签留出更多空间

内容的提问来源于stack exchange，提问作者Kiattiwat Oan Katanyuchanon