javascript - Highcharts甘特图：不支持Y轴上的父子功能与Y轴配置上的类别声明

Question

我正在使用 Highcharts Gantt Chart 绘制甘特图。我在数据中使用父关键字进行分组。当我为 YAxis 配置类别时，它不支持父子分组。

我使用的参考：https ://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/subtasks

预期相同的输出，但带有 YAxis 类别（想要实现拖放功能，为此我们需要 Y 轴类别）。

示例代码：

var 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);


// THE CHART
Highcharts.ganttChart('container', {
    title: {
        text: 'Highcharts Gantt With Subtasks'
    },
    xAxis: {
        min: today.getTime() - (2 * day),
        max: today.getTime() + (32 * day)
    },
    yAxis: {
        min: 0,
        max: 3,
        categories: ['Planning', 'Requirements', 'Design']
    },
    series: [{
        name: 'Project 1',
        data: [{
            name: 'Planning',
            id: 'planning',
            start: today.getTime(),
            end: today.getTime() + (20 * day),
            y: 0
        }, {
            name: 'Requirements',
            id: 'requirements',
            parent: 'planning',
            start: today.getTime(),
            end: today.getTime() + (5 * day),
            y: 1
        }, {
            name: 'Design',
            id: 'design',
            dependency: 'requirements',
            parent: 'planning',
            start: today.getTime() + (3 * day),
            end: today.getTime() + (20 * day),
            y: 2
        }, {
            name: 'Layout',
            id: 'layout',
            parent: 'design',
            start: today.getTime() + (3 * day),
            end: today.getTime() + (10 * day),
            y: 3
        }, {
            name: 'Graphics',
            parent: 'design',
            dependency: 'layout',
            start: today.getTime() + (10 * day),
            end: today.getTime() + (20 * day),
            y: 4
        }, {
            name: 'Develop',
            id: 'develop',
            start: today.getTime() + (5 * day),
            end: today.getTime() + (30 * day),
            y: 5
        }, {
            name: 'Create unit tests',
            id: 'unit_tests',
            dependency: 'requirements',
            parent: 'develop',
            start: today.getTime() + (5 * day),
            end: today.getTime() + (8 * day),
            y: 6
        }, {
            name: 'Implement',
            id: 'implement',
            dependency: 'unit_tests',
            parent: 'develop',
            start: today.getTime() + (8 * day),
            end: today.getTime() + (30 * day),
            y: 7
        }]
    }]
});

#container {
    max-width: 800px;
    margin: 1em auto;
}

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>


<div id="container"></div>

标签： javascripthighchartsgantt-chart