Apex Charts饼图如何聚合低于指定百分比的标签为「其他」？

一、是否有内置解决方案？ #

Apex Charts目前没有直接实现「自动聚合低于阈值的类别为其他」的内置功能，你需要通过预处理数据的方式来实现。

二、变通实现步骤 #

1. 计算数据总和：先算出所有数据项的总值，以此为基础计算每个项的占比。
2. 筛选并聚合小占比数据：遍历原始数据，将占比低于阈值的项的值累加，若需要可同时收集这些项的标签（用于后续Tooltip展示）。
3. 生成新数据集：保留占比符合要求的项，若存在聚合的数据则添加「其他」项。
4. 传入新数据渲染图表：将处理后的数据集配置到Apex Charts中完成渲染。

代码示例 #

// 原始数据示例
const originalData = [
  { name: '类别1', value: 400 },
  { name: '类别2', value: 300 },
  { name: '类别3', value: 50 },
  { name: '类别4', value: 10 },
  { name: '类别5', value: 5 },
  // 剩余13个类别数据...
];

// 设定占比阈值（0.5%）
const thresholdPercent = 0.5;

// 计算数据总和
const totalValue = originalData.reduce((sum, item) => sum + item.value, 0);

// 处理数据
let otherValue = 0;
const processedData = [];
// 可选：收集「其他」包含的原始标签
const otherLabels = [];

originalData.forEach(item => {
  const percent = (item.value / totalValue) * 100;
  if (percent >= thresholdPercent) {
    processedData.push(item);
  } else {
    otherValue += item.value;
    otherLabels.push(item.name);
  }
});

// 存在聚合数据时添加「其他」项
if (otherValue > 0) {
  processedData.push({ 
    name: '其他', 
    value: otherValue,
    // 存储原始标签，用于Tooltip
    originalLabels: otherLabels 
  });
}

// Apex Charts配置
const options = {
  chart: {
    type: 'pie',
    height: 350
  },
  series: processedData.map(item => item.value),
  labels: processedData.map(item => item.name),
  tooltip: {
    custom: function({ seriesIndex, dataPointIndex, w }) {
      const item = processedData[dataPointIndex];
      if (item.name === '其他') {
        return `
          <div class="apexcharts-tooltip">
            <div>其他</div>
            <div>包含：${item.originalLabels.join(', ')}</div>
            <div>占比：${((item.value / totalValue) * 100).toFixed(2)}%</div>
          </div>
        `;
      }
      return `
        <div class="apexcharts-tooltip">
          <div>${item.name}</div>
          <div>占比：${((item.value / totalValue) * 100).toFixed(2)}%</div>
        </div>
      `;
    }
  }
};

// 初始化并渲染图表
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

额外提示 #

• 阈值可灵活调整：既可以用百分比，也可以直接设置固定数值（比如值小于5的项聚合）。
• 若不需要Tooltip展示原始标签，可省略otherLabels相关代码，简化逻辑。

内容的提问来源于stack exchange，提问作者Mehmet Emre Ast