Highcharts Gantt вехой серии

Question

Я новичок в Highcharts и экспериментировал с типом диаграммы Ганта, к сожалению, сейчас нет целой кучи документации.

Мое требование довольно простое, мне нужно построить несколько серийвехи, чтобы показать проскальзывание разных проектов.Я использовал пример кода, который я нашел в Интернете, чтобы начать меня, но мне нужно убрать пустую («Моя 1-я строка») строку между сериями.см .: -

https://jsfiddle.net/z86aq99g

    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
    },

    series: [{
        name: 'Test series',
        data: [{
            taskName: 'My 1st row',
            id: 'r1',
            start: today + 4.5 * day,
            milestone: true,
            color: grey_OrigTargDate
        }, {
            taskName: 'My 1st row',
            id: 'r2',
            start: today + 7.5 * day,
            milestone: true,
            color: green_Ontarget
        }, {
            taskName: 'My 2nd row',
            id: 'r3',
            start: today + 9.5 * day,
            milestone: true,
            color: blue_Completed
        }, {
            taskName: 'My 2nd row',
            id: 'r4',
            start: today + 11.5 * day,
            milestone: true,
            color: red_OffTrackMajor
        }]
    }]
});

Я пытаюсь наметить 2 этапа на каждой строке.Я знаю, что диаграмма серии x диапазона может выполнить нечто подобное, но я бы предпочел использовать опцию Ганта.Буду признателен за любую помощь.

Answer 1

Вы можете решить эту проблему, назначив категории для Y-axis

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

Чтобы это работало, вы можете изменить taskName на y: 0 / y: 1.Это будет работать, если ваш 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 https://jsfiddle.net/z86aq99g/1/