Question

你能不能告诉我为什么click事件在legend中不起作用。我点击图例时会尝试显示警告。这是我的代码

   $(function() {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },

        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        legend: {

            symbolHeight: 1,
            symbolWidth: 1,
            symbolRadius: 0,
            useHTML: true,
            align: 'right',
            verticalAlign: 'top',
            itemWidth: 100,
            layout: 'vertical',
            x: 0,
            y: 100,
            labelFormatter: function() {

                return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
            }
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                series: {
                    events: {
                        legendItemClick: function(event) {
                           alert('----')
                        }
                    },
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                },
                allowPointSelect: false,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                    format: '<b>{point.y}</b>',

                    style: {
                        fontWeight: 'bold',
                        color: 'white'
                    }
                },

                startAngle: 0,
                endAngle: 270,
                center: ['50%', '75%']
            }
        },
        tooltip: {
            enabled: false,
            shadow: false
        },
        series: [{
            states: {
                hover: {
                    enabled: false
                }
            },
            showInLegend: false,
            name: 'election result',
            enabled: true,
            dataLabels: {
                enabled: true
            },
            data: [
                ['A', 55],
                ['B', 65],

            ],
            size: '30%',
            innerSize: '70%',
        }, {
            states: {
                hover: {
                    enabled: false
                }
            },
            name: 'Versions',
            data: [
                ['sdsd', 55],
                ['sdf', 65],
                ['sdf', 65],
                ['sdf', 132],

            ],
            size: '70%',
            innerSize: '80%',

        }]
    });
})

我在小提琴上试过这个代码，但是没有显示警告？

  /* $('.test').on('click',function(e){
    alert('---');
    console.log(e)
       console.log($(this))
       $('div.test').css('background-color','red')
    return false;
    }) */

Answer 1

你的PlotOptions应该是，

 plotOptions: {
            series: {
                cursor: 'pointer',
                events: {
                    legendItemClick: function(event) {
                         alert('TEST');
                    },
                    click: function(event) {
                        alert('TEST');
                    }
                }
            }
        }

<强> DEMO

为什么点击事件不在传奇中工作？

1 个答案: