ハイチャートで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); 
     }); 

しかし、私は、私は、このキーワードはを参照していないAJAX要求で http://code.highcharts.com/highcharts.js http://code.highcharts.com/modules/drilldown.js

Answer 1

高チャートの以下のJSを使用していますエラー

TypeError: this.addSeriesAsDrilldown is not a function

の下に取得していますチャート。あなたは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からの回答を見てみましょう。