我一直试图找出很长一段时间，我如何可以减少24小时列，并添加一个列名（用户）以上的用户？我试图通过事件搜索Ticks，改变slotWidth等，不幸的是没有工作：（
我仍然没有找到解决方案。有什么想法可以让我得到像下面截图这样的结果吗？

的数据

function floatToTime(floatValue) {
  const hours = Math.floor(floatValue);
  const minutes = Math.round((floatValue - hours) * 100);

  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

function timeStringToFloat(timeString) {
  const [hours, minutes] = timeString.split(':').map(Number);
  const floatString = hours + '.' + minutes;

  return parseFloat(floatString);
}

function initChart() {
  const chart = document.querySelector('.container-chart');

  const categoriesData = [
    {
      id: 0,
      name: 'John Doe',
      timeline: '5 h. 11 m.',
      coordinates: [
        {
          start: '15:45',
          end: '18:56',
        },
      ],
      image: 'https://placehold.co/100x100',
    }, {
      id: 1,
      name: 'John Doe',
      timeline: '6 h. 21 m.',
      coordinates: [
        {
          start: '11:33',
          end: '12:33',
        },
        {
          start: '14:50',
          end: '15:10',
        },
      ],
      image: 'https://placehold.co/100x100',
    }, {
      id: 2,
      name: 'John Doe',
      timeline: '45 m.',
      coordinates: [
        {
          start: '01:24',
          end: '03:48',
        },
        {
          start: '05:54',
          end: '08:34',
        },
      ],
      image: 'https://placehold.co/100x100',
    }, {
      id: 3,
      name: 'John Doe',
      timeline: '1 h. 40 m.',
      coordinates: [
        {
          start: '10:00',
          end: '11:00',
        },
        {
          start: '11:30',
          end: '11:45',
        },
      ],
      image: 'https://placehold.co/100x100',
    }, {
      id: 4,
      name: 'John Doe',
      timeline: '2 h. 45 m.',
      coordinates: [
        {
          start: '16:45',
          end: '18:30',
        },
        {
          start: '18:45',
          end: '21:00',
        },
        {
          start: '23:00',
          end: '23:50',
        },
      ],
      image: 'https://placehold.co/100x100',
    },
  ];

  const dataSeries = [];
  categoriesData.forEach((category, index) => {
    let categoryArr = category.coordinates;

    categoryArr.forEach(elem => {
      elem.y = index;
      elem.start = timeStringToFloat(elem.start);
      elem.end = timeStringToFloat(elem.end);

      dataSeries.push(elem);
    });
  });

  let chartDraw = Highcharts.ganttChart(chart, {
    chart: {
      events: {
        load: function() {
          let yAxes = this.yAxis,
              xAxes = this.xAxis,
              yAxesElements = document.querySelectorAll('.highcharts-yaxis > .highcharts-axis-line'),
              xAxesElements = document.querySelectorAll('.highcharts-xaxis-grid > .highcharts-grid-line');

          if(yAxes[0].visible && yAxesElements) {
            let lastYAxesElement = yAxesElements[yAxesElements.length- 1];
            lastYAxesElement.setAttribute("stroke-width", "0px");
          }

          if(xAxes[0].visible && xAxesElements) {
            let lastXAxesElement = xAxesElements[xAxesElements.length- 1];
            lastXAxesElement.setAttribute("stroke-width", "0px");
          }
        }
      }
    },
    title: {
      text: `Hours: 123`,
      align: 'left',
      style: {
        fontSize: '14px',
        fontWeight: 'normal',
      },
    },
    navigation: {
      buttonOptions: {
        enabled: false,
      }
    },
    xAxis: [
      {
        labels: {
          formatter: function () {
            return this.value.toString().padStart(2, '0') + ' h.';
          },
          align: 'left',
          x: 15,
        },
        min: 0,
        max: 28,
        tickPositioner: function () {
          const positions = [];
          for (let i = 0; i <= 28; i += 4) {
            positions.push(i);
          }

          return positions;
        },
        lineWidth: 1,
        gridLineWidth: 1,
        opposite: true,
        tickWidth: 0,
        grid: {
          borderColor: '#EEF2F4',
        },
      },
    ],
    yAxis: [
      {
        grid: {
          borderColor: '#EEF2F4',
        },
        tickLength: 0,
        categories: categoriesData,
        opposite: true,
        gridLineWidth: 1,
        labels: {
          useHTML: true,
          formatter() {
            const value = this.value;
            const name = value.name;
            const timeline = value.timeline;
            const image = value.image;

            return name;
          },
        },
      },
    ],
    credits: {
      enabled: false,
    },
    legend: {
      enabled: false,
    },
    series: [{
      pointWidth: 18,
      data: dataSeries,
    }],
    labels: {
      align: 'left',
    },
    tooltip: {
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      useHTML: true,
      distance: -5,
      headerFormat: '',
      pointFormatter: function () {
        return `<div class="chart-label">${floatToTime(this.start)} - ${floatToTime(this.end)}</div>`;
      }
    },
  });

  Highcharts.wrap(Highcharts.Tick.prototype, 'render', function (p, i, o, op) {
    p.call(this, i, o, op);
    const axis = this.axis;

    if (axis.isXAxis) {
      const mark = this.mark;

      const d = mark.d.split(' ').map(v => {
        let n = Number(v);
        return Highcharts.isNumber(n) ? n : v;
      });

      if (!this.isLast) {
        /*mark.attr({
          'stroke-width': 1,
          d: d.join(' ')
        });

        let coords = mark.pathArray;
        const x = coords[0][1];
        const y = coords[1][2];
        const radius = 3;

        mark.renderer.createElement('ellipse').attr({
          cx: x,
          cy: y,
          rx: radius,
          ry: radius,
          'stroke-width': 2,
          fill: '#EEF2F4',
        }).add();*/
      } else {
        mark.attr({
          'stroke-width': 0,
          d: d.join(' ')
        });
      }
    }
  });
}

initChart();

个字符