Comment charger dynamiquement des données à l'aide d'un appel JSON dans le graphique à secteurs Highcharts Drill Down?

Question

Je travaille sur un graphique que je dois montrer comme un zoom avant avec des données dynamiques. J'ai d'abord essayé de charger des données de forage statiques et le graphique a parfaitement fonctionné. Mais j'ai besoin de charger les données dynamiquement, pour cela, j'utilise des appels JSON pour récupérer des données du serveur avec un "nom de point" donné (point sélectionné du graphique à secteurs). Lorsqu'il est chargé la première fois, il fonctionne correctement pour afficher les données de série dans un graphique à secteurs. Mais lorsque je clique sur des objets de camemberts, je reçois un appel de serveur et obtient des données en tant que réponse JSON, mais il ne met pas à jour le camembert. De plus, j'ai besoin de garder la navigation, donc je peux avancer ou reculer à tout moment. J'utilise le code ci-dessous, mais il ne fonctionne pas comme camembert à plusieurs niveaux, quelqu'un a-t-il fait la même chose, qui peut passer en revue le code ci-dessous et suggérer comment je peux le faire.

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

Mais je reçois ci-dessous erreur

TypeError: this.addSeriesAsDrilldown is not a function

J'utilise suivant JS de graphiques haute http://code.highcharts.com/highcharts.js http://code.highcharts.com/modules/drilldown.js

Answer 1

Dans demande ajax ce mot-clé ne se réfère pas à le tableau. Vous devez garder une référence au graphique dans l'appel 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); 
          }); 
         } 
       } 
      } 

Les options de repos sont correctes - mais vos données doivent avoir la configuration appropriée drilldown - jetez un oeil sur les réponses de vos données Highcharts async multi level drill down comment devrait ressembler.