In sencha column chart( Bar chart) itemclick not working this is not an issue. for this we need to add the chartitemevents plugin to the cartesian, the all the events will work.
This is the plugin
plugins: {
ptype: 'chartitemevents',
moveEvents: true
},
Bar 3D chart example as below.
Ext.create({
xtype: 'cartesian',
renderTo: Ext.getBody(),
plugins: {
ptype: 'chartitemevents',
moveEvents: true
},
width: 600,
height: 400,
innerPadding: '0 10 0 10',
store: {
fields: ['name', 'apples', 'oranges'],
data: [{
name: 'Eric',
apples: 10,
oranges: 3
}, {
name: 'Mary',
apples: 7,
oranges: 2
}, {
name: 'John',
apples: 5,
oranges: 2
}, {
name: 'Bob',
apples: 2,
oranges: 3
}, {
name: 'Joe',
apples: 19,
oranges: 1
}, {
name: 'Macy',
apples: 13,
oranges: 4
}]
},
axes: [{
type: 'numeric3d',
position: 'left',
fields: ['apples', 'oranges'],
title: {
text: 'Inventory',
fontSize: 15
},
grid: {
odd: {
fillStyle: 'rgba(255, 255, 255, 0.06)'
},
even: {
fillStyle: 'rgba(0, 0, 0, 0.03)'
}
}
}, {
type: 'category3d',
position: 'bottom',
title: {
text: 'People',
fontSize: 15
},
fields: 'name'
}],
listeners:{
itemclick: function(){
alert('itemclick');
}
},
series: {
type: 'bar3d',
xField: 'name',
yField: ['apples', 'oranges']
}
});
This is the plugin
plugins: {
ptype: 'chartitemevents',
moveEvents: true
},
Bar 3D chart example as below.
Ext.create({
xtype: 'cartesian',
renderTo: Ext.getBody(),
plugins: {
ptype: 'chartitemevents',
moveEvents: true
},
width: 600,
height: 400,
innerPadding: '0 10 0 10',
store: {
fields: ['name', 'apples', 'oranges'],
data: [{
name: 'Eric',
apples: 10,
oranges: 3
}, {
name: 'Mary',
apples: 7,
oranges: 2
}, {
name: 'John',
apples: 5,
oranges: 2
}, {
name: 'Bob',
apples: 2,
oranges: 3
}, {
name: 'Joe',
apples: 19,
oranges: 1
}, {
name: 'Macy',
apples: 13,
oranges: 4
}]
},
axes: [{
type: 'numeric3d',
position: 'left',
fields: ['apples', 'oranges'],
title: {
text: 'Inventory',
fontSize: 15
},
grid: {
odd: {
fillStyle: 'rgba(255, 255, 255, 0.06)'
},
even: {
fillStyle: 'rgba(0, 0, 0, 0.03)'
}
}
}, {
type: 'category3d',
position: 'bottom',
title: {
text: 'People',
fontSize: 15
},
fields: 'name'
}],
listeners:{
itemclick: function(){
alert('itemclick');
}
},
series: {
type: 'bar3d',
xField: 'name',
yField: ['apples', 'oranges']
}
});
Source from sencha

No comments:
Post a Comment