jquery - 使用 JSON 文件创建 highchart 饼图

Question

嗨，我想使用此 JSON 数据创建一个高饼图，通过将用户 ID 替换为人数来显示喜欢足球俱乐部（例如切尔西）的人数，但我无法实现：

{
  "data": [
    {
      "id":    "/en/chelsea_fc",
      "topic": "Chelsea F.C.",
      "audience": [{
        "information": [
          {
            "category": "Athlete",
            "source":   "Didier Drogba"
          },
          {
            "category": "Athlete",
            "source":   "Frank Lampard"
          },
          {
            "category": "Professional sports team",
            "source":   "Chelsea Football Club"
          },
          {
            "category": "favorite_teams",
            "source":   "Chelsea Football Club"
          }
        ],
        "userid": "100003914111287"
      }],
      "type":  "/soccer/football_team"
    },
    {
      "id":    "/en/manchester_united_fc",
      "topic": "Manchester United F.C.",
      "audience": [{
        "information": [
          {
            "category": "Athlete",
            "source":   "Ryan Giggs"
          },
          {
            "category": "Professional sports team",
            "source":   "Manchester United"
          },
          {
            "category": "favorite_teams",
            "source":   "Manchester United"
          }
        ],
        "userid": "100003921730958"
      }],
      "type":  "/soccer/football_team"
    }
  ]
}

这是我尝试过的，但它不起作用：

var pts = [];
$.each(json.data, function(i,v){
    pts.push([v.topic, v.audience.length]);
});

 var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Facebook like'
            },
            tooltip:{
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 0
                }


            ,
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    point: {
                        events:{
                            click: function (event){
                                //var personame =" ";
                                var id ="10150616324193820";
                                for (var i = 0; i < jsonFB.user1.length; i++) {
                                    for (var k = 0; k < json.data.length; k++) {
                                        for (var j = 0; j < json.data[k].audience.length; j++) {


                                       if (jsonFB.user1[i].id = json.data[k].audience[j].userid) {
                                            var personname = jsonFB.user1[i].name;

                                            var id = 100003921730958;



                                            }

                                       else {

                                           alert("Error!");

                                             }

                                             }


                                            }

                                    alert("Person who like "+this.name +"  are"+ personname);
                                    var ans = confirm("Do you want to view this person profile?");
                                    if (ans)
                                      window.location="http://www.facebook.com/people/@/"+id;


                            }
                        }
                        }
                    },
                    showInLegend: true ,
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',

                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +'%';
                        }

                    }
                }
            },

            series: [{
                type: 'pie',
                name: 'Likes',
                data: pts

            }]
        });
    });


});

Answer 1

你应该修改你的解析器，因为在这一行

pts.push([v.topic, v.audience.length]);

长度不正确，但您需要从信息长度中获取值。因此，解析器应如下所示：

$.each(tmp.data, function(i,v){
    pts.push([v.topic, v.audience[0].information.length]);
});

其中 tmp.data 是来自 JSON 的数据。