我使用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);
}
}
}
});
});
请帮助。
此致 拉利特
答案 0 :(得分:12)
以下是获取点击切片数据的方法。系列类通过Observable语法支持侦听器,它们是:
itemmouseup
当用户与标记互动时。itemmousedown
当用户与标记互动时。itemmousemove
当用户使用标记进行迭代时。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
..
答案 1 :(得分:0)
我正在使用更具选择性的方法,因为我需要添加一些自定义逻辑,以便为我们的图表实现拖放。因此,在图表定义之后,我只需添加以下内容:
// 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 < ln; i++) {
var sprite = items[i];
if (sprite.type != "circle") { continue; } // only add listeners to circles
// Additional funky checks for the draggable sprites
sprite.on("mousedown", onSpriteMouseDown, sprite); // mouse down ONLY for sprites
}
surface.on("mousemove", onSurfaceMouseMove, surface); // mouse move for the entire surface
surface.on("mouseup", onSurfaceMouseUp, surface);
干杯! 弗兰克