以这种方式呈现数据的最佳方法是使用甘特图。
在Highcharts官方网站上，您可以找到各种解决方案的演示：https://www.highcharts.com/demo/gantt
仅使用Highcharts提供的API，您就可以实现类似的效果。

• • 演示**：https://jsfiddle.net/BlackLabel/tdv7n3pa/

(function(H) {
  H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
    var color = item.color;

    item.color = item.options.legendColor;
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    item.color = color;
  });
}(Highcharts));

Highcharts.ganttChart('container', {
  xAxis: [{
      tickInterval: 1000 * 3600 * 24 * 30,
      labels: {
        format: '{value: %b}'
      }
    },
    {
      tickInterval: 1000 * 3600 * 24 * 90,
      units: [
        ['month', [3]]
      ],
      labels: {
                align: 'center',
        formatter: function() {
          const label = this,
            date = new Date(this.value),
            year = date.toLocaleString('en', { year: "2-digit", }),
            quarter = Math.floor(date.getMonth() / 3 + 1);

          return `FY${year} Q${quarter}`;
        }
      }
    }
  ],
  legend: {
    enabled: true
  },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.label}'
            }
        }
    },
  series: [{
    name: 'Everyone',
    legendColor: '#ffe699',
    data: [{
      name: 'Annual',
            label: 'Training 1',
            color: '#ffe699',
            start: Date.UTC(2023, 7, 1),
      end: Date.UTC(2023, 8, 2)
    }, {
            name: '2 Years',
            label: 'Training 2',
            color: '#ffe699',
      start: Date.UTC(2023, 6, 9),
      end: Date.UTC(2023, 8, 19)
    }]
  }, {
    name: 'Menagers',
    legendColor: '#9bc2e6',
    data: [{
      name: 'Annual',
            color: '#9bc2e6',
            label: 'Training 1',
      start: Date.UTC(2023, 9, 10),
      end: Date.UTC(2023, 11, 23)
    }]
  }]
});

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

<div id="container"></div>