EXTJS 4.2：如何将独立面板中的饼图与图例关联

核心思路 #

将饼图和独立图例绑定到同一个数据Store，并通过事件监听实现两者的交互同步（图例点击控制饼图系列显隐、饼图点击同步图例选中状态）。

具体实现步骤 #

1. 定义共享数据Store

饼图和图例依赖同一数据源，先创建共享Store：

Ext.define('PieChartStore', {
    extend: 'Ext.data.Store',
    fields: ['name', 'data'],
    data: [
        {name: '分类1', data: 30},
        {name: '分类2', data: 50},
        {name: '分类3', data: 20},
        {name: '分类4', data: 40}
    ]
});

2. 创建饼图面板（隐藏自带图例）

在饼图配置中关闭自带图例，仅保留图表主体：

var pieChartPanel = Ext.create('Ext.panel.Panel', {
    layout: 'fit',
    height: 300,
    items: [{
        xtype: 'chart',
        store: Ext.create('PieChartStore'),
        animate: true,
        legend: false, // 关闭自带图例
        series: [{
            type: 'pie',
            field: 'data',
            showInLegend: true, // 确保系列数据能被图例识别
            label: {
                field: 'name',
                display: 'rotate'
            }
        }]
    }]
});

3. 创建独立图例面板

单独实例化Ext.chart.Legend组件，绑定到同一Store并关联饼图系列：

var legendPanel = Ext.create('Ext.panel.Panel', {
    layout: 'fit',
    height: 80,
    items: [{
        xtype: 'legend',
        store: Ext.create('PieChartStore'), // 绑定共享Store
        series: pieChartPanel.down('chart').series.items[0], // 关联饼图的具体系列
        itemSelector: '.x-legend-item'
    }]
});

4. 绑定交互事件，实现双向同步

• 图例点击控制饼图系列显隐
• 饼图点击同步图例选中状态

// 图例点击事件处理
legendPanel.down('legend').on('itemclick', function(legend, item) {
    var series = pieChartPanel.down('chart').series.items[0];
    var record = item.record;
    var index = series.store.indexOf(record);
    var sprite = series.sprites[index];
    
    // 切换饼图块可见性
    sprite.setVisible(!sprite.isVisible());
    // 更新图例项样式
    item.toggleCls('x-legend-item-hidden');
});

// 饼图点击事件处理
pieChartPanel.down('chart').on('itemclick', function(chart, item) {
    var legend = legendPanel.down('legend');
    var record = item.storeItem;
    var legendItem = legend.items.getAt(legend.store.indexOf(record));
    
    // 切换图例项选中样式
    legendItem.toggleCls('x-legend-item-hidden');
    // 同步饼图块可见性
    item.sprite.setVisible(!item.sprite.isVisible());
});

5. 组合两个面板（VBox布局）

将饼图面板和图例面板放入父容器，采用VBox布局实现上下排列：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [pieChartPanel, legendPanel]
});

关键注意事项 #

• 饼图series配置中showInLegend必须设为true，否则图例无法识别系列数据
• 图例必须关联饼图的具体series实例，而非仅绑定Store
• 同步状态时需同时处理图表精灵和图例项的样式，避免交互不一致

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