根据所选选项生成图表

Generate chart according to selected options

本文关键字：选项      更新时间：2023-09-26

我有一个带有选择框的html页面。我将其编码在 Jquery 文件中，以便当选择的选项是"足球"时，它将比较 Jquery 中的 json 数据并生成图表。但是，如果我选择"电影"，它将显示错误。

但是当选择发生变化时，我无法做出回应。

这是我的 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>

这是我的Jquery文件，其中嵌入了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"
                     }
                 ]
    };

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

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

    });

});

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>

希望对您有所帮助，

相关文章：