Wie lade ich Daten dynamisch mit JSON Call in Highcharts Drill Down Kreisdiagramm?

Question

Ich arbeite an einem Diagramm, das ich als Drilldown mit dynamischen Daten zeigen muss. Zuerst habe ich versucht, statische Drill-Down-Daten zu laden und das Diagramm funktionierte einwandfrei. Aber ich muss Daten dynamisch laden, dafür benutze ich JSON-Aufrufe, um Daten von Server mit gegebenem "Punktnamen" (ausgewähltem Punkt des Tortendiagramms) abzurufen. Wenn es das erste Mal geladen wird, funktioniert es gut, um Seriendaten in einem Kreisdiagramm anzuzeigen. Aber wenn ich auf Kreisdiagrammobjekte klicke, erhalte ich einen Serveraufruf und erhalte Daten als JSON-Antwort, aber er aktualisiert das Kreisdiagramm nicht. Außerdem muss ich die Navigation beibehalten, damit ich an jedem Punkt vorwärts oder rückwärts gehen kann.

Ich benutze unten Code, aber es funktioniert nicht als mehrstufige Kreisdiagramm, hat jemand das gleiche getan, wer unten Code überprüfen und vorschlagen kann, wie ich dies tun kann.

 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); 
     }); 

Aber ich bin immer unter Fehler

TypeError: this.addSeriesAsDrilldown is not a function

ich verwende folgende JS hoher Charts http://code.highcharts.com/highcharts.js http://code.highcharts.com/modules/drilldown.js

Answer 1

In Ajax-Request dieses Schlüsselwort bezieht sich nicht auf die Grafik. Sie müssen den Verweis auf das Diagramm in einem AJAX-Aufruf beibehalten.

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); 
          }); 
         } 
       } 
      } 

Die übrigen Optionen sind korrekt - aber Ihre Daten sollten die richtigen Drill-Down-Konfiguration haben - einen Blick auf den Antworten von Highcharts async multi level drill down nehmen, wie Ihre Daten aussehen sollten.