Highcharts 海图甘特图里程碑系列

我是海图新手，一直在尝试甘特图类型，不幸的是，目前还没有一大堆文档

我的要求是非常基本的，我需要绘制多个里程碑系列，以显示不同项目的延误。我使用了一些在线发现的示例代码来启动我，但是我需要删除这个系列之间的空白（‘我的第一行’）行。见：-

---

我试图在每一行上绘制两个里程碑。我知道x范围系列图表可以实现类似的功能，但我更喜欢使用甘特图选项。非常感谢您的帮助。

您可以通过将类别分配到

Y轴来解决此问题

 yAxis: {
    type: 'category',
    categories: ['A', 'B'],
    reversed: true,        
 },

为此，您可以使用
y:0
/
y:1
更改
taskName
。如果您的
taskName
与您的类别名称相同，则它将起作用，但如果您要更改类别，则使用
y:0
更具动态性

您的代码最终将如下所示：

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

    var grey_OrigTargDate = '#A6A6A6';
    var blue_Completed = '#2e75b6';
    var green_Ontarget = '#00b050';
    var yellow_OfftrackMinor = '#ffc000';
    var red_OffTrackMajor = '#ff0000';

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

// THE CHART

Highcharts.setOptions({
    colors: ['#058DC7']
});

Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Test'
    },
    xAxis: {
        currentDateIndicator: true,
        min: today - 3 * day,
        max: today + 18 * day
    },

    yAxis: {
        type: 'category',
        categories: ['A', 'B'],
        reversed: true,

    },

    series: [{
        name: 'Test series',
        data: [{
            y: 0, // taskName: 'A' works too
            id: 'r1',
            start: today + 4.5 * day,
            milestone: true,
            color: grey_OrigTargDate
        }, {
            y: 0,
            id: 'r2',
            start: today + 7.5 * day,
            milestone: true,
            color: green_Ontarget
        },{
            y: 1,
            id: 'r3',
            start: today + 9.5 * day,
            milestone: true,
            color: blue_Completed
        }, {
            y: 1,
            id: 'r4',
            start: today + 11.5 * day,
            milestone: true,
            color: red_OffTrackMajor
        }]
    }]
}); 

这是一个正在工作的JSFiddle

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

    var grey_OrigTargDate = '#A6A6A6';
    var blue_Completed = '#2e75b6';
    var green_Ontarget = '#00b050';
    var yellow_OfftrackMinor = '#ffc000';
    var red_OffTrackMajor = '#ff0000';

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

// THE CHART

Highcharts.setOptions({
    colors: ['#058DC7']
});

Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Test'
    },
    xAxis: {
        currentDateIndicator: true,
        min: today - 3 * day,
        max: today + 18 * day
    },

    yAxis: {
        type: 'category',
        categories: ['A', 'B'],
        reversed: true,

    },

    series: [{
        name: 'Test series',
        data: [{
            y: 0, // taskName: 'A' works too
            id: 'r1',
            start: today + 4.5 * day,
            milestone: true,
            color: grey_OrigTargDate
        }, {
            y: 0,
            id: 'r2',
            start: today + 7.5 * day,
            milestone: true,
            color: green_Ontarget
        },{
            y: 1,
            id: 'r3',
            start: today + 9.5 * day,
            milestone: true,
            color: blue_Completed
        }, {
            y: 1,
            id: 'r4',
            start: today + 11.5 * day,
            milestone: true,
            color: red_OffTrackMajor
        }]
    }]
});