如何在chartjs-plugin-datalabels中按数值大小隐藏重叠数据标签？

默认的Chart.js datalabels插件display: "auto"仅按相对索引隐藏重叠标签，但实际需求是：当多个标签重叠时，隐藏数值最小的那个，只保留数值大的标签。现有实现仅在手动悬停每个切片时部分生效，核心问题在于：

• datalabels仅为可见标签计算布局，未显示的标签没有布局数据，无法提前判断重叠
• 代码依赖插件私有属性（如_labels、$layout._box._rect），版本兼容性差
• 采用O(n²)遍历，虽数据量小但效率可优化

解决方案：预计算布局+优先级标记 #

核心思路 #

1. 预计算所有标签布局：借助Chart.js插件的beforeDraw钩子，强制计算所有标签的位置和尺寸，存储为全局可用的元数据
2. 标记重叠组并筛选优先级：遍历所有标签，找出重叠的标签组，每组仅保留数值最大的标签，其余标记为隐藏
3. 避免私有API依赖：通过公开API获取标签布局，保证兼容性

完整代码实现 #

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

var ctx = document.querySelector('#myChart');

// 全局存储所有标签的布局和数据信息
let labelMetadata = [];

var chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: Array.from(Array(50).keys()),
    datasets: [{
      label: "Value",
      data: Array.from(Array(50).keys()).map(() => Math.round(Math.random() * 800 + 200)),
      datalabels: {
        anchor: "end",
        align: "end",
        display: function(context) {
          // 根据预计算的标记判断是否显示
          return labelMetadata[context.dataIndex].keepVisible;
        }
      },
    }],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: false,
    parsing: false,
    plugins: {
      legend: { display: false },
      datalabels: {
        // 确保所有标签都参与布局计算
        display: true
      }
    },
    layout: { padding: 20 },
  },
  plugins: [ChartDataLabels, {
    id: 'precomputeLabelLayout',
    beforeDraw: function(chart) {
      // 重置元数据
      labelMetadata = [];
      const data = chart.data.datasets[0].data;
      
      // 遍历所有数据点，计算标签布局
      chart.data.labels.forEach((_, index) => {
        const labelCtx = chart.ctx;
        const model = chart.getDatasetMeta(0).data[index];
        const labelText = data[index].toString();
        
        // 获取标签的字体样式（从datalabels配置读取）
        const font = Chart.helpers.toFont(chart.options.plugins.datalabels.font);
        labelCtx.font = font.string;
        
        // 计算标签尺寸和位置
        const textWidth = labelCtx.measureText(labelText).width;
        const textHeight = font.lineHeight;
        
        // 基于anchor和align计算标签绝对位置（模拟datalabels的布局逻辑）
        const position = ChartDataLabels.helpers.getPosition(model, {
          anchor: 'end',
          align: 'end',
          offset: chart.options.plugins.datalabels.offset || 0
        }, chart);
        
        // 存储元数据：位置、尺寸、数值、索引
        labelMetadata.push({
          index: index,
          value: data[index],
          x: position.x,
          y: position.y,
          width: textWidth,
          height: textHeight,
          keepVisible: true // 默认显示
        });
      });
      
      // 标记重叠标签：保留数值最大的
      markOverlappingLabels();
    }
  }]
});

// 判断两个标签是否重叠
function isOverlap(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

// 遍历标记需要隐藏的标签
function markOverlappingLabels() {
  // 按数值降序排序，优先处理大数值标签（保证大数值标签先被标记为保留）
  const sortedLabels = [...labelMetadata].sort((a, b) => b.value - a.value);
  
  sortedLabels.forEach((current, idx) => {
    if (!current.keepVisible) return; // 已被标记隐藏，跳过
    
    // 检查后续标签是否与当前重叠
    for (let i = idx + 1; i < sortedLabels.length; i++) {
      const target = sortedLabels[i];
      if (isOverlap(current, target)) {
        target.keepVisible = false;
      }
    }
  });
}

代码说明 #

1. 预计算布局：在beforeDraw钩子中，通过公开API（getPosition、measureText）计算每个标签的位置和尺寸，避免依赖私有属性
2. 重叠判断逻辑：先按数值降序排序，优先保留大数值标签，遍历检查重叠并标记隐藏小数值标签
3. display回调：直接读取预计算的keepVisible标记，判断是否显示标签

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