如何通过自定义按钮实现Highcharts甘特图TreeGrid列的折叠与展开？

我们在Highcharts甘特图中使用了grid columns配置项，希望能通过图表上的自定义按钮实现TreeGrid列的折叠/展开功能，请问是否有实现方法？我已添加了自定义按钮代码：

render(events) {
      let chartVal = this;
       chartVal.renderer
       .button("+/-", 10, 10, (e) => {})
       .attr({
         zIndex: 3,
         width: 15,
         height: 9,
       })
       .on("click", function () {
       //todo
       })
      .add();
      },

能否编写对应的点击函数，实现“Assignee”“Est. days”和“End date”列的折叠/展开？

实现思路 #

核心逻辑是通过修改chart.options.grid.columns中目标列的width属性，切换列的显示与隐藏；同时维护状态变量记录当前折叠/展开状态，同步更新按钮文本。

完整实现代码 #

在图表配置中新增状态标记，完善按钮点击事件逻辑：

// 全局或图表作用域内维护折叠状态
let columnsCollapsed = false;

render(events) {
  let chartVal = this;
  // 创建按钮并保存引用，用于后续更新文本
  const toggleBtn = chartVal.renderer
    .button("-", 10, 10, (e) => {})
    .attr({
      zIndex: 3,
      width: 15,
      height: 9,
    })
    .on("click", function () {
      // 目标列的索引：Assignee(1)、Est. days(2)、End date(3)
      const targetColumnIndexes = [1, 2, 3];
      
      targetColumnIndexes.forEach(idx => {
        const column = chartVal.options.grid.columns[idx];
        if (columnsCollapsed) {
          // 展开：恢复初始宽度
          column.width = column.originalWidth || column.width;
        } else {
          // 折叠：暂存原宽度并设为0
          column.originalWidth = column.width;
          column.width = 0;
        }
      });
      
      // 切换状态并更新按钮文本
      columnsCollapsed = !columnsCollapsed;
      this.attr({ text: columnsCollapsed ? "+" : "-" });
      
      // 重绘图表使列宽变化生效
      chartVal.redraw();
    })
    .add();
},

关键说明 #

• 给目标列新增originalWidth属性暂存初始宽度，避免折叠后丢失原尺寸
• 通过chart.redraw()触发图表重绘，确保列宽修改即时生效
• 按钮文本随状态自动切换为+（待展开）或-（待折叠）

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