Невозможно создать диаграмму в Highcharts и id undefined

Question

Hi Я создаю круговую диаграмму, передавая массив json, чтобы рисовать его, отображая метки диаграммы, но не смог найти диаграмму. Мне нужна диаграмма пончика, где каждый фрагмент можно щелкнуть который несет в себе идентификатор, как это параметр, когда я нажимаю срез не нужно открывать другую диаграмму конкретного среза

<script> 
 
     $(document).ready(function() { 
 
      $.ajax({ 
 
       type: "POST", 
 
       contentType: "application/json; charset=utf-8", 
 
       url: "bar.aspx/DistrictAnalysis", 
 
       data: "{}", 
 
       dataType: "json", 
 
       success: function (Result) { 
 
        Result = Result.d; 
 
        var data = []; 
 
        for (var i in Result) { 
 
         //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID); 
 
         var jsondata = { city: Result[i].City, DevelopmentPercentage: Result[i].DevelopmentPercentage, ID: Result[i].ID } 
 
         data.push(jsondata); 
 
        } 
 
        DreawChart(data); 
 
        console.log(data); 
 
        
 
       }, 
 
       error: function (Result) { 
 
        alert("Error"); 
 
       } 
 
      }); 
 
     
 
      function DreawChart(series) { 
 
    
 
      $('#container').highcharts({ 
 
       chart: { 
 
        plotBackgroundColor: null, 
 
        plotBorderWidth: null, 
 
        plotShadow: false, 
 
        type: 'pie' 
 
       }, 
 
       title: { 
 
        text: 'Village Development Measuring System' 
 
       }, 
 
       tooltip: { 
 
        formatter: function() { 
 
         return '<b>' + this.point.city + '</b>: ' + this.point.DevelopmentPercentage + ' %'; 
 
        } 
 
       }, 
 
      
 
       plotOptions: { 
 
        pie: { 
 
         allowPointSelect: true, 
 
         cursor: 'pointer', 
 
         dataLabels: { 
 
          enabled: true, 
 
          format: '<b>{point.city}</b>: {point.percentage:.1f} %', 
 
          style: { 
 
           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
          }, 
 
          connectorColor: 'silver' 
 
         } 
 
        } 
 
       }, 
 
       
 
       series: [ 
 
        { 
 
         data: series, 
 
        type: 'pie', 
 
        dataType: 'json', 
 
         animation: false, 
 
         point: { 
 
          events: { 
 
           click: function (event) { 
 
            //var id = this.ID; 
 
            
 
            //alert(id); 
 
            
 
            ////alert(event.point.ID); 
 
            //alert(this.point.ID); 
 
            //alert(this.x [![able to get id but chart cannot be created][2]][2]+ " " + this.y); 
 
           } 
 
          } 
 
         } 
 
        } 
 
       ], 
 
      }); 
 
     } 
 
     }); 
 
    </script> 
 
[![able to get id but chart cannot be created][1]][1]

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

Давайте сосредоточимся на одной проблеме за раз. Я предполагаю, что ваши данные действительны, загружены успешно. Можно использовать иллюстративные данные и показать вашу проблему в JSFiddle примера - http://jsfiddle.net/9e79t2sp/ (проблема воссоздана)

Точка данных должна иметь у Numberic значения, так что вы можете это исправить, установив DevelopmentPercentage в качестве y точки - пример : http://jsfiddle.net/9e79t2sp/1/ (раствор) код

решение:

$(function() { 
    // paste your exemplary Result JSON data into Result variable 
    var Result = {"d":[{"City":"NYC","DevelopmentPercentage":42,"ID":1234},{"City":"Berlin","DevelopmentPercentage":72,"ID":2345},{"City":"Tokyo","DevelopmentPercentage":92,"ID":5432}]}; 

    //success: function (Result) { 
    Result = Result.d; 
    var data = []; 
    for (var i in Result) { 
    //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID); 
    var jsondata = { 
     city: Result[i].City, 
     y: Result[i].DevelopmentPercentage, 
     ID: Result[i].ID 
    } 
    data.push(jsondata); 
    } 
    DreawChart(data); 
    console.log(data); 
    //} //end of success function 

    function DreawChart(series) { 
    $('#container').highcharts({ 
     chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
     }, 
     title: { 
     text: 'Village Development Measuring System' 
     }, 
     tooltip: { 
     formatter: function() { 
      return '<b>' + this.point.city + '</b>: ' + this.point.y + ' %'; 
     } 
     }, 

     plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
      enabled: true, 
      format: '<b>{point.city}</b>: {point.percentage:.1f} %', 
      style: { 
       color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
      }, 
      connectorColor: 'silver' 
      } 
     } 
     }, 

     series: [{ 
     data: series, 
     type: 'pie', 
     dataType: 'json', 
     animation: false, 
     point: { 
      events: { 
      click: function(event) { 
       //var id = this.ID; 

       //alert(id); 

       ////alert(event.point.ID); 
       //alert(this.point.ID); 
       //alert(this.x [![able to get id but chart cannot be created][2]][2]+ " " + this.y); 
      } 
      } 
     } 
     }], 
    }); 
    } 
}); 

Answer 2

Внутри point.events.click обратного вызова this относится к точке нажатия, поэтому нет необходимости отменить ссылку на this.point.ID

series: [{ 
    // .... 
    point: { 
     events: { 
     click: function (event) { 
      // the ID field of the point 
      var id = this.ID; 
      // the whole series of the point 
      var series = this.series; 
     } 
     } 
    }