Как динамически загружать данные с помощью вызова JSON в круговой диаграмме Highcharts Drill Down?

Я работаю над графиком, который я должен показать как развертку с динамическими данными. Сначала я попытался загрузить статические данные детализации, и график работал отлично. Но мне нужно загружать данные динамически, для этого я использую вызовы 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

введите здесь описание изображения


json asp.net highcharts drilldown
person Aqeel    schedule 22.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В запросе 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 многоуровневая асинхронная детализация того, как должны выглядеть ваши данные.

person morganfree    schedule 22.03.2017
comment
спасибо за ваш ответ, после обновления этого утверждения эта ошибка была удалена, но график все еще не показывает подробностей, когда я нажимаю на любую точку, ниже приведен результат, который я получаю в ответе JSON {series: [{id: 1, name: Dep1 , y: 45, детализация: Dep1}, {id: 2, name: Dep2, y: 25, детализация: Dep2}, {id: 3, name: Dep3, y: 10, детализация: Dep3}, {id: 4 , имя: Dep4, y: 5, детализация: Dep4}, {id: 5, имя: Dep5, y: 15, детализация: Dep5}]} - person Aqeel; 23.03.2017
comment
это должно быть {data: [...]} вместо серии - jsfiddle.net/h6pt9yap - person morganfree; 23.03.2017