Highcharts异步向下钻取多级数据

Question

设置一个高级图表，该图表可以异步调用API来处理多个数据级别。在单击数据点时，我希望highchart保持“ addSeriesAsDrilldown”，同时保持所有向上钻取事件和图表选项完整。

这是针对具有分层体系结构的数据集的。例如，如果我想要2010年5月的R＆B热门歌曲排行榜，我的数据将首先显示如下数据点： R＆B

然后单击2010数据点： R＆B ^ 2010

然后单击May数据点： R＆B ^ 2010 ^ May

我们使用了addSeriesAsDrilldown，但是它仅对第一级数据有用。

$('#container').highcharts({
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                name: 'Animals',
                                data: [
                                    {name: 'Sheep',
                                     y:5,
                                     drilldown: true
                                   },
                                    ['Cow', 3]
                                ]
                            },
                            'Fruits': {
                                name: 'Fruits',
                                data: [
                                    ['Apples', 5],
                                    ['Oranges', 7],
                                    ['Bananas', 2]
                                ]
                            },
                            'Cars': {
                                name: 'Cars',
                                data: [
                                    ['Toyota', 1],
                                    ['Volkswagen', 2],
                                    ['Opel', 5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name];

                    // Show the loading label
                    chart.showLoading('Simulating Ajax ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000);
                }

            }
        }
    },
    title: {
        text: 'Async drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        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
        }]
    }],

    drilldown: {
        series: []
    }
});

在我们向上和向下钻取时，期望输出具有正确的数据，而不会破坏图表。