Highcharts 柱形图中的向下钻取事件答案

【问题标题】：Drilldown event in Highcharts column chartHighcharts 柱形图中的向下钻取事件
【发布时间】：2021-02-09 17:41:33
【问题描述】：

In this Highcharts column chart 用户可以通过点击该列向下钻取。

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

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

【问题讨论】：

【解决方案1】：

是的，这是可能的，而且很简单。您需要使用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

【讨论】：