我正在创建一个柱形图,我需要通过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)];
})
});
});
我看到了大量的例子,但他们都写了数据而不是异步的。请指教。