Создание асинхронного многоуровневого развертывания - Highcharts

Question

Я создаю столбчатую диаграмму, и мне нужно создать двухуровневую развертку через API. Я достиг первого, но не смог достичь второго. Может ли кто-нибудь просветить меня об этом? Спасибо.

$scope.getJobFunctionHits = function() {
    axios.get('/stats/getJobFunctionHits')
        .then(function(res) {
            $scope.jobFunctionHits = res.data.rows;
            _.forEach($scope.jobFunctionHits, function(value, key) {
                if($scope.jobFunctionHits[key].universal_job_function === null) {
                    $scope.jobFunctionHits[key].universal_job_function = 'N/A';
                }
            });
            Highcharts.chart('container-jobFunctionHits', {
                chart: {
                    type: 'column',
                    events: {
                        drilldown: function(e) {
                            var chart = this;
                            chart.setTitle({text: e.point.name});

                            axios.post('/stats/getJobFunctionDrilldownHits', {module: e.point.name})
                                .then(function(result) {
                                    chart.addSeriesAsDrilldown(e.point, {
                                        data: _.map(result.data.rows, function(a) {
                                            return [a.module, parseInt(a.hits)];
                                        })
                                    });
                                });
                        },
                        drillup: function() {
                            var chart = this;
                            chart.setTitle({text: '# of Hits by Job Function Month-to-Date'});
                        }
                    }
                },
                title: {
                    text: '# of Hits by Job Function Month-to-Date'
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Number of Hits'
                    }
                },
                tooltip: {
                    headerFormat: '',
                    formatter: function() {
                        var self = this;
                        return '<span style="color:' + self.color + '">\u25CF</span>' + self.key + ': <b> ' + self.y + '</b><br/>';
                    },
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    },
                },
                legend: {
                    enabled: false
                },
                series: [
                    {
                        name: 'List of Job Function Hits',
                        colorByPoint: true,
                        data: _.map($scope.jobFunctionHits, function(b) {
                            return {
                                name: b.universal_job_function,
                                y: parseInt(b.hits),
                                drilldown: true
                            };
                        }),
                    }
                ]
            });
        });
};

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

axios.post('/stats/getModuleDrilldownStats', {module: e.point.name})
  .then(function(result) {
    chart.addSeriesAsDrilldown(e.point, {
      data: _.map(result.data.rows, function(a) {
                return [a.display_name, parseInt(a.count)];
            })
    });
  });

Я видел огромное количество примеров, но все они имели записанные данные, а не асинхронные. Пожалуйста, совет.