Async Drill-down не обновляет HighCharts

Question

Я работаю над обновлением HighCharts гистограммы стека динамически вместе с их диаграммами детализации, но я придерживаюсь одной проблемы, что асинхронная развертка не обновляется.

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

Есть еще одна небольшая проблема из-за color:null серий развертки, каждый цвет временного рядаони разные и потому что они динамические, поэтому я не могу установить статические цвета, есть ли способ сделать цвет таким же, как и цветовая схема по умолчанию для простой столбчатой ​​диаграммы

Вот проблема, воспроизводимая JSFiddle

Я использовал следующие методы (второй метод прокомментирован в JSFiddle )

Использование первого метода API chart.update
Использование второго метода API chart.options.merge

// Create the chart
var chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                type: 'column',
                                name: 'Animals',
                                data: [2, 3],
                                color: null
                            },
                            'Fruits': {
                                type: 'column',
                                name: 'Fruits',
                                data: [7, 3],
                                color: null
                            }
                        };
                    const series = [];
                    series.push(drilldowns['Animals']);
                    series.push(drilldowns['Fruits']);
                    series.forEach(serie => {
                        chart.addSingleSeriesAsDrilldown(e.point, serie);
                    });
                    chart.applyDrilldown();

                }

            },
            drillup: function() {
                var newOptions = {
                    legend: {
                        enabled: true
                    }
                };
                this.update(newOptions);
            }
        }
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        },
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }]
});


$('#update').click(function() {
    // First Method 
    chart.update({
        drilldown: {
            series: [{
                name: 'Animals2',
                data: [1, 5],
                color: null,
                type: 'column'
            }, {
                name: 'Fruits2',
                data: [3, 5],
                color: null,
                type: 'column'
            }]
        }
    });

    // Second  Method

    /* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
        series: [{
          name: 'Animals2',
          data: [1, 5],
          color: null,
          type: 'column'
        }, {
          name: 'Fruits2',
          data: [3, 5],
          color: null,
          type: 'column'
        }]
      }); */
});

Answer 1

Вы можете динамически установить цвет для вашей серии разверток:

                series.forEach(function(serie, i) {
                    serie.color = chart.options.colors[i];
                    chart.addSingleSeriesAsDrilldown(e.point, serie);
                });

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

Answer 2

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

$('#update').click(function() {

    chart.hcEvents.drilldown[0] = function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                type: 'column',
                                name: 'Animals2',
                                data: [1, 6],
                                color: null
                            },
                            'Fruits': {
                                type: 'column',
                                name: 'Fruits2',
                                data: [7, 4],
                                color: null
                            }
                        };
                    const series = [];
                    series.push(drilldowns['Animals']);
                    series.push(drilldowns['Fruits']);
                    series.forEach(serie => {
                        chart.addSingleSeriesAsDrilldown(e.point, serie);
                    });
                    chart.applyDrilldown();

                }

            };
});