Highcharts Gantt - 动态网格单元格高度

嘿，当然有办法实现这个需求啦！下面我给你分享几种实用的方案，帮你动态调整Highcharts Gantt里每行的高度：

• 基于内容长度自动计算行高
  如果每行的任务名称或描述内容较长，我们可以先计算内容所需的实际高度，再对应更新行高。这里可以借助临时DOM元素来计算文本高度，示例代码如下：

  // 定义计算文本所需高度的函数
  function calculateRowHeight(text, containerWidth) {
    // 创建临时元素用于计算，避免影响页面布局
    const tempEl = document.createElement('div');
    tempEl.style.position = 'absolute';
    tempEl.style.visibility = 'hidden';
    tempEl.style.width = containerWidth + 'px';
    tempEl.style.fontSize = '14px'; // 和图表内字体样式保持一致
    tempEl.textContent = text;
    document.body.appendChild(tempEl);
    const height = tempEl.offsetHeight;
    document.body.removeChild(tempEl);
    // 额外添加内边距，让内容展示更宽松
    return height + 10;
  }
  
  // 获取目标图表实例
  const chart = Highcharts.charts[0];
  
  // 遍历所有任务数据，逐个计算并更新行高
  chart.series[0].data.forEach((point, index) => {
    const taskText = point.name;
    const rowWidth = chart.plotWidth; // 获取网格行的可用宽度
    const newHeight = calculateRowHeight(taskText, rowWidth);
    // 更新对应行的高度，立即重绘图表
    chart.update({
      yAxis: {
        rows: [{
          index: index,
          height: newHeight + 'px'
        }]
      }
    }, true);
  });
  

• 结合事件监听自动调整
  可以在图表加载、数据更新等时机自动触发行高调整逻辑，比如监听load事件：

  Highcharts.ganttChart('container', {
    chart: {
      events: {
        load: function() {
          const chart = this;
          // 执行行高计算与更新逻辑
          chart.series[0].data.forEach((point, index) => {
            const taskText = point.name;
            const rowWidth = chart.plotWidth;
            const newHeight = calculateRowHeight(taskText, rowWidth);
            chart.update({
              yAxis: {
                rows: [{
                  index: index,
                  height: newHeight + 'px'
                }]
              }
            }, true);
          });
        }
      }
    },
    // 其他图表配置项...
  });
  

  要是你有动态加载数据的场景，记得在数据更新完成后也调用这段行高计算逻辑，确保新行也能自适应高度。

• 配合HTML换行实现自适应
  如果你能提前在任务内容中加入<br>标签换行，可以开启图表的useHTML配置，让内容自动换行，再结合minRowHeight确保基础高度：

  Highcharts.ganttChart('container', {
    yAxis: {
      minRowHeight: 30, // 设置行的最小高度
      rows: [] // 后续可动态添加行配置
    },
    plotOptions: {
      series: {
        dataLabels: {
          useHTML: true // 允许使用HTML标签渲染内容
        }
      }
    },
    series: [{
      data: [{
        name: '任务1<br>这是一段很长的描述内容，需要换行展示',
        start: Date.UTC(2024, 0, 1),
        end: Date.UTC(2024, 0, 5)
      }, {
        name: '任务2',
        start: Date.UTC(2024, 0, 6),
        end: Date.UTC(2024, 0, 10)
      }]
    }]
  });
  

  这个小技巧配合前面的行高计算逻辑，就能完美实现每行根据内容动态调整高度啦！

备注：内容来源于stack exchange，提问作者Development Support