Highcharts列图中的钻取事件



在此Highcharts列图中,用户可以通过单击列向下钻取。

这很好,但是所有的数据,包括钻柱的数据,需要在第一次创建图表时可用。

我需要的是捕获钻取事件单击,并用该信息填充图表,仅在用户单击特定列时发送数据。这可能吗?

是的,这是可能的和简单的。您需要使用drilldown事件回调函数,在其中调用API请求并使用addSeriesAsDrilldown方法-如下面的示例所示:

chart: {
type: 'column',
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
...
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
}

现场演示:https://jsfiddle.net/BlackLabel/e9m74kgp/

API参考:

https://api.highcharts.com/highcharts/chart.events.drilldown

https://api.highcharts.com/class-reference/Highcharts.Chart addSeriesAsDrilldown

最新更新