如何捕获ExtJS PolarChart图例的点击事件？

针对你需要在PolarChart图例点击时触发自定义函数的需求，以下是两种可行的解决方案：

方案一：监听图表原生的legenditemclick事件 #

这是最直接的方式，Chart组件本身提供了legenditemclick事件，当任何图例项被点击时会自动触发：

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',
        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'));
            }
        }
    },
    listeners: {
        // 绑定图例点击事件
        legenditemclick: function(chart, item) {
            console.log('点击了图例:', item.record.get('name'));
            // 在这里编写你的自定义业务逻辑
        }
    }
});

方案二：直接在图例组件上绑定itemclick事件 #

如果你的ExtJS版本对legenditemclick支持不佳，可以直接在图例配置内绑定itemclick事件：

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',
        listeners: {
            // 直接监听图例的itemclick事件
            itemclick: function(legend, item) {
                console.log('点击了图例:', item.getRecord().get('name'));
                // 自定义逻辑
            }
        }
    },
    store: {
        fields: ['name', 'value']
    },
    series: {
        type: 'pie',
        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'));
            }
        }
    }
});

说明：之前方法无效的原因 #

• 你尝试的第一种方法中，getSeries()[0].getLegendStore()获取的是图例的数据源Store，它的itemclick事件仅针对Store内部记录的操作（如Grid组件中的行点击），并非图例UI项的点击事件，因此不会触发。
• 第二种方法如果失效，大概率是ExtJS版本差异导致的事件作用域或事件名问题，比如部分旧版本移动端图例点击事件为itemtap，桌面端为itemclick。

内容的提问来源于stack exchange，提问作者Joclelson