如何在Chart.js饼图中正常显示数值较小的数据项

当饼图/环形图中存在占比极低的小数值项时，默认渲染逻辑会导致对应扇区窄到几乎不可见、内置标签被挤压遮挡甚至完全不渲染，和Flot饼图的小数值展示异常场景完全一致，以下是实测可用的变通方案：

• 方案1：设置最小扇区角度+自定义标签偏移
  首先通过配置给所有扇区设置最小渲染角度，避免极小值扇区缩成一条细线连鼠标都选不中；再搭配数据标签插件，给占比低于阈值的小数值项单独设置标签偏移规则，把标签挪到扇区外侧展示，不会和相邻扇区的标签挤在一起。
  参考配置代码：

  new Chart(document.getElementById('chartCtx'), {
    type: 'pie',
    data: chartData,
    options: {
      // 3.x及以上版本直接配置minAngle，给极小扇区保留2度的最小显示宽度
      minAngle: 2,
      plugins: {
        // 数据标签规则自定义
        datalabels: {
          formatter: (value, context) => {
            const total = context.dataset.data.reduce((sum, cur) => sum + cur, 0);
            const percent = ((value / total) * 100).toFixed(2);
            // 标签统一显示百分比，避免小数值和大数值数字长度差太多排版混乱
            return `${percent}%`;
          },
          align: (context) => {
            const total = context.dataset.data.reduce((sum, cur) => sum + cur, 0);
            const percent = context.dataset.data[context.dataIndex] / total * 100;
            // 占比小于1%的项，标签对齐到扇区外沿
            return percent < 1 ? 'end' : 'center';
          },
          offset: (context) => {
            const total = context.dataset.data.reduce((sum, cur) => sum + cur, 0);
            const percent = context.dataset.data[context.dataIndex] / total * 100;
            // 小数值标签向外偏移20px，避免和扇区重叠
            return percent < 1 ? 20 : 0;
          }
        }
      }
    }
  })
  

  注意：如果使用的是2.x版本的Chart.js，minAngle参数需要写到options.elements.arc配置项下才会生效。

• 方案2：小数值聚合分组
  提前处理原始数据，把所有占比低于设定阈值（比如0.5%）的小数值项合并为一个「其他」分类，避免主图表出现大量细碎的极小扇区；如果需要展示小数值的明细，可以给「其他」扇区加点击下钻交互，点击后再展开展示所有细分的小数值数据。
• 方案3：标签分层展示+悬浮提示补全
  图表上默认只展示占比≥1%的项的标签，所有数据项的精确值、占比等信息统一放到悬浮提示（tooltip）中展示，就算是极小扇区，鼠标hover时也能弹出完整信息，不会出现数据丢失的问题。

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