Изменение пункта className в Highcharts Gantt

Question

Ниже приведена ошибка, но я не знаю, как это обойти?

Ожидаемое поведение: Имя_класса для точки данных в старших диаграммах Ганта не изменилось во время обновления.

Фактическое поведение: Имя_класса остается таким же, как и его исходный набор.

Демонстрационная версия с шагами для воспроизведения:

https://jsfiddle.net/gd5hswbv/

При нажатии на кнопку (Изменить цвет) обновляется первая точка данных с новым классом, цветом и значением y. Значение y изменяется, а цвет меняется (как отмечено на границе всплывающей подсказки), но класс (и, следовательно, заливка) - нет.

Даже добавление chart.redraw (), похоже, не помогает.

JS Код от скрипки:

let chart = Highcharts.ganttChart('container', {

    title: {
        text: 'Class update'
    },

    xAxis: {
        tickPixelInterval: 70
    },

    yAxis: {
        type: 'category',
        grid: {
            enabled: true,
            borderColor: 'rgba(0,0,0,0.3)',
            borderWidth: 1,
            columns: [{
                title: {
                    text: 'Project'
                },
                labels: {
                    format: '{point.name}'
                }
            }]
        }
    },

    tooltip: {
        xDateFormat: '%e %b %Y, %H:%M'
    },

    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2017, 10, 18, 8),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Start prototype',
            assignee: 'Richards',
            y: 0,
            className: "color-purple",
            color: "green"
        }, {
            start: Date.UTC(2017, 10, 20, 8),
            end: Date.UTC(2017, 10, 24, 16),
            name: 'Develop',
            assignee: 'Michaels',
            y: 1
        }, {
            start: Date.UTC(2017, 10, 25, 16),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Prototype done',
            assignee: 'Richards',
            y: 2
        }, {
            start: Date.UTC(2017, 10, 27, 8),
            end: Date.UTC(2017, 11, 3, 16),
            name: 'Test prototype',
            assignee: 'Richards',
            y: 3
        }, {
            start: Date.UTC(2017, 10, 23, 8),
            end: Date.UTC(2017, 11, 15, 16),
            name: 'Run acceptance tests',
            assignee: 'Halliburton',
            y: 4
        }]
    }],

    exporting: {
        sourceWidth: 1000
    }
});

$('#color').click(function () {
    chart.update({
        series: {
        data: [{
            start: Date.UTC(2017, 10, 18, 8),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Start prototype',
            assignee: 'Richards',
            y: 2,
            className: "color-red",
            color: "red"
        }, {
            start: Date.UTC(2017, 10, 20, 8),
            end: Date.UTC(2017, 10, 24, 16),
            name: 'Develop',
            assignee: 'Michaels',
            y: 1
        }, {
            start: Date.UTC(2017, 10, 25, 16),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Prototype done',
            assignee: 'Richards',
            y: 2
        }, {
            start: Date.UTC(2017, 10, 27, 8),
            end: Date.UTC(2017, 11, 3, 16),
            name: 'Test prototype',
            assignee: 'Richards',
            y: 3
        }, {
            start: Date.UTC(2017, 10, 23, 8),
            end: Date.UTC(2017, 11, 15, 16),
            name: 'Run acceptance tests',
            assignee: 'Halliburton',
            y: 4
        }]
      }
    });
});

Answer 1

Обратите внимание, что функция className может быть определена для общих параметров серии, а не для конкретного объекта данных - API: https://api.highcharts.com/gantt/series.gantt.className

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

Демонстрация: https://jsfiddle.net/BlackLabel/w9j6mLac/

let chart = Highcharts.ganttChart('container', {

    yAxis: {
        type: 'category',

    },

    series: [{
        name: 'Project 1',
        data: [{
            start: Date.UTC(2017, 10, 18, 8),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Start prototype',
            assignee: 'Richards',
            y: 0,
            color: 'purple'
        }, { ... } ]
    }],
});

$('#color').click(function () {
    chart.update({
        series: {
        data: [{
            start: Date.UTC(2017, 10, 18, 8),
            end: Date.UTC(2017, 10, 25, 16),
            name: 'Start prototype',
            assignee: 'Richards',
            y: 2,
            color: 'red'
        }, {
            start: Date.UTC(2017, 10, 20, 8),
            end: Date.UTC(2017, 10, 24, 16),
            name: 'Develop',
            assignee: 'Michaels',
            y: 1
        }, { ... }]
      }
    }, true, true, true);
});