如何创建一个多类别工具提示来显示甘特图所有类别的当前状态？

我正在制作甘特图。它看起来像这样：

以下是代码：

// Create a new Map
const modeColors = new Map();

// Adding entries to the map
modeColors.set(0, 'brown');
modeColors.set(1, 'lightgrey');
modeColors.set(2, '#ffa500');
modeColors.set(3, '#663300');

// Create a new Map
const statusColors = new Map();

// Adding entries to the map
statusColors.set(0, '#32cd32');
statusColors.set(1, 'lightblue');
statusColors.set(2, 'yellow');

const delayColors = new Map();
delayColors.set(0, '#32cd32');
delayColors.set(1, 'darkred');
delayColors.set(2, '#3399ff');
delayColors.set(3, 'crimson');

function getColor(categoryIndex, stateIndex) {
  switch (categoryIndex) {
    case 0:
      return modeColors.get(stateIndex);
    case 1:
      return statusColors.get(stateIndex);
    case 2:
      return delayColors.get(stateIndex);
    default:
      return '#777777';
  }
}

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '180em',
    right: '40em',
    height: '30%',
    top: '55%'
  },
  xAxis: {
    name: 'Time',
    type: 'time',
    id: 'time',
    position: 'bottom',
    min: '2025-04-14 06:00:00',
    max: '2025-04-14 22:00:00',
    nameLocation: 'middle',
    nameGap: 25
  },
  yAxis: {
    type: 'category',
    data: ['Mode', 'Status', 'Delay'],
    name: 'ganttCategoryAxis',
    axisTick: { show: false },
    splitLine: { show: true },
    inverse: true,
    nameTextStyle: { fontSize: 0 }
  },
  series: [
    {
      type: 'custom',
      encode: {
        x: [0, 1],
        y: 2
      },
      data: [
        // startTime, endTime, category, state
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 0, 0],
        ['2025-04-14 10:00:00', '2025-04-14 14:00:00', 0, 1],
        ['2025-04-14 14:00:00', '2025-04-14 15:15:00', 0, 2],
        ['2025-04-14 15:15:00', '2025-04-14 18:00:00', 0, 3],
        ['2025-04-14 18:00:00', '2025-04-14 23:00:00', 0, 0],
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 1, 1],
        ['2025-04-14 10:00:00', '2025-04-14 22:00:00', 1, 2],
        ['2025-04-14 22:00:00', '2025-04-14 23:00:00', 1, 0],
        ['2025-04-14 12:00:00', '2025-04-14 12:40:00', 2, 1]
      ],
      renderItem: renderGanttItem
    }
  ]
};

function renderGanttItem(params, api) {
  var categoryIndex = api.value(2);
  var stateIndex = api.value(3);
  var timeArrival = api.coord([api.value(0), categoryIndex]);
  var timeDeparture = api.coord([api.value(1), categoryIndex]);
  var barLength = timeDeparture[0] - timeArrival[0];
  var barHeight = 30;
  var x = timeArrival[0];
  var y = timeArrival[1] - barHeight / 2;
  var color = getColor(categoryIndex, stateIndex);

  return {
    type: 'rect',
    shape: {
      x: x,
      y: y,
      width: barLength,
      height: barHeight
    },
    style: {
      fill: color,
      opacity: 0.66,
      stroke: 'black'
    }
  };
}

它有 3 个类别：模式、状态和延迟。现在，工具提示会显示特定类别的所有元素列表。我想创建一个多类别状态工具提示，显示特定时间所有类别（模式、状态、延迟）的当前状态。例如，当我将鼠标悬停在 12:20 时，它应该显示：

Mode - 1
Status - 2
Delay - 1

因为这 3 个数据元素（每个类别一个）在 12:20 处于活动状态：

data: [
        // startTime, endTime, category, state
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 0, 0]
        ['2025-04-14 10:00:00', '2025-04-14 14:00:00', 0, 1] //FIRST ONE
        ['2025-04-14 14:00:00', '2025-04-14 15:15:00', 0, 2]
        ['2025-04-14 15:15:00', '2025-04-14 18:00:00', 0, 3]
        ['2025-04-14 18:00:00', '2025-04-14 23:00:00', 0, 0]
        ['2025-04-14 06:00:00', '2025-04-14 10:00:00', 1, 1]
        ['2025-04-14 10:00:00', '2025-04-14 22:00:00', 1, 2] // SECOND
        ['2025-04-14 22:00:00', '2025-04-14 23:00:00', 1, 0]
        ['2025-04-14 12:00:00', '2025-04-14 12:40:00', 2, 1] // THIRD
      ]

我尝试添加自定义格式化程序：

formatter: function (params) {
    /* Iterating over all elements and displaying the element when the mouse-hover time is within the element's start and end time */
    }

问题是，当我遍历所有参数时，我只能看到鼠标当前指向的类别内的元素。