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:この2つは同時に設定し、右側の小さな図例を操作する必要があります.
itemclick:イベントをクリックします.このイベントはseriesに設定する必要があります.そうしないとトリガーできません.
以上は私がこの餅状図に対するいくつかの個人的な理解です.何か足りないことがあったら、大神さんに教えてください.