匹配 highcharts 饼图中的 2 个数组值答案

【问题标题】：Matching 2 array values in highcharts pie charts匹配 highcharts 饼图中的 2 个数组值
【发布时间】：2012-12-12 16:46:21
【问题描述】：

我在这里使用highchart创建了饼图，然后我希望当点击饼图区域时，控制台会根据我使用“if else”设置的条件写入一些数据。

所以我这里有 2 个 json 数据：

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"
            }
        }}
    ]
};

所以基本上我希望当我通过匹配我尝试使用循环数组匹配方法的两个用户 ID 单击饼图区域时检索用户的名称并写入控制台。但是它不起作用。 :(

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    for (i = 0; i < jsonFB.user1[i]; i++) {

                        for (j = 0; j < json.data[j].audience[j]; j++) {

                            if (jsonFB.user1[i].id == json.data[j].audience[j].userid) {

                                var name = jsonFB.user1[i].name;
                                console.log(name);
                            }
                            else {

                                console.log("false");
                            }

                        }
                    }

                }
            }
        },

【问题讨论】：

标签： jquery json

【解决方案1】：

问题在于您的for 条件：

for (i = 0; i < jsonFB.user1[i]; i++) {
    for (j = 0; j < json.data[j].audience[j]; j++) {

我认为您的意思是遍历所有 user1s 和（datas 和）audiences，对吗？

for (i = 0; i < jsonFB.user1.length; i++) {
    for (k = 0; k < json.data.length; k++) {
        for (j = 0; j < json.data[k].audience.length; j++) {

现在你的（改编的）if 可以工作了：

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

然而，我必须指出，这只会确保在 json 和 jsonFB 数据之间的每次匹配时将用户名打印到控制台一次。与图表中单击的内容没有任何关系。检查Highcharts API。恐怕你必须自己解决细节，但我建议从event.point 开始（你需要的信息似乎在那里）：

click: function(event) {
    console.log(event.point);

This demo 也可能会有所帮助。

更新：如果您有多个用户（例如user1、user2 等），您可以像这样迭代它们：

$.each(jsonFB, function(prop, value) {
    if ( prop.indexOf("user") == 0 ) { // Check if the name starts with "user"
        for (i = 0; i < value.length; i++) {...} // Replaces jsonFB.user1.length
    }
});

【讨论】：

如果我想在“JSONFB”中再添加一个用户怎么办？我的代码是否需要添加另一个循环来首先检查其用户？所以它变成了 (var s=0; s<.jsonfb.length s>
按照你上面所说的继续？
@user1914667 是的，但是如果您的用户是 properties（而不是列表的元素）——比如user1、user2 等——那么迭代的方式是不同的。由于您使用的是 jQuery，因此最简单的方法是 $.each(jsonFB, function(prop,value) { ... })，但您也可以使用 for ( var prop in jsonFB ) { ... }。有关详细信息，请参阅 this 和 this。另请参阅更新的答案。