如何用ApexCharts实现目标堆叠分组柱状图？解决名称与年份显示问题

完整实现代码 #

var options = {
  chart: {
    type: 'bar',
    stacked: true,
    height: 350
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '40%',
      grouped: true // 开启分组堆叠模式
    }
  },
  series: [
    {
      name: 'Car',
      group: '2023',
      data: [44000, 55000]
    },
    {
      name: 'Truck',
      group: '2023',
      data: [33000, 48000]
    },
    {
      name: 'Car',
      group: '2024',
      data: [48000, 52000]
    },
    {
      name: 'Truck',
      group: '2024',
      data: [38000, 50000]
    }
  ],
  xaxis: {
    categories: ['区域A', '区域B'],
    annotations: {
      texts: [
        {
          x: 0,
          y: 320, // 垂直位置：根据图表高度调整到柱子下方
          text: '2023',
          style: {
            fontSize: '14px',
            fontWeight: 'bold'
          },
          offsetX: -45 // 水平偏移：调整到分组柱子的正下方居中
        },
        {
          x: 1,
          y: 320,
          text: '2024',
          style: {
            fontSize: '14px',
            fontWeight: 'bold'
          },
          offsetX: 45
        }
      ]
    }
  },
  legend: {
    formatter: function(seriesName, opts) {
      // 只保留每个名称的第一个图例条目，其余返回空文本
      const firstIndex = opts.w.series.findIndex(s => s.name === seriesName);
      return opts.seriesIndex !== firstIndex ? '' : seriesName;
    },
    hideEmptySeries: true // 自动隐藏空图例条目
  },
  fill: {
    opacity: 1
  }
};

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

关键问题解决说明 #

1. 消除冗余图例

• 无需将series命名为Car1、Truck2这类重复名称，保持name为Car/Truck，用group区分年份即可
• 通过legend.formatter函数过滤重复图例：判断当前系列是否是同名系列的第一个实例，非第一个则返回空文本，配合hideEmptySeries: true自动隐藏空条目，最终图例仅显示Car和Truck两个选项

2. 柱子下方添加年份文本

• 利用xaxis.annotations.texts配置自定义文本标签，定位到对应分组的正下方
• 通过x指定对应x轴分类的索引，offsetX调整水平位置实现居中，y设置垂直位置确保文本在柱子下方
• 若分组数量较多，可通过循环动态生成annotations数组，避免硬编码

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