Highcharts Gantt甘特图布局最后一行显示被截断问题如何解决

根因定位 #

该问题属于Highcharts甘特图的常见布局计算误差：Y轴自动计算可视范围时，未将最后一行任务的完整高度纳入统计，导致底部内容被挤出容器可视区域。

修复方案 #

按优先级依次尝试以下配置修改即可解决：

• 方案1：显式指定Y轴最大值，修正自动计算误差
  在甘特图配置的yAxis节点中添加max属性，取值为当前任务总数量减0.5：

yAxis: {
  type: 'category',
  max: taskList.length - 0.5, // 替换taskList为你自己的任务数据数组
  // 保留原有其他yAxis配置
}

• 方案2：调整图表底部内边距，预留额外显示空间
  在chart节点中增加底部间距配置：

chart: {
  spacingBottom: 25, // 可根据截断程度调整数值，越大底部预留空间越多
  // 保留原有其他chart配置
}

• 方案3：固定任务行高，避免自动计算的行高超出容器承载范围
  在plotOptions.gantt节点中指定行高：

plotOptions: {
  gantt: {
    pointWidth: 22, // 可根据需求调整任务条高度
    // 保留原有其他gantt配置
  }
}

效果验证 #

修改配置后重新渲染甘特图，滚动到Y轴最底部，确认最后一行任务的完整信息可以正常显示即可。

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