创建异步多级深入分析 - Highcharts

时间:2018-05-08 13:31:48

标签: javascript angularjs highcharts

我正在创建一个柱形图,我需要通过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)];
            })
    });
  });

我看到了大量的例子,但他们都写了数据而不是异步的。请指教。

0 个答案:

没有答案