3

我目前有一个使用 highcharts api 创建的饼图。但是现在我想在单击某个区域时创建一个弹出窗口,它将显示来自 json 文件的系列名称和人名。

所以例如它会像:

“这些是喜欢曼彻斯特的人:杰里卡”

这是我的代码:

   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){

                                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 name = jsonFB.user1[i].name;                                      
                                                    alert("Person who like"+ this.point.name+" "+ personname);
                                             }
                                             else {

                                                 console.log("false");
                                             }
                                            }
                                        }

                            }
                        }
                        }
                    },
                    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

            }]
        });
    });


});

我试过了,但它不起作用。它说无法定义变量“名称”。

抱歉,这是我的 json 结构:

$(function () {
    var json = {
    "data": [
        {
        "topic": "Manchester United F.C.",
        "id": "/en/manchester_united_fc",
        "type": "/soccer/football_team",
        "audience": [
            {
            "userid": "100003921730958",
            "source": "Manchester United",
            "category": "Professional sports team"}
        ]},
    {
        "topic": "Chelsea F.C.",
        "id": "/en/chelsea_fc",
        "type": "/soccer/football_team",
        "audience": [
            {
            "userid": "100003921730958",
            "source": "Frank Lampard",
            "category": "Athlete"},
        {
            "userid": "100003914111287",
            "source": "Chelsea Football Club",
            "category": "Professional sports team"}
        ]}
    ]
};

    var jsonFB ={
            "user1":[
              {
              "id": "100003921730958", 
              "name": "Tan Jercia", 
              "favorite_teams": [
                {
                  "id": "19034719952", 
                  "name": "Real Madrid C.F."
                }, 
                {
                  "id": "7724542745", 
                  "name": "Manchester United"
                }
              ], 
              "interested_in": [
                "female", 
                "male"
              ], 
              "likes": {
                "data": [
                  {
                    "name": "Corrinne May", 
                    "category": "Musician/band", 
                    "id": "17393005071", 
                    "created_time": "2012-07-04T05:56:47+0000"
                  }, 
                  {
                    "name": "Men In Black", 
                    "category": "Movie", 
                    "id": "168169803229342", 
                    "created_time": "2012-06-06T21:21:19+0000"
                  }, 
                  {
                    "name": "Pubbing", 
                    "category": "Interest", 
                    "id": "106265502743004", 
                    "created_time": "2012-05-28T07:04:17+0000"
                  }, 
                  {
                    "name": "Sleeping", 
                    "category": "Public figure", 
                    "id": "102168219824412", 
                    "created_time": "2012-05-28T07:03:58+0000"
                  }, 
                  {
                    "name": "Lionel Messi", 
                    "category": "Interest", 
                    "id": "105543199478544", 
                    "created_time": "2012-05-28T07:03:37+0000"
                  }, 
                  {
                    "name": "David Villa Sánchez", 
                    "category": "Athlete", 
                    "id": "20714737025", 
                    "created_time": "2012-05-28T07:03:18+0000"
                  }, 
                  {
                    "name": "Frank Lampard", 
                    "category": "Athlete", 
                    "id": "115714874568", 
                    "created_time": "2012-05-28T10:15:04+0000"
                  },
                  {
                    "name": "Real Madrid C.F.", 
                    "category": "Professional sports team", 
                    "id": "19034719952", 
                    "created_time": "2012-05-28T07:02:57+0000"
                  }, 
                  {
                    "name": "Manchester United", 
                    "category": "Professional sports team", 
                    "id": "7724542745", 
                    "created_time": "2012-05-28T07:02:22+0000"
                  }, 
                  {
                    "name": "Badminton", 
                    "category": "Sport", 
                    "id": "112285278784684", 
                    "created_time": "2012-05-28T07:02:16+0000"
                  }, 
                  {
                    "name": "Swimming", 
                    "category": "Sport", 
                    "id": "109717462380351", 
                    "created_time": "2012-05-28T07:02:13+0000"
                  }, 
                  {
                    "name": "The Vampire Diaries - Tv Series/Books", 
                    "category": "Community", 
                    "id": "133372903419059", 
                    "created_time": "2012-05-28T06:37:38+0000"
                  }, 
                  {
                    "name": "Gossip Girl", 
                    "category": "Tv show", 
                    "id": "8811587900", 
                    "created_time": "2012-05-28T06:37:38+0000"
                  }, 
                  {
                    "name": "Dear John", 
                    "category": "Movie", 
                    "id": "154526009569", 
                    "created_time": "2012-05-28T06:37:37+0000"
                  }, 
                  {
                    "name": "The Vow", 
                    "category": "Movie", 
                    "id": "131563483577190", 
                    "created_time": "2012-05-28T06:37:37+0000"
                  }, 
                  {
                    "name": "Harry Potter", 
                    "category": "Movie", 
                    "id": "156794164312", 
                    "created_time": "2012-05-28T06:37:36+0000"
                  }, 
                  {
                    "name": "Avengers", 
                    "category": "Movie", 
                    "id": "126757470715601", 
                    "created_time": "2012-05-28T06:37:36+0000"
                  }, 
                  {
                    "name": "Batman: The Dark Knight", 
                    "category": "Movie", 
                    "id": "12887942787", 
                    "created_time": "2012-05-28T06:37:35+0000"
                  }, 
                  {
                    "name": "The Transporter", 
                    "category": "Movie", 
                    "id": "105485349484433", 
                    "created_time": "2012-05-28T06:37:34+0000"
                  }, 
                  {
                    "name": "Ip Man", 
                    "category": "Movie", 
                    "id": "104108312958644", 
                    "created_time": "2012-05-28T06:37:33+0000"
                  }, 
                  {
                    "name": "How to Train Your Dragon", 
                    "category": "Movie", 
                    "id": "96698020019", 
                    "created_time": "2012-05-28T06:37:33+0000"
                  }, 
                  {
                    "name": "Battleship", 
                    "category": "Movie", 
                    "id": "116119711759494", 
                    "created_time": "2012-05-28T06:37:32+0000"
                  }, 
                  {
                    "name": "Inception", 
                    "category": "Movie", 
                    "id": "91290503700", 
                    "created_time": "2012-05-28T06:37:32+0000"
                  }, 
                  {
                    "name": "John Carter", 
                    "category": "Movie", 
                    "id": "192790732230", 
                    "created_time": "2012-05-28T06:37:31+0000"
                  }, 
                  {
                    "name": "Transformers 3", 
                    "category": "Movie", 
                    "id": "118936754809410", 
                    "created_time": "2012-05-28T06:37:31+0000"
                  }, 
                  {
                    "name": "Snow White and the Huntsman", 
                    "category": "Movie", 
                    "id": "186450181387455", 
                    "created_time": "2012-05-28T06:37:30+0000"
                  }, 
                  {
                    "name": "This Means War", 
                    "category": "Movie", 
                    "id": "290847887611269", 
                    "created_time": "2012-05-28T06:37:29+0000"
                  }, 
                  {
                    "name": "Harry Potter", 
                    "category": "Book", 
                    "id": "107641979264998", 
                    "created_time": "2012-05-28T06:37:29+0000"
                  }, 
                  {
                    "name": "Love Story", 
                    "category": "Book", 
                    "id": "109789932381273", 
                    "created_time": "2012-05-28T06:37:28+0000"
                  }, 
                  {
                    "name": "Justin Bieber", 
                    "category": "Musician/band", 
                    "id": "67253243887", 
                    "created_time": "2012-05-28T06:37:28+0000"
                  }, 
                  {
                    "name": "Kelly Clarkson", 
                    "category": "Musician/band", 
                    "id": "18481194560", 
                    "created_time": "2012-05-28T06:37:26+0000"
                  }, 
                  {
                    "name": "Jessie J", 
                    "category": "Musician/band", 
                    "id": "145300805513355", 
                    "created_time": "2012-05-28T06:37:26+0000"
                  }, 
                  {
                    "name": "Katy Perry", 
                    "category": "Musician/band", 
                    "id": "7126051465", 
                    "created_time": "2012-05-28T06:37:25+0000"
                  }
                ], 
                "paging": {
                  "next": "https://graph.facebook.com/100003921730958/likes?limit=5000&offset=5000"
                }
              }
             }
              ],


              "user2":[
               {        
                "id": "100003944141075", 
                "name": "Kee Joshson", 
                "favorite_teams": [
                  {
                    "id": "159957123994", 
                    "name": "Oklahoma City Thunder"
                  }
                ], 
                "favorite_athletes": [
                  {
                    "id": "58643286604", 
                    "name": "Russell Westbrook"
                  }, 
                  {
                    "id": "81781281654", 
                    "name": "Kevin Durant"
                  }
                ], 
                "sports": [
                  {
                    "id": "108614982500363", 
                    "name": "Basketball"
                  }
                ], 
                "interested_in": [
                  "female"
                ], 
                "likes": {
                  "data": [
                    {
                      "name": "ilovebooks.com", 
                      "category": "Website", 
                      "id": "126036744165054", 
                      "created_time": "2012-09-20T07:42:55+0000"
                    }, 
                    {
                      "name": "Men In Black", 
                      "category": "Movie", 
                      "id": "168169803229342", 
                      "created_time": "2012-06-06T21:47:59+0000"
                    }, 
                    {
                      "name": "CSI: Miami", 
                      "category": "Tv show", 
                      "id": "31649251356", 
                      "created_time": "2012-05-28T09:46:16+0000"
                    }, 
                    {
                      "name": "Russell Westbrook", 
                      "category": "Athlete", 
                      "id": "58643286604", 
                      "created_time": "2012-05-28T09:35:55+0000"
                    }, 
                    {
                      "name": "Kevin Durant", 
                      "category": "Athlete", 
                      "id": "81781281654", 
                      "created_time": "2012-05-28T09:35:47+0000"
                    }, 
                    {
                      "name": "Oklahoma City Thunder", 
                      "category": "Professional sports team", 
                      "id": "159957123994", 
                      "created_time": "2012-05-28T09:35:40+0000"
                    }, 
                    {
                      "name": "Basketball", 
                      "category": "Sport", 
                      "id": "108614982500363", 
                      "created_time": "2012-05-28T09:35:11+0000"
                    }, 
                    {
                      "name": "Skyrim", 
                      "category": "Games/toys", 
                      "id": "154231771297586", 
                      "created_time": "2012-05-28T09:34:42+0000"
                    }, 
                    {
                      "name": "Diablo", 
                      "category": "Games/toys", 
                      "id": "157102206640", 
                      "created_time": "2012-05-28T09:34:42+0000"
                    }, 
                    {
                      "name": "Mass Effect 3", 
                      "category": "Games/toys", 
                      "id": "177295755667627", 
                      "created_time": "2012-05-28T09:34:42+0000"
                    }, 
                    {
                      "name": "House", 
                      "category": "Tv show", 
                      "id": "7608631709", 
                      "created_time": "2012-05-28T09:34:41+0000"
                    }, 
                    {
                      "name": "bands of brothers", 
                      "category": "Movie", 
                      "id": "198719453486594", 
                      "created_time": "2012-05-28T09:34:41+0000"
                    }, 
                    {
                      "name": "Green Lantern (Movie)", 
                      "category": "Movie", 
                      "id": "144959715764", 
                      "created_time": "2012-05-28T09:34:41+0000"
                    }, 
                    {
                      "name": "Journey to the Center of the Earth", 
                      "category": "Movie", 
                      "id": "203590956402328", 
                      "created_time": "2012-05-28T09:34:40+0000"
                    }, 
                    {
                      "name": "Thor", 
                      "category": "Movie", 
                      "id": "113589202010624", 
                      "created_time": "2012-05-28T09:34:40+0000"
                    }, 
                    {
                      "name": "Super 8", 
                      "category": "Movie", 
                      "id": "120684447949421", 
                      "created_time": "2012-05-28T09:34:40+0000"
                    }, 
                    {
                      "name": "Iron Man 2", 
                      "category": "Movie", 
                      "id": "305086229561341", 
                      "created_time": "2012-05-28T09:34:39+0000"
                    }, 
                    {
                      "name": "Avengers", 
                      "category": "Movie", 
                      "id": "126757470715601", 
                      "created_time": "2012-05-28T09:34:39+0000"
                    }, 
                    {
                      "name": "Journey 2: The Mysterious Island", 
                      "category": "Movie", 
                      "id": "165714120128389", 
                      "created_time": "2012-05-28T09:34:39+0000"
                    }, 
                    {
                      "name": "G.I.JOE", 
                      "category": "Movie", 
                      "id": "83425706502", 
                      "created_time": "2012-05-28T09:34:38+0000"
                    }, 
                    {
                      "name": "Snow White and the Huntsman", 
                      "category": "Movie", 
                      "id": "186450181387455", 
                      "created_time": "2012-05-28T09:34:38+0000"
                    }, 
                    {
                      "name": "The Lord of the Rings Trilogy (Official Page)", 
                      "category": "Movie", 
                      "id": "212216417436", 
                      "created_time": "2012-05-28T09:34:37+0000"
                    }, 
                    {
                      "name": "Resident Evil: Extinction", 
                      "category": "Movie", 
                      "id": "103127326394260", 
                      "created_time": "2012-05-28T09:34:37+0000"
                    }, 
                    {
                      "name": "Saving Private Ryan", 
                      "category": "Movie", 
                      "id": "131804703563360", 
                      "created_time": "2012-05-28T09:34:37+0000"
                    }, 
                    {
                      "name": "The Incredible Hulk", 
                      "category": "Movie", 
                      "id": "21700332856", 
                      "created_time": "2012-05-28T09:34:36+0000"
                    }, 
                    {
                      "name": "\"Saving Cinnamon\" (True Puppy Rescue Story)", 
                      "category": "Book", 
                      "id": "145262539912", 
                      "created_time": "2012-05-28T09:34:36+0000"
                    }, 
                    {
                      "name": "Lord Of The Rings", 
                      "category": "Book", 
                      "id": "115112848502927", 
                      "created_time": "2012-05-28T09:34:36+0000"
                    }, 
                    {
                      "name": "HOOT SNSD", 
                      "category": "Musician/band", 
                      "id": "123110274416073", 
                      "created_time": "2012-05-28T09:34:31+0000"
                    }, 
                    {
                      "name": "(SNSD) Jessica", 
                      "category": "Musician/band", 
                      "id": "152026991512413"
                    }
                  ], 
                  "paging": {
                    "next": "https://graph.facebook.com/100003944141075/likes?limit=5000&offset=5000"
                  }
                }
               }

              ]
            };
4

1 回答 1

4

我不知道您的结构如何,但一个好的解决方案是将数据与相应的点一起存储,这样您每次单击时json都不必循环。json

您可以通过以下方式进行操作:

series: [{
    type: 'pie',
    name: 'Likes',
    data: [
        {
        name: 'Person1',
        y: 45,
        personName: 'someName1'},
    {
        name: 'Person2',
        y: 26.8,
        personName: 'someName2'},
    {
        name: 'Person3',
        y: 12.8,
        sliced: true,
        selected: true,
        personName: 'someName3'},
    {
        name: 'Person4',
        y: 8.5,
        personName: 'someName4'},
    {
        name: 'Person5',
        y: 6.2,
        personName: 'someName5'},
    {
        name: 'Person6',
        y: 0.7,
        personName: 'someName6'}
    ]

}]

然后你只需要明白这一点optionsclick

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        point: {
            events: {
                click: function(event) {
                    // store point options, `this` reffers the clicked point
                    var options = this.options;
                    alert('Person who like' + options.name + ' '
                          + options.personName);
                }
            }
        }
    }
}

演示

于 2013-01-04T04:01:28.570 回答