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中，否則無法觸發。

以上是我對這個餅狀圖的一些個人理解。如有什么不足還請各位大神指教。