在Highcharts Gantt中更改点className

Question

以下似乎是一个错误，但我不知道解决方法是什么？

预期行为： highcharts Gantt 中数据点的类名在更新期间不会更改。

实际行为： className 与其原始集保持一致。

带有重现步骤的现场演示：

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