如何配置Highcharts中的选项以允许异步多次下钻？

Question

我正在尝试将Highcharts中的以下选项转换为具有多个下钻的多个系列.问题是我已经改变循环以在点上进展以便添加两个向下钻取系列.然而,在我写的循环中,似乎是在经过循环之后,点数组被空值覆盖,这使得整个事情无关紧要.

我是一个有选项的初学者,在花了很多时间之后,我无法破解它.解释和解决方案将是这个问题的理想答案:"如何通过多次下钻来执行以下操作？" 这是数据集上的所有异步请求.

我开始了

        options.chart = options.chart || {};
        options.chart.events = options.chart.events || {};
        var dd = options.chart.events.drilldown || function(e) {};
        options.chart.events.drilldown = function(e) {
            var chart = this;
            chart._drilldowns = chart._drilldowns || {};
            var series = chart._drilldowns[e.point.drilldown];
            if (series) {
                e.seriesOptions = series;
                chart.addSeriesAsDrilldown(e.point, series);
                dd(e);
            }
            if (!e.seriesOptions) {
                chart.showLoading('Fetching data...');
                $.getJSON(
                    '%(url)s?' + analytics.get_form_data(),
                    function(drilldowns) {
                        chart.hideLoading();
                        chart._drilldowns = drilldowns;
                        var series = drilldowns[e.point.drilldown];
                        chart.addSeriesAsDrilldown(e.point, series);
                        e.seriesOptions = series;
                        dd(e);
                    }
                );
            }
        };
    ''' % {'url': self.get_drilldown_url()}

我试图将第二部分改为:

...
                    function(drilldowns) {
                        chart.hideLoading();
                        chart._drilldowns = drilldowns;
                        e.points.forEach(function(value, key){
                            var series = drilldowns[value.drilldown];
                            chart.addSeriesAsDrilldown(value, series);
                        })
                        e.seriesOptions = series;
                        dd(e);
                    }
                );
            }
        };

但我没有把我的系列深入研究.我实际上得到一个Property xAxis of null is not allowed错误,因为当我第二次经历循环时,这组点已经变为null.

UPDATE

我们最终使用承诺修复了(实际上是同事!).我们将它设计为等到检索到第一个异步数据请求,然后addSingleSeriesAsDrilldown在每个请求上调用,直到我们到达最后一个(从图表状态导出),此时我们调用addSeriesAsDrilldown它applyDrilldown作为代码的一部分.

Answer 1

它不是官方API的一部分,但这样你就可以获得多次下钻:http://jsfiddle.net/p2xw9416/

在最低级别的AJAX请求中(如果您有多个请求),将每个系列添加为单个对象:

chart.hideLoading();
chart.addSingleSeriesAsDrilldown(e.point, series_1);
chart.addSingleSeriesAsDrilldown(e.point, series_2);
chart.applyDrilldown(); // update && animate