异步向下钻取不更新 HighCharts答案

【问题标题】：Async Drill-down not updating of HighCharts异步向下钻取不更新 HighCharts
【发布时间】：2019-01-01 14:53:11
【问题描述】：

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

在我的场景系列中，数据是完全动态的，而且对应的向下钻取列。

还有一个小问题，因为钻取系列的color:null，每个时间系列颜色都不同，因为它是动态的，所以我无法设置静态颜色有没有办法让颜色像简单列的默认配色方案一样图表

这是可重现的问题JSFiddle

我使用了以下方法（第二种方法在JSFiddle中注释）

第一种方法使用 chart.update API
第二种方法使用 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'
        }]
      }); */
});

【问题讨论】：

标签： javascript charts highcharts highcharts-ng angular2-highcharts

【解决方案1】：

您可以为向下钻取系列动态设置颜色：

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

现场演示：https://jsfiddle.net/BlackLabel/mb7dhxc4/

【讨论】：

【解决方案2】：

我找到了解决上述问题的解决方法，即异步向下钻取图表没有得到更新>

$('#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();

                }

            };
});

【讨论】：