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

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