ExtJS如何将单击事件添加到饼图片段

Question

我使用sencha ExtJS网站中的饼图示例创建了一个饼图,我想在每个Pie切片上添加一个click事件,以便我处理该切片上的上下文数据.我能够向Pie添加一个点击监听器,但不知道如何获取切片上的数据.

下面是ExtJS代码.

Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [{
        'name': 'January',
        'data1': 10
    }, {
        'name': 'February',
        'data1': 7
    }, {
        'name': 'March',
        'data1': 5
    }, {
        'name': 'April',
        'data1': 2
    }, {
        'name': 'May',
        'data1': 27
    }]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    animate: true,
    store: store,
    theme: 'Base:gradients',
    legend: { // Pie Chart Legend Position
        position: 'right'
    },
    series: [{
        type: 'pie',
        field: 'data1',
        showInLegend: true,
        tips: {
            trackMouse: true,
            width: 140,
            height: 28,
            renderer: function(storeItem, item){
                //calculate and display percentage on hover
                var total = 0;
                store.each(function(rec){
                    total += rec.get('data1');
                });
                this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
            }
        },
        highlight: {
            segment: {
                margin: 5
            }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        },
        listeners: {//This Doesnt Work :(
            itemclick: function(o){
                alert('clicked at : ' + o);
            }
        }

    }],
    listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked ..................................
        click: {

            element: store, //bind to the underlying el property on the panel
            fn: function(o, a){

                alert('clicked' + o + a + this);
            }
        }

    }

});

});

请帮助.

此致,拉利特

Answer 1

以下是获取点击切片数据的方法.系列类通过Observable语法支持侦听器,它们是:

1. itemmouseup 当用户与标记交互时.
2. itemmousedown 当用户与标记交互时.
3. itemmousemove 当用户使用标记进行迭代时.
4. afterrender 将在动画结束或完全呈现系列时触发.

我将利用该itemmousedown事件捕获点击的切片.这是我的监听方法:

series: [{
        .
    .
    .
    listeners:{
        itemmousedown : function(obj) {
        alert(obj.storeItem.data['name'] + ' &' + obj.storeItem.data['data1']);
    }
    }
    .
}]

请注意,我已将我的听众置于系列内而不是图表中!现在,obj变量包含大量信息.对于每个系列,获取数据的属性将有所不同.因此,您必须使用firebug或其他一些开发人员工具仔细检查对象.

现在,如果是Piecharts,您可以使用以下命令获取切片信息obj:

obj.storeItem.data['your-series-variable-name']

这是obj来自萤火虫..