简单的ExtJS饼状图报表。
先上源码，咱再慢慢解析：
Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': '北京', 'data': 10 },
{ 'name': '天津', 'data': 5},
{ 'name': '上海', 'data': 8 },
{ 'name': '深圳', 'data': 7 },
{ 'name': '广州', 'data': 6 },
{ 'name': '济南', 'data': 5 },
{ 'name': '郑州', 'data': 4 },
{ 'name': '石家庄', 'data': 3 }
]
});
Ext.create("Ext.panel.Panel",{
width:600,
height:500,
title:"饼状图",
layout:"fit",
renderTo:Ext.getBody(),
items:[{
xtype:"chart",
store:store,
animate:true,
legend: {
position: 'right'
},
series:[{
type:"pie",
field:"data",
donut:true,
showInLegend: true,
label:{
display:"name",
contrast:true,
},
tips:{
trackMouse:true,
renderer:function(storeItem,item){
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get("data"));
}
},
highlight:{
segment:{
margin:20
}
},
listeners:{
itemclick:function(o){
var rec=store.getAt(o.index);
alert(rec.get("data"));
}
}
}]
}]
});
})上述代码便是一个简单的饼状图，数据这里我采用的是本地数据。
示例效果如下图所示：
现在我们来解析一下上面的代码：
里面的store存储数据，这里我就不详细解释了。我这里采用的是本地的数据。
如效果图所示，我采用了一个panel来包含该饼状图。
xtype:"chart" ：创建一个图表
series：是为所有图标系列包含公共逻辑抽象类。属性type:"pie"，用来表示采用的是饼状报表。
field:"data"：当前饼状图块中的数据值。
display:"name"：如上图所示，是用来显示饼状图中的文字的。
tips：这里是用来显示鼠标放在饼状图上的时候，给你的一个提示。用来显示当前图块的信息。
trackMouse:true：此属性设置为true表示提示框跟随你的鼠标而动。
segment：该属性是用来控制，当鼠标放在当前图块中的时候分开的距离。这里margin一般为20 当数值比20 大或者小的时候则会出现一些空白。具体效果可以自己稍微尝试一下。
lengend和showInLegend：这两个必须同时设置，操作右侧的小图例。
itemclick：点击事件。这个事件需要设置在series中，否则无法触发。
以上是我对这个饼状图的一些个人理解。如有什么不足还请各位大神指教。