extjs4 柱状图示例

extjs里面的chart图表,本例以柱状图显示:

var echartGStore = Ext.create(‘Ext.data.Store’, {
fields: [‘paptitle’,’escore’],
proxy : {
type : ‘ajax’,
pageSize : 30,
url : ‘mychartExrecord.action’,
reader : {
type : ‘json’,
root : ‘root’,
totalProperty : ‘totalCount’
}
}
});

echartGStore.load();

var examchart = Ext.create(‘Ext.app.Portlet’,{
id: ‘portlet-examchart’,
title: ‘考试统计’,
height: 300,
items:[{
xtype: ‘chart’,
animate: true,
store: echartGStore,
axes: [{
type: ‘Numeric’,
position: ‘left’,
fields: ‘escore’,
title: ‘成绩’,
grid: false
},{
type: ‘Category’,
position: ‘bottom’,
fields: ‘paptitle’,
title: false
}],
series: [{
type: ‘column’,
axis: ‘left’,
highlight: true,
xField: ‘paptitle’,
yField: ‘escore’,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get(‘paptitle’) + ‘: ‘ + storeItem.get(‘escore’));
}
},
label: {
display: ‘insideEnd’,
‘text-anchor’:’middle’,
field: ‘escore’,
renderer: Ext.util.Format.numberRenderer(‘0’),
color: ‘#333’
}
}]
}]
});

Snap1

 

参考:http://lvjava.com/?p=298

This entry was posted in Computer, Java. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s