Highcharts Gantt里程碑系列：如何移除系列间的空白行？

Hey there! 刚接触Highcharts Gantt确实会碰到一些细节小问题，我看了你提到的需求——移除系列间的空白行（也就是示例里的'My 1st Row'那行），其实这个问题处理起来很简单，核心就是调整数据和图表的配置项。

你看到的空白行是因为示例默认加入了一个没有实际任务的空行，我们只需要做两处关键修改就能解决：

修改后的代码示例 #

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

Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart with Milestones'
    },
    yAxis: {
        // 移除原有的'My 1st Row'分类，只保留你的项目行
        categories: ['Project 1', 'Project 2', 'Project 3']
    },
    series: [{
        name: 'Project 1 Milestones',
        type: 'milestone',
        data: [{
            name: 'Start',
            y: 0, // 对应y轴第一个分类索引
            x: today.getTime() - 2 * day
        }, {
            name: 'Delay',
            y: 0,
            x: today.getTime() + 3 * day
        }]
    }, {
        name: 'Project 2 Milestones',
        type: 'milestone',
        data: [{
            name: 'Start',
            y: 1, // 对应y轴第二个分类索引
            x: today.getTime() - day
        }, {
            name: 'Delay',
            y: 1,
            x: today.getTime() + 5 * day
        }]
    }, {
        name: 'Project 3 Milestones',
        type: 'milestone',
        data: [{
            name: 'Start',
            y: 2, // 对应y轴第三个分类索引
            x: today.getTime()
        }, {
            name: 'Delay',
            y: 2,
            x: today.getTime() + 2 * day
        }]
    }]
});

关键修改说明 #

• 清理y轴分类：在yAxis.categories里删掉了多余的'My 1st Row'条目，让y轴只显示你的项目名称
• 调整数据索引：把每个里程碑数据里的y值对应到新的分类索引（原来的y=1改成y=0，y=2改成y=1，以此类推），确保里程碑能正确显示在对应的项目行上

这样修改后，那个空白行就会消失，所有项目的里程碑都会紧密排列，完全符合你展示多项目延误情况的基础需求。如果之后再遇到类似空白行问题，检查下是否存在多余的y轴分类或者无对应数据的条目，清理掉即可。

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