如何为ApexCharts饼图中的极小区块添加引导线

针对你饼图中极小区块数据标签被隐藏的问题，可以通过调整ApexCharts的配置，强制显示这些区块的标签并添加引导线，具体修改后的代码如下：

var options = {
  chart: {
    id: 'basic-pie',
    type: 'pie',
    height: 500
  },
  labels: ["a","b","c","d","e","f","g","h","i"],
  series: [9062,6859,838,74, 20, 12,5,3,1],
  dataLabels: {
    enabled: true,
    // 强制所有系列显示数据标签
    enabledOnSeries: undefined,
    // 让标签远离饼图，避免重叠
    offset: 20,
    // 启用引导线并配置样式
    connector: {
      enabled: true,
      strokeWidth: 1,
      color: '#ccc'
    },
    // 自定义标签内容，显示分类名+数值
    formatter: function(val, opts) {
      return `${opts.w.globals.labels[opts.seriesIndex]}: ${val}`;
    },
    style: {
      fontSize: '12px',
      fontWeight: 'normal'
    }
  },
  theme: {
    palette: 'palette7'
  },
  plotOptions: {
    pie: {
      // 设置最小显示角度，确保极小区块能在饼图上显示
      minAngle: 5
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

关键配置说明： #

• dataLabels.connector: 启用引导线，将极小区块的标签与饼图上的对应区块连接，避免标签孤立
• plotOptions.pie.minAngle: 设置最小显示角度，强制占比极低的区块在饼图上显示出可见的小块，而不是被合并隐藏
• dataLabels.offset: 调整标签与饼图的距离，防止小标签和主区块标签重叠
• dataLabels.formatter: 自定义标签内容，清晰展示分类名称和对应数值，提升可读性

内容的提问来源于stack exchange，提问作者Zoltán