选择框创建json数据高图

时间:2013-01-31 02:12:48

标签: jquery html json

目前我正在使用带有选择框的json数据进行高清。如果选择框选择“足球”,它将显示图表,否则它将提示我错误信息。

我可以从选择框中捕获变量,但是我无法运行该函数让json数据将其输入到图表中。我需要你们的指导! :d

json数据:

$(function () {
    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"
                     }
                 ]
    };

这是我的功能:

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

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

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

                $.each(json.data, function (i, v) {
                    pts.push([v.topic, v.audience.length]);
                });
            }
            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

            }]
        });

    });


});

0 个答案:

没有答案