Highcharts甘特图：按钮显示异常及Y轴新增泳道问题咨询

问题1：按钮未hover时显示异常 #

原因 #

Highcharts通过renderer.button生成的按钮，默认仅定义了hover状态的样式，未hover时缺少基础填充、边框和文字颜色的样式定义，导致显示异常。

解决方法 #

手动为按钮添加基础样式，可通过两种方式实现：

方式1：直接通过attr设置属性

chart.renderer.button('New Lane', 10, 10, function () {
  // 新增泳道的逻辑
})
.attr({
  fill: '#ffffff',
  stroke: '#cccccc',
  'stroke-width': 1,
  'rx': 3, // 圆角
  'ry': 3
})
// 单独设置文字样式
.text.attr({
  fill: '#333333',
  'font-size': 12,
  'font-family': 'Arial, sans-serif'
})
.add();

方式2：通过CSS类统一控制

先给按钮添加自定义类：

chart.renderer.button('New Lane', 10, 10, function () {
  // 新增泳道的逻辑
})
.addClass('custom-gantt-button')
.add();

然后添加CSS样式：

.custom-gantt-button {
  fill: #fff !important;
  stroke: #ccc !important;
  stroke-width: 1 !important;
  rx: 3 !important;
  ry: 3 !important;
}
.custom-gantt-button text {
  fill: #333 !important;
  font-size: 12 !important;
  font-family: Arial, sans-serif !important;
}

问题2：新增Y轴分类（泳道）图表不更新 #

原因 #

1. 直接修改原categories数组是引用操作，Highcharts无法检测到数组变化；
2. 甘特图的泳道高度由对应的数据点驱动，仅更新轴分类但无对应数据点时，图表不会渲染新增泳道。

解决方法 #

修改代码，创建新的分类数组，更新轴分类后添加对应空数据点：

chart.renderer.button('New Lane', 10, 10, function () {
  const yAxis = chart.yAxis[0];
  // 创建新数组，避免直接修改原引用
  const newCategories = [...yAxis.categories, '采购环节3'];
  
  // 更新Y轴分类，第二个参数设为true强制重绘
  yAxis.setCategories(newCategories, true);
  
  // 为新分类添加空数据点，确保泳道被渲染
  chart.series[0].addPoint({
    name: '空任务',
    y: newCategories.length - 1, // 对应新分类的索引
    start: null,
    end: null
  });
})
// 同时修复按钮样式（参考问题1的方法）
.attr({
  fill: '#ffffff',
  stroke: '#cccccc',
  'stroke-width': 1,
  'rx': 3,
  'ry': 3
})
.text.attr({
  fill: '#333',
  'font-size': 12
})
.add();

关键说明 #

• 使用扩展运算符[...yAxis.categories]创建新数组，确保Highcharts能识别到分类变化；
• 新增数据点的y值对应新分类的索引（数组长度-1），start和end设为null表示空任务；
• 如果有多个系列，需要给每个系列都添加对应的数据点，或者根据业务逻辑选择目标系列。

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