Highcharts技术问题：如何为每个数据系列创建独立堆叠柱状图

我完全懂你想要的效果——每个大类（比如水果、蔬菜）对应一个独立的柱子，大类里的每个小项（苹果、香蕉、黄瓜这类）都乖乖堆叠在所属大类的柱子里，而不是让每个小项系列跨所有大类列显示。你之前用null占位的临时方法虽然能凑出样子，但确实太繁琐，维护起来也容易出错。

给你一个更优雅、可维护的解决方案，以ECharts为例（其他主流图表库思路完全一致）：

核心思路 #

把大类（水果、蔬菜）作为x轴的类目，每个子项（苹果、香蕉等）作为独立的数据系列，然后通过「堆叠分组」+「定向赋值数据」来实现需求：

1. 同一大类下的子项系列，设置相同的stack分组名称，让它们在对应柱子里堆叠；
2. 每个系列的data数组中，仅在对应大类的位置填实际数值，其他大类位置填0（比null更稳妥，避免柱子消失）。

完整配置示例 #

option = {
  xAxis: {
    type: 'category',
    data: ['水果', '蔬菜', '肉类'] // 这里放所有大类
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  series: [
    // 水果大类下的子项系列，stack统一设为"水果组"
    {
      name: '苹果',
      type: 'bar',
      stack: '水果组',
      data: [55, 0, 0] // 仅水果类目有值，其他为0
    },
    {
      name: '香蕉',
      type: 'bar',
      stack: '水果组',
      data: [99, 0, 0]
    },
    // 蔬菜大类下的子项系列，stack统一设为"蔬菜组"
    {
      name: '黄瓜',
      type: 'bar',
      stack: '蔬菜组',
      data: [0, 22, 0]
    },
    {
      name: '土豆',
      type: 'bar',
      stack: '蔬菜组',
      data: [0, 66, 0]
    },
    // 新增肉类大类的子项也很方便
    {
      name: '牛肉',
      type: 'bar',
      stack: '肉类组',
      data: [0, 0, 88]
    }
  ]
};

为什么比你的临时方法好？ #

• 结构清晰：每个子项的归属一目了然，新增/修改大类或子项时，只需要调整x轴类目和对应系列的data即可；
• 避免冗余：不用手动写一堆null，尤其是大类多的时候，能减少大量重复代码；
• 兼容性更好：部分图表库对null的处理可能有差异，用0能保证柱子的占位和堆叠逻辑稳定。

如果用的是Highcharts，思路完全一样，只需要调整配置语法：

Highcharts.chart('container', {
    chart: { type: 'bar' },
    xAxis: { categories: ['水果', '蔬菜', '肉类'] },
    yAxis: { min: 0, title: { text: '总量' } },
    plotOptions: { bar: { stacking: 'normal' } },
    series: [
        { name: '苹果', data: [55, 0, 0] },
        { name: '香蕉', data: [99, 0, 0] },
        { name: '黄瓜', data: [0, 22, 0] },
        { name: '土豆', data: [0, 66, 0] },
        { name: '牛肉', data: [0, 0, 88] }
    ]
});

本质上就是利用图表库的堆叠功能，通过数据定向赋值，让每个子项系列只在对应大类的柱子里显示并堆叠，完美实现你要的效果~

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