使用xtype和Ext.create呈現餅圖

Question

我首先嚐試使用xtype將餅圖呈現爲具有邊框佈局的面板的中心區域。下面是代碼：

{ 
      xtype:'pie', 
      renderTo: Ext.getBody(), 
      width: 200, 
      height: 150, 
      animate: true, 
      layout:'fit', 
      store: store, 
      theme: 'Base:gradients', 
      series: [{ 
       type: 'pie', 
       field: 'salary', 
       showInLegend: true, 
       highlight: { 
        segment: { 
        margin: 20 
        } 
       }, 
       label: { 
        field: 'name', 
        display: 'rotate', 
        contrast: true, 
        font: '18px Arial' 
       } 
      }]  

} 

我收到以下錯誤：

Uncaught TypeError: Cannot call method 'substring' of undefined 

但是，當我採取相同的代碼，並使用Ext.create然後它工作正常。

var chart=Ext.create('Ext.chart.Chart', { 
renderTo: Ext.getBody(), 
width: 200, 
height: 150, 
animate: true, 
layout:'fit', 
store: store, 
theme: 'Base:gradients', 
series: [{ 
    type: 'pie', 
    field: 'salary', 
    showInLegend: true, 
    highlight: { 
     segment: { 
     margin: 20 
     } 
    }, 
    label: { 
     field: 'name', 
     display: 'rotate', 
     contrast: true, 
     font: '18px Arial' 
    } 
}]  
}); 

我使用圖表作爲項目來代替。

可能是什麼問題？

這裏是商店：

var store=Ext.create('Ext.data.Store',{ 
model:'Layouts.Person', 
autoLoad:true, 
data:{'items':[ 
       {'name':'john','empno':'1111','salary':'1234'}, 
       {'name':'edward','empno':'1212','salary':'2234'}, 
       {'name':'frank','empno':'1567','salary':'9774'}, 
       {'name':'michel','empno':'3456','salary':'8932'}, 
     ]}, 
proxy:{ 
    type:'memory', 
    reader:{ 
     type:'json', 
     root:'items' 
    } 
} 
}); 

的餅圖的是的xtype餡餅：

http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.chart.series.Pie.html 

Answer 1

試試這個代碼將制定出適合您。

{ 
    xtype:'chart', 
    animate: true, 
    width: 500, 
    height: 300, 
    store: store, 
    theme: 'Base:gradients', 
    series: [{ 
     type: 'pie', 
     field: 'data1', 
     showInLegend: true, 
     tips: { 
      trackMouse: true, 
      width: 140, 
      height: 28, 
      renderer: function(storeItem, item) { 
      //calculate and display percentage on hover 
      var total = 0; 
      store.each(function(rec) { 
       total += rec.get('data1'); 
      }); 
      this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1')/total * 100) + '%'); 
      } 
     }, 
     highlight: { 
      segment: { 
      margin: 20 
      } 
     }, 
     label: { 
      field: 'name', 
      display: 'rotate', 
      contrast: true, 
      font: '18px Arial' 
     } 
    }] 
}