如何捕获PolarChart Extjs图表图例上的点击事件

Question

如何在 Extjs 中点击 PolarChart 图例时激活某些功能或事件。

图表代码：

Ext.define('SIEM.agents.ChartPie',{
    extend: 'Ext.chart.PolarChart',
    alias: 'widget.siem-chart-pie',
    requires: [
        'Ext.chart.series.Pie',
        'Ext.chart.interactions.Rotate',
        'Ext.chart.interactions.ItemHighlight'
    ],
    interactions: ['rotate', 'itemhighlight'],
    height: 175,
    legend: {
        docked: 'right',
    },
    store: {
        fields: ['name', 'value']
    },
    series: {
        type: 'pie',
        // highlight: true,
        angleField: 'value',
        radiusField: 'name',
        donut: 70,
        label: {
            field: 'name',
            display: 'inside',
            contrast: true,
            font: "12px Arial",
            color: '#fff',
        },
        tooltip: {
            trackMouse: true,
            width: 120,
            height: 40,
            renderer: function (toolTip, record, ctx) {
                toolTip.setHtml(record.get('name') + ': ' + record.get('value'));
            }
          }
    },
})

我尝试过但没有成功：

Ext.define('SIEM.agents.ChartPie',{
    extend: 'Ext.chart.PolarChart',
    alias: 'widget.siem-chart-pie',

    // Restante do código do gráfico...

    listeners: {
        afterrender: 'onChartRender',

        // o que a documentação fala
        //click: {
        //    element: 'el',
        //    fn: function(){ console.log('click el'); }
        //},
    },
    onChartRender: function() {
        var me = this;
        me.getSeries()[0].getLegendStore().on('itemclick', function(legend, item) {
            console.log('Clicou na legenda:', item.get('name'));
        });
    }
});

在堆栈溢出上搜索这里我发现了这个，但它也不起作用

legend: {
    docked: "bottom",
    listeners: {
        itemclick: "onItemClick",
    }
},

这些是我尝试过的方法，如果有人可以帮助我，我会提前感激不尽。

Answer 1

如here所写，目前还没有这样的传奇听众。

图例事件 boxready 和 itemclick 也不起作用。

您可以添加图表事件click，这里是fiddle。

添加特定的画布监听器并不是那么简单。

我想唯一的方法是检查您的点击事件 XY 坐标是否在图例矩形中。