highcharts - Highcharts 柱形图中的向下钻取事件

Question

在此 Highcharts 柱形图中，用户可以通过单击该列向下钻取。

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

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

标签： highcharts

Answer 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