extjs常见的三种统计图

Ext.onReady(function() {
Ext.chart.Chart.CHART_URL = "../extjs/resources/charts.swf";
//定义ColumnModel
var store = new Ext.data.JsonStore( {
fields : [ 'name', 'visits', 'views' ],
data : [ {
name : '日本',
visits : 245000,
views : 3000000
}, {
name : '韩国',
visits : 240000,
views : 3500000
}, {
name : '泰国',
visits : 300000,
views : 2000000
}, {
name : '伊朗',
visits : 375000,
views : 3200000
}, {
name : '法国',
visits : 590000,
views : 3500000
}, {
name : '德国',
visits : 395000,
views : 6800000
}, {
name : '中国',
visits : 580600,
views : 8500000
} ]
});
//柱状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}




});
//折叠图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container1',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'linechart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}




});
//饼状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container2',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'piechart',
store : store,
categoryField : 'name',
dataField : 'visits',
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
},
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}




});
});