ExtJS 饼状图报表

简单的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中，否则无法触发。

以上是我对这个饼状图的一些个人理解。如有什么不足还请各位大神指教。