javascript - 异步钻取不更新 HighCharts

Question

我正在努力动态更新 HighCharts 堆栈条形图及其钻取图表，但我坚持一个问题，即异步钻取未更新。

In my scenario series data is completely dynamic and also corresponding drilldown columns.

还有一个小问题，因为钻取系列的 color:null ，每个时间序列颜色都不同，而且因为它是动态的，所以我无法设置静态颜色，有什么方法可以使颜色相同就像简单柱形图的默认配色方案

这是可重现的问题 JSFiddle

我使用了以下方法(第二种方法已在 JSFiddle 中注释)

First method use chart.update API
Second method use chart.options.merge API

// 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/