我目前有一个使用highcharts api创建的饼图。但是现在我想创建一个弹出窗口，当我点击某个区域时它将显示系列名称和json文件中的人名。
所以例如它会像：
“这些人喜欢曼彻斯特：Jerica”
这是我的代码：
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
}]
});
});
});
我试过但它不起作用。它说无法定义变量“name”。
抱歉这是我的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"
}
}
}
]
};
答案 0 :(得分：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'}
]
}]
然后你必须在options上获得click点。
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);
}
}
}
}
}