Chart.js环形图数据标签重叠时自动外移调整位置实现方法

核心原因：datalabels 插件的 display: 'auto' 模式只会在内部计算标签是否超出扇区边界，超出就直接返回隐藏状态，整个判定过程没有对外暴露钩子事件，没法直接捕获「标签被判定隐藏」的时机再改位置。最稳妥的方案是接管标签的位置判定逻辑，跳过插件默认的自动隐藏规则，根据扇区可用空间动态切换标签的内外位置。

具体修改步骤 #

• 移除原来写死的 anchor/align/offset/clamp/clip 固定值，改成回调形式动态返回配置
• 在 display 回调里自行计算每个扇区的可用弧长、标签文本宽度，判断当前扇区能不能放下内部标签
• 空间足够时标签放扇区内部，空间不足时自动切换配置把标签移到扇区外部，所有标签强制返回显示，不再自动隐藏
• 修正原有配置里的无效项：font 对象内的 color 属性不会生效，字体颜色要写在 datalabels 顶层配置里

修改后的完整datalabels配置 #

直接替换你原有代码里的datalabels配置块即可：

datalabels: {
  formatter: (val) => {
    // 直接用入参val取值，不需要重复遍历数据集
    return Math.round((val * 100) / summChart()) + "%";
  },
  display: (ctx) => {
    const dataset = ctx.dataset;
    const value = dataset.data[ctx.dataIndex];
    const percentage = value / summChart();

    // 计算环形扇区中径位置的可用弧长
    const chartArea = ctx.chart.chartArea;
    const chartMaxSize = Math.min(chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
    const outerRadius = chartMaxSize / 2;
    // 兼容固定像素cutout和百分比cutout两种配置写法
    let cutoutValue = ctx.chart.options.cutout;
    const cutoutRadius = typeof cutoutValue === 'string' 
      ? outerRadius * (parseInt(cutoutValue) / 100) 
      : cutoutValue / 2;
    const midRadius = (cutoutRadius + outerRadius) / 2;
    const availableArcLen = 2 * Math.PI * midRadius * percentage;

    // 计算标签文本的实际渲染宽度
    const labelText = `${Math.round(percentage * 100)}%`;
    const innerFontSize = 65;
    ctx.chart.ctx.font = `bold ${innerFontSize}px sans-serif`;
    const textWidth = ctx.chart.ctx.measureText(labelText).width;

    // 根据空间判断标签位置，动态给上下文挂配置
    if (availableArcLen < textWidth + 20) { // 留20px内边距避免贴边
      // 空间不足，标签移到外部
      ctx.anchor = 'end';
      ctx.align = 'end';
      ctx.offset = 25;
      ctx.clamp = false;
      ctx.clip = false;
      ctx.fontSize = innerFontSize * 0.8; // 外置标签稍缩小，减少重叠概率
    } else {
      // 空间足够，标签放内部
      ctx.anchor = 'center';
      ctx.align = 'center';
      ctx.offset = 1;
      ctx.clamp = true;
      ctx.clip = true;
      ctx.fontSize = innerFontSize;
    }
    return true; // 所有标签强制显示，跳过插件默认隐藏逻辑
  },
  // 动态读取display回调里计算好的配置
  anchor: (ctx) => ctx.anchor,
  align: (ctx) => ctx.align,
  offset: (ctx) => ctx.offset,
  clamp: (ctx) => ctx.clamp,
  clip: (ctx) => ctx.clip,
  font: (ctx) => ({
    size: ctx.fontSize,
    weight: 'bold'
  }),
  color: '#000000',
  labels: {
    value: {
      color: '#000000'
    }
  }
}

额外优化建议 #

• 你原来写的 cutout: 340 是固定像素值，图表响应式缩放时会出现环形比例失调的问题，建议改成百分比值比如 cutout: '70%'，适配不同尺寸更稳定。
• 如果外置标签仍有少量重叠，可以把外置标签的offset值调大，或者进一步缩小外置标签的字号，也可以加引导线连接标签和对应扇区，datalabels插件自带borderColor/borderWidth配置可以直接画引导线。

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