如何在Highcharts Gantt中隐藏父任务总时长条形

我在使用Highcharts Gantt时，通过父任务对用户的休假任务进行分类。由于用户的假期可能存在时间间隔，父任务的总时长条形无法真实反映实际休假时长，因此希望隐藏这些父任务对应的条形（即图表中的蓝色、橙色和粉色条形）。

解决方案 #

方法一：通过数据配置直接隐藏父任务条形 #

在每个父任务的数据对象中添加 visible: false 属性，Highcharts会保留父节点的分组功能，但跳过渲染该任务的条形，这是最直接高效的方式。

修改示例：

{
    "name": "Guillaume",
    "id": "Guillaume",
    "owner": "Guillaume",
    "visible": false // 添加该属性隐藏父任务条形
}

方法二：全局配置批量处理父任务 #

如果需要批量处理所有无时间范围的父任务，可以在图表配置中通过plotOptions控制渲染逻辑：

plotOptions: {
    gantt: {
        point: {
            events: {
                afterRender: function() {
                    // 隐藏没有start/end属性的父任务条形
                    if (!this.start && !this.end) {
                        this.graphic.hide();
                    }
                }
            }
        }
    }
}

修改后的完整代码 #

let today = new Date(),
  day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);

let data = [
    {
        "name": "Guillaume",
        "data": [
            {
                "name": "Guillaume",
                "id": "Guillaume",
                "owner": "Guillaume",
                "visible": false
            },
            {
                "name": "Congés Guillaume",
                "id": 1,
                "parent": "Guillaume",
                "start": 1678838400000,
                "end": 1679097600000,
                "owner": "Guillaume"
            },
            {
                "name": "Congés G",
                "id": 2,
                "parent": "Guillaume",
                "start": 1680566400000,
                "end": 1680912000000,
                "owner": "Guillaume"
            }
        ]
    },
    {
        "name": "Sylvain",
        "data": [
            {
                "name": "Sylvain",
                "id": "Sylvain",
                "owner": "Sylvain",
                "visible": false
            },
            {
                "name": "Congés sylvain test",
                "id": 3,
                "parent": "Sylvain",
                "start": 1682899200000,
                "end": 1683676800000,
                "owner": "Sylvain"
            }
        ]
    },
    {
        "name": "Quentin",
        "data": [
            {
                "name": "Quentin",
                "id": "Quentin",
                "owner": "Quentin",
                "visible": false
            },
            {
                "name": "Congés Quentin",
                "id": 4,
                "parent": "Quentin",
                "start": 1681862400000,
                "end": 1682035200000,
                "owner": "Quentin"
            }
        ]
    }
]

// THE CHART
Highcharts.ganttChart('container', {
  chart: {
    styledMode: true
  },
  title: {
    text: 'Highcharts Gantt in Styled Mode'
  },
  subtitle: {
    text: 'Purely CSS-driven design'
  },
    xAxis: {
    min: today.getTime() - (30 * day),
    max: today.getTime() + (45 * day)
  },
  accessibility: {
    keyboardNavigation: {
      seriesNavigation: {
        mode: 'serialize'
      }
    },
    point: {
      descriptionFormatter: function (point) {
        var dependency = point.dependency &&
            point.series.chart.get(point.dependency).name,
          dependsOn = dependency ? ' Depends on ' + dependency + '.' : '';

        return Highcharts.format(
          '{point.yCategory}. Start {point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}.{dependsOn}',
          { point, dependsOn }
        );
      }
    }
  },
  lang: {
    accessibility: {
      axis: {
        xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.'
      }
    }
  },
  series: data
});

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