如何实现Highcharts Gantt资源分组折叠/展开且单个资源对应一行

要同时实现资源分组的折叠/展开，以及同一资源的所有任务在单行显示，核心是正确配置yAxis的树形网格（treegrid）功能，并按层级组织series数据结构，具体方案如下：

关键配置与数据结构 #

1. 配置Y轴为分类类型并启用树形网格 #

必须在yAxis中同时设置type: "category"和treegrid.enabled: true，这是让分类轴支持折叠展开的前提：

yAxis: {
  type: "category",
  treegrid: {
    enabled: true // 开启树形网格，支持折叠/展开
  },
  labels: {
    useHTML: true // 可选：优化折叠图标渲染
  }
}

2. 按层级组织Series数据 #

需要构建三层数据结构：分组节点→资源节点→任务节点，通过id和parent属性关联层级，同时确保任务节点的y值与对应资源节点的分类名一致：

series: [{
  name: "Resource Tasks",
  data: [
    // 第一层：分组节点（父节点为null）
    {
      id: "carGroup",
      name: "汽车型号",
      parent: null,
      collapsed: true, // 控制初始折叠状态
      y: "汽车型号" // 对应Y轴分类项
    },
    // 第二层：资源节点（父节点为分组节点id）
    {
      id: "jaguar",
      name: "Jaguar",
      parent: "carGroup",
      y: "Jaguar" // 资源对应的Y轴分类名
    },
    {
      id: "peugeot",
      name: "Peugeot",
      parent: "carGroup",
      y: "Peugeot"
    },
    // 第三层：任务节点（父节点为资源节点id，y值与资源分类一致）
    {
      name: "Jaguar 研发任务",
      parent: "jaguar",
      y: "Jaguar",
      start: Date.UTC(2024, 0, 1),
      end: Date.UTC(2024, 0, 15)
    },
    {
      name: "Jaguar 测试任务",
      parent: "jaguar",
      y: "Jaguar",
      start: Date.UTC(2024, 0, 16),
      end: Date.UTC(2024, 0, 30)
    },
    {
      name: "Peugeot 生产任务",
      parent: "peugeot",
      y: "Peugeot",
      start: Date.UTC(2024, 0, 5),
      end: Date.UTC(2024, 0, 20)
    }
  ]
}]

核心原理说明 #

• 启用treegrid.enabled: true后，Highcharts会自动识别series中的层级关联（通过parent属性），生成折叠/展开控件。
• 任务节点的y值与资源节点的分类名绑定，确保同一资源的所有任务都映射到Y轴的同一行。
• 之前添加yAxis: {type: "category"}后丢失折叠功能，是因为未开启treegrid.enabled，且未正确设置数据的层级关系。

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