ExtJS How to add a click event to Pie Chart pieces

问题:

I have created a Pie chart using the Pie chart example in sencha ExtJS website , I wanted to add a click event to the each Pie slice so that i get handle to the contextual data on that slice. I was able to add a click listener to the Pie but not sure how to get the data on the slice.

Below is the ExtJS code.

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);             }         }      }  });  }); 

Kindly help.

Regards, Lalit

回答1:

Here is how you get data of the clicked slice. The series class supports listeners via the Observable syntax and they are:

1. itemmouseup When the user interacts with a marker.
2. itemmousedown When the user interacts with a marker.
3. itemmousemove When the user iteracts with a marker.
4. afterrender Will be triggered when the animation ends or when the series has been rendered completely.

I will make use of the itemmousedown event to capture the clicked slice. Here is my listener method:

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

Note that I have placed my listener inside the series and not the chart! Now, the obj variable holds lot of information. For each series, the property to get data will differ. So, you will have to carefully inspect the object using firebug or some other developer tool.

Now, in case of Piecharts, you can get the slice information by using the obj:

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

Here is the obj from firebug..

回答2:

I'm using a more selective approach, because I needed to add some custom logic in order to implement drag-and-drop for our charts. So after the chart definition I just add the following:

// Add drag-and-drop listeners to the sprites var surface = chart.surface; var items = surface.items.items; for (var i = 0, ln = items.length; i 

Cheers! Frank

文章来源: ExtJS How to add a click event to Pie Chart pieces