0

我有一个带有选择框的 html 页面。I code it in a Jquery file so that when when the selection selected is "football" then it will compare a json data in Jquery and generate the chart. 但是,如果我选择“电影”,它会显示一个错误。

But I couldn't make it response when the selection changes.

这是我的 html 代码:

<title>Pie chart</title>
    <style type="text/css">
        .style1
        {
            text-align: center;
        }
    </style>
</head>
<body>

<p class="style1">
        Select your category :
        <select id="selection" name="D1" onclick="return selection_onclick()">
            <option value ="football" selected =selected>Football Team</option>
            <option value ="Movie">Movie</option>
        </select></p>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
    <br />
    </div>
</body>

这是我嵌入了 json 的 Jquery 文件:

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

接下来这是我生成图表的方式:

     $("#selection").on('change', function(){
   // var e = document.getElementById("selection");
        var id =$(this).val();
        if(id = json.data[0].cid) {
        console.log(id)
        $.each(json.data, function (i, v) {
        pts.push([v.topic, v.audience.length]);
        });
        }

        else
        alert("Wrong data");





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

        /*var e = document.getElementById("selection");
        var id = e.options[e.selectedIndex].value;
        console.log(id);

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

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

                }]
            });


    });


});
4

1 回答 1

0

onclick不是您感兴趣的事件。您必须使用onchange代替:

<select id="selection" name="D1" onchange="selection_onclick()">
    <option value ="football" selected =selected>Football Team</option>
    <option value ="Movie">Movie</option>
</select></p>

希望能帮助到你,

于 2013-01-29T08:48:32.737 回答