Apex Timeline Chart能否实现堆叠分组行？求可行实现方案

ApexCharts原生并未直接支持Range Bar的分组堆叠功能，但可以通过数据预处理+配置调整的方式模拟实现，以下是具体方案：

核心思路 #

将需要在同一Y类别下堆叠的系列数据，调整到相同的Y轴索引，并通过计算时间范围让它们在X轴（时间轴）上连续排列；配合堆叠配置，实现同组内堆叠、组间独立的效果。

1. 数据预处理 #

以你提到的「Joe和Dan在code行内堆叠」为例，需要将两人的code任务数据调整到同一Y轴类别下，并让后一个任务的起始时间衔接前一个任务的结束时间，确保堆叠显示。

示例预处理代码：

// 原多系列数据（按人员划分）
const rawSeries = [
  {
    name: 'Joe',
    data: [
      { x: 'code', y: [new Date('2023-01-01').getTime(), new Date('2023-01-05').getTime()] },
      { x: 'test', y: [new Date('2023-01-06').getTime(), new Date('2023-01-10').getTime()] }
    ]
  },
  {
    name: 'Dan',
    data: [
      { x: 'code', y: [new Date('2023-01-05').getTime(), new Date('2023-01-09').getTime()] }, // 起始时间衔接Joe的结束时间
      { x: 'test', y: [new Date('2023-01-10').getTime(), new Date('2023-01-13').getTime()] }
    ]
  }
];

2. 图表配置调整 #

通过开启堆叠、设置Y轴类别、调整bar高度等配置，让同组系列在同一行内堆叠：

const options = {
  chart: {
    type: 'rangeBar',
    height: 350
  },
  plotOptions: {
    bar: {
      stack: true,
      horizontal: true,
      rangeBar: {
        barHeight: 40 // 调整高度适配同一行的多个堆叠bar
      }
    }
  },
  xaxis: {
    type: 'datetime'
  },
  yaxis: {
    categories: ['code', 'test'] // Y轴设为任务类别
  },
  series: rawSeries
};

// 渲染图表
new ApexCharts(document.querySelector("#chart"), options).render();

3. 进阶：多组堆叠区分 #

如果需要实现「部分系列堆叠、部分系列独立」的分组效果，可以使用stackGroup属性给同组系列标记相同的分组名，配合stackType: 'group'配置：

const groupedSeries = [
  {
    name: 'Joe',
    stackGroup: 'dev', // 标记为dev组
    data: [/* 预处理后的data */]
  },
  {
    name: 'Dan',
    stackGroup: 'dev', // 同组
    data: [/* 预处理后的data */]
  },
  {
    name: 'Alice',
    stackGroup: 'qa', // 另一个分组
    data: [/* 预处理后的data */]
  }
];

// 配置新增stackType
plotOptions: {
  bar: {
    stack: true,
    stackType: 'group',
    horizontal: true,
    rangeBar: {
      barHeight: 40
    }
  }
}

这样dev组的Joe和Dan会在同一Y行内堆叠，qa组的Alice会在旁边独立显示，完美模拟分组堆叠效果。

注意事项 #

• 若需要显示并行任务（重叠堆叠），可将plotOptions.bar.rangeBar.overlap设为true，但此时是重叠显示而非连续堆叠
• 建议使用最新版ApexCharts，确保stackGroup和stackType的兼容性
• 数据预处理时需注意时间范围的准确性，避免出现间隙或重叠影响视觉效果

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