如何在各分类中堆叠自定义渲染的Range Bar以避免重叠？

核心问题 #

Range Bar默认会让同分类下的条形在同一水平位置重叠，单纯拆分系列不会改变布局逻辑，得通过调整图表配置或数据处理来实现堆叠。

ECharts 实现步骤 #

ECharts的rangeBar原生支持堆叠，按以下配置即可：

• 把每个项目作为独立系列，所有需要堆叠的系列设置相同的stack值
• 日期范围用时间类型的x轴，y轴设置为分类
• 示例代码：

option = {
  yAxis: {
    type: 'category',
    data: ['分类A', '分类B'] // 替换成你的分类列表
  },
  xAxis: {
    type: 'time'
  },
  series: [
    {
      name: '项目1',
      type: 'bar',
      stack: 'range-group', // 所有堆叠系列用同一个标识
      data: [['2024-01-01', '2024-01-10'], ['2024-02-01', '2024-02-05']],
      barWidth: 20
    },
    {
      name: '项目2',
      type: 'bar',
      stack: 'range-group',
      data: [['2024-01-08', '2024-01-15'], ['2024-02-03', '2024-02-08']],
      barWidth: 20
    }
  ]
};

Highcharts 实现步骤 #

Highcharts的Range Bar堆叠需要开启stacking配置：

• 每个项目作为独立系列，在plotOptions.series中设置stacking: 'normal'
• 数据点需指定对应分类的y轴索引，日期转成UTC时间格式
• 示例代码：

Highcharts.chart('container', {
  chart: { type: 'bar' },
  yAxis: {
    categories: ['分类A', '分类B'],
    title: { text: null }
  },
  xAxis: { type: 'datetime' },
  plotOptions: {
    series: {
      stacking: 'normal',
      pointWidth: 20
    }
  },
  series: [
    {
      name: '项目1',
      data: [
        { x: Date.UTC(2024, 0, 1), x2: Date.UTC(2024, 0, 10), y: 0 },
        { x: Date.UTC(2024, 1, 1), x2: Date.UTC(2024, 1, 5), y: 1 }
      ]
    },
    {
      name: '项目2',
      data: [
        { x: Date.UTC(2024, 0, 8), x2: Date.UTC(2024, 0, 15), y: 0 },
        { x: Date.UTC(2024, 1, 3), x2: Date.UTC(2024, 1, 8), y: 1 }
      ]
    }
  ]
});

通用注意事项 #

• 先确认所用图表库支持Range Bar堆叠，部分轻量库可能无此功能，需换库或自定义绘制
• 数据必须对应正确的分类y轴索引，否则堆叠会错位
• 堆叠后若条形显示过宽/过窄，可调整barWidth（ECharts）或pointWidth（Highcharts）参数优化

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