Jquery onclick弹出式海图piechart

我目前使用highcharts api创建了一个饼图。但是现在我想在单击某个区域时创建一个弹出窗口，它将显示json文件中的序列名和人名

例如，它将类似于：

“这就是喜欢曼彻斯特的人：杰里卡”

这是我的代码：

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

                                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 name = jsonFB.user1[i].name;                                      
                                                    alert("Person who like"+ this.point.name+" "+ personname);
                                             }
                                             else {

                                                 console.log("false");
                                             }
                                            }
                                        }

                            }
                        }
                        }
                    },
                    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

            }]
        });
    });


});

---

我不知道您的

json

结构如何，但一个好的解决方案是使用相应的点存储数据，这样您就不必在每次单击时循环通过

json

您可以通过以下方式执行此操作：

series: [{
    type: 'pie',
    name: 'Likes',
    data: [
        {
        name: 'Person1',
        y: 45,
        personName: 'someName1'},
    {
        name: 'Person2',
        y: 26.8,
        personName: 'someName2'},
    {
        name: 'Person3',
        y: 12.8,
        sliced: true,
        selected: true,
        personName: 'someName3'},
    {
        name: 'Person4',
        y: 8.5,
        personName: 'someName4'},
    {
        name: 'Person5',
        y: 6.2,
        personName: 'someName5'},
    {
        name: 'Person6',
        y: 0.7,
        personName: 'someName6'}
    ]

}]

然后您只需在

单击
上获取点
选项

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        point: {
            events: {
                click: function(event) {
                    // store point options, `this` reffers the clicked point
                    var options = this.options;
                    alert('Person who like' + options.name + ' '
                          + options.personName);
                }
            }
        }
    }
}

“喜欢的人”警报有效吗？警报有效。但是我现在无法显示主题名，因为我的json结构中包含了“曼彻斯特”或“切尔西”。我试过你的方法，但不管用。
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        point: {
            events: {
                click: function(event) {
                    // store point options, `this` reffers the clicked point
                    var options = this.options;
                    alert('Person who like' + options.name + ' '
                          + options.personName);
                }
            }
        }
    }
}