ApexCharts环形图需求：在图例中显示全系列数据

我用ApexCharts创建了环形图，希望图例中能显示所有系列的具体数据（标签+对应数值）。我的现有代码如下：

new ApexCharts(document.querySelector("#noOfPoc"), {
    series: [32, 2, 1, 1],
    chart: {
      height: 350,
      type: 'donut',
      toolbar: {
        show: true
      }
    },
    labels: ['Completed', 'WIP', 'Drop', 'On Hold'],
    dataLabels: {
        formatter: function (val, opts) {
          return opts.w.config.series[opts.seriesIndex]
        },
    },
  }).render();

  new ApexCharts(document.querySelector("#noOfPoc"), {
    series: [pocCompleted, pocWip, pocOnHold, pocDrop],
    chart: {
      height: 350,
      type: 'donut',
      toolbar: {
        show: true
      }
    },
    labels: ['Completed', 'WIP', 'Drop', 'On Hold'],
    dataLabels: {
        formatter: function (val, opts) {
          return opts.w.config.series[opts.seriesIndex]
        },
    },
    legend: {
      position: 'left',
      offsetY: 80
    }
  }).render();

解决方案 #

1. 移除重复图表实例：代码中两次初始化图表并渲染到同一DOM元素，会导致后一个实例覆盖前一个，保留单个实例即可。
2. 添加图例格式化逻辑：在legend配置中新增formatter函数，让每个图例项自动拼接标签和对应系列数值。

修改后的完整代码：

new ApexCharts(document.querySelector("#noOfPoc"), {
    series: [pocCompleted, pocWip, pocOnHold, pocDrop], // 确保这些变量已定义并赋值
    chart: {
      height: 350,
      type: 'donut',
      toolbar: {
        show: true
      }
    },
    labels: ['Completed', 'WIP', 'Drop', 'On Hold'],
    dataLabels: {
        formatter: function (val, opts) {
          return opts.w.config.series[opts.seriesIndex]
        },
    },
    legend: {
      position: 'left',
      offsetY: 80,
      formatter: function(name, opts) {
        return `${name}: ${opts.w.config.series[opts.seriesIndex]}`;
      }
    }
  }).render();

说明 #

• legend.formatter函数会自动获取图例名称和对应系列的数值，返回拼接后的文本，实现图例显示完整数据的需求。
• 需保证pocCompleted、pocWip等变量已正确定义并赋予有效数值，否则系列数据无法正常渲染。

内容的提问来源于stack exchange，提问作者Chinmaya Kumar Biswal