使用下拉列表将数据更改为高亮度饼图

时间:2013-01-31 05:39:08

标签: jquery html json highcharts

我的jquery文件中嵌入了2个json结构化数据。我想使用下拉列表来更改数据取决于选择值。

var json = {
        "data": [
                     {
                         "cid": "football",
                         "id": "/en/chelsea_fc",
                         "topic": "Chelsea F.C.",
                         "audience": [
                             {
                                 "userid": "100003914111287",
                                 "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",
                                 "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"
                                     }
                                 ]
                             }
                         ],
                         "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 json2 = {
        "data": [
                     {
                         "cid": "Movie",
                         "id": "/en/MIB",
                         "topic": "Men In Black",
                         "audience": [
                             {
                                 "userid": "100003914111287",
                                 "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",
                                 "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"
                                     }
                                 ]
                             }
                         ],
                         "type": "/soccer/football_team"
                     },
                     {
                         "id": "/en/Harry Potter",
                         "topic": "Harry Potter and the goblet of fire",
                         "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"
                     }
                 ]
    };

但不知怎的,我不能让变量接收数据并输入到图表中。但我可以设法使用console.log的值。意味着当我改变选择时它会捕获我的值,但我的数据不会输入它。

var pts = [];
var str = "";

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

 $("select").change(function () {

        var e = document.getElementById("selection");
        str = e.options[e.selectedIndex].value;

        if (str == json.data[0].cid) {

            data = json.data;
            console.log(str);

        }
        else if (str == json2.data[0].cid) {
            data = json2.data;
            console.log(str);

        }
        else
            alert("ERROR");






    });

  //Radialize the colors
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
    ]
        };
    });

    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 = jsonFB.user1[i].id;



                                            }

                                            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

            }]
        });

    });


});

任何人都可以帮忙吗?谢谢! :d

1 个答案:

答案 0 :(得分:0)

如果您捕获select事件,则可以使用setData()函数(http://api.highcharts.com/highcharts#Series.setData())来允许“替换”数据。显然你也可以添加Series()http://api.highcharts.com/highcharts#Chart.addSeries()