如何在 Highcharts Drill Down 饼图中使用 JSON 调用动态加载数据？

Question

我正在制作一个图表，我必须将其显示为带有动态数据的向下钻取。首先，我尝试加载静态钻取数据，并且图形工作得非常好。但我需要动态加载数据，为此，我使用 JSON 调用从具有给定“点名称”（饼图的选定点）的服务器获取数据。第一次加载时，可以在饼图中显示系列数据。但是当我单击饼图对象时，我收到一个服务器调用并获取数据作为 JSON 响应，但它没有更新饼图。另外，我需要保持导航，所以我可以随时前进或后退。

我正在使用下面的代码，但它不能用作多层饼图，是否有人做过同样的事情，谁可以查看下面的代码并建议我该怎么做。

        var options = {
            chart: {
                renderTo: 'chart_divDrillDownGraph',
                type: 'pie',
                events: {
                    drilldown: function (e) { 
                        if (!e.seriesOptions) {
                            if (!e.seriesOptions) {
                                $.get("http://localhost:54877/GetStats.aspx?key=drilldownGraph&selectedPointName=" + e.point.name, function (data) {
                                    this.addSeriesAsDrilldown(e.point, data); 
                                });
                            }
                        }
                    }
                }
            },
            title: {
                text: 'Report of March 2017'
            },
            subtitle: {
                text: 'Click the slices to view details.'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}<span style="unicode-bidi: bidi-override;">%</span>'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span><span style="unicode-bidi: bidi-override;">: <b>{point.y:.2f}%</b> of total</span><br/>'
            },
            series: [{}],

            drilldown: {
            }
        };

        if (this.name != "undefined" && this.name != null)
            selectedlevelName = this.name;
        else
            selectedlevelName = "";

        var url =  "http://localhost:54877/GetStats.aspx" + "?key=drilldownGraph&selectedPointName=" + selectedlevelName;
        $.getJSON(url,  function(data) {
            options.series[0].data = data; 
            var chart = new Highcharts.Chart(options);
        });

但是我遇到了错误

TypeError: this.addSeriesAsDrilldown 不是函数

我正在使用以下 JS 的高位图表 http://code.highcharts.com/highcharts.js http://code.highcharts.com/modules/drilldown.js

Answer 1

在 ajax 请求中，此关键字不引用图表。您需要在 ajax 调用中保持对图表的引用。

events: {
                drilldown: function (e) {
                        if (!e.seriesOptions) {
                           var chart = this;

                            $.get("http://localhost:54877/GetStats.aspx?key=drilldownGraph&selectedPointName=" + e.point.name, function (data) {
                                chart.addSeriesAsDrilldown(e.point, data); 
                            });
                        }
                }
            }

其余选项均正确 - 但您的数据应具有正确的向下钻取配置 - 查看来自 Highcharts async multi level drill down 的答案，您的数据应该是什么样子。