jquery - 使用 jquery json 对象使用 highchart 创建圆环图

Question

 var chart;
        point = null;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Srikakulam_mandal.aspx/MandalAnalysis",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    Resultarr = [];
                    for (var i in Result) {
                        var data = {
                            LocationName: Result[i].LocationName,
                            Ranking: Result[i].Ranking,
                            LocationId: Result[i].LocationId
                        };
                        Resultarr.push(data);
                    }
                        chart = new Highcharts.Chart({
                            chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                type: 'pie'
                            },
                            title: {
                                text: 'Village Development Measuring System'
                            },
                            tooltip: {
                                formatter: function () {

                                    return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %';
                                    // return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %'
                                }
                            },

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

                            series: [{
                                "data": Resultarr,
                                type: 'pie',
                                point: {
                                    events: {
                                        click: function (event) {
                                            alert(this.LocationId);
                                        }
                                    }
                                }
                            }],
                            "chart": {
                                "renderTo": "container"
                            },
                        });
                    }
            });
        });

嗨，我正在尝试使用 highchart 插件创建一个圆环图，所以我将 json 对象传递给数据。所以我想解决我无法添加图表的问题，我希望我的图表可单击每个切片并生成一个 id该切片的。查看代码，请解释我哪里做错了

var chart;
point = null;
$(document).ready(function() {
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Srikakulam_mandal.aspx/MandalAnalysis",
    dataType: "json",
    success: function(Result) {
      Result = Result.d;

      for (var i in Result) {
        var data = [{
          LocationName: Result[i].LocationName,
          Ranking: Result[i].Ranking,
          LocationId: Result[i].LocationId
        }];

        chart = new Highcharts.Chart({
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
          },
          title: {
            text: 'Village Development Measuring System'
          },
          tooltip: {
            formatter: function() {

              return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %';
              // return '<b>' + this.point.LocationName + '</b>: ' + this.point.Ranking + ' %'
            }
          },

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

          series: [{
            "data": data,
            type: 'pie',
            point: {
              events: {
                click: function(event) {
                  alert(this.LocationId);
                }
              }
            }
          }],
          "chart": {
            "renderTo": "container"
          },
        });
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">

Answer 1

数据点需要具有 y 数值，因此您可以通过将 DevelopmentPercentage 设置为点的 y 来解决此问题。祝你好运

$(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);
            }
          }
        }
      }],
    });
  }
});