无法在 Highcharts 中创建图表且 id 未定义

Question

你好我正在通过将 json 数组传递给绘制图表来构建饼图，它显示图表标签但无法找到 chart.i 需要一个圆环图，其中每个切片都是可点击的，当我点击时它带有一个 id 作为参数打开该特定切片的另一个图表所需的切片

  <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

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

Answer 2

让我们一次只关注一个问题。我假设您的数据有效并成功加载。可以使用示例数据并在 JSFiddle 示例中显示您的问题 - http://jsfiddle.net/9e79t2sp/（重新创建问题）

数据点需要有 y 数值，因此您可以通过将 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);
            }
          }
        }
      }],
    });
  }
});

无法在 Highcharts 中创建图表且 id 未定义

Unable to Create Chart in Highcharts and id is undefined

jquery

json

charts

highcharts

jquery-ajaxq