EXT JS柱状图鼠标点击事件：获取条形名称与对应数值

你可以通过给柱状图的系列（Series）绑定itemclick事件，来获取点击条形对应的名称和数值，具体实现如下：

核心代码示例 #

Ext.create('Ext.chart.CartesianChart', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    // 数据源字段需和你的业务数据对应
    store: {
        fields: ['name', 'value'],
        data: [
            {name: 'metric one', value: 10},
            {name: 'metric two', value: 27},
            {name: 'metric three', value: 15}
        ]
    },
    axes: [
        {type: 'numeric', position: 'left', fields: ['value']},
        {type: 'category', position: 'bottom', fields: ['name']}
    ],
    series: [{
        type: 'bar',
        xField: 'name',
        yField: 'value',
        listeners: {
            // 绑定条形点击事件
            itemclick: function(series, item) {
                // 获取点击条形对应的数据源记录
                var record = item.record;
                // 从记录中提取名称和数值
                var metricName = record.get('name');
                var metricValue = record.get('value');
                
                // 替换为你的业务逻辑
                console.log('条形名称：', metricName);
                console.log('对应数值：', metricValue);
                Ext.Msg.alert('点击数据', `名称：${metricName}\n数值：${metricValue}`);
            }
        }
    }]
});

关键说明 #

• itemclick事件触发时，参数里的item.record就是当前点击条形对应的数据源记录
• 用record.get('字段名')提取数据，这里的name和value要和你自己Store中定义的字段名一致
• 不同版本Ext JS的事件参数可能略有差异，但核心逻辑都是通过record获取对应数据

内容的提问来源于stack exchange，提问作者Cric News For Fans