本文例項講述了extjs圖形繪製之餅圖實現方法。分享給大家供大家參考，具體如下：

這篇文章將介紹extjs中自帶的餅圖。

程式碼如下：

Ext.define('ChartPieTest',{
  extend: 'Ext.panel.Panel',autoScroll : true,initComponent: function () {
    var me = this;
    me.store = me.createStore();
    me.grid = me.getGridPanel();
    me.mainPanel = Ext.create('Ext.panel.Panel',{
      layout:'fit',items:[me.grid],});
 
    Ext.apply(me,items:[me.mainPanel]
    });
    me.callParent();
    me.mainPanel.down('chart').on('cellclick',function(grid,td,cellIndex,record,tr,rowIndex,e,eOpts) {
      me.onCellClick(cellIndex,record);
    });
  },getGridPanel:function(){
    var me = this;
    return {
      xtype:'chart',insetPadding: 40,animate : true,// 是否支援動態資料變化
      legend: {// 圖例
        position: "right",spacing: 12,padding: 5,font: {
          name: 'Tahoma',color: '#3366FF',size: 12,bold: true
        }
      },store:me.store,//axes:me.createAxes(),series:me.createSeries(),}
  },createStore: function () {
    var me = this;
    return Ext.create('Ext.data.JsonStore',{
      //從後端請求資料
     /* fields: [
        {name: 'id',mapping: 'id'},{name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},'activeCount','effectiveCount','effectiveProportion',],proxy: {
        type: 'ajax',url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',reader: {
          type: 'json',root: 'root',totalProperty: 'totalProperty'
        }
      },listeners: {
        'beforeload': function (store,operation,eOpts) {
          store.proxy.extraParams.selectYear = me.selectYear
        }
      },*/
     //自己模擬資料
      fields: ['name','data'],data: [
        { 'name': '中年人','data': 10 },{ 'name': '嬰兒','data': 7 },{ 'name': '老年人','data': 5 },{ 'name': '小孩','data': 2 },{ 'name': '青少年','data': 27 }
      ],autoLoad: true
    });
  },createSeries: function () {
    var me = this;
    var columns = [
      {
        type: 'pie',angleField: 'data',showInLegend: true,tips: {
          trackMouse: true,width: 140,height: 40,renderer: function(storeItem,item) {
            // calculate and display percentage on hover
            var total = 0;
            me.store.each(function(rec) {
              total += rec.get('data');
            });
            this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
          }
        },highlight: {
          segment: {
            margin: 5
          }
        },label: {
          field: 'name',display: 'rotate',contrast: true,font: '18px Arial'
        }
      },];
    return columns;
  }
 
});

注：

1.上面中的createStore是建立餅圖所需要的資料的--store。

2.上面中的legend顯示的右邊的圖例（表明哪塊代表什麼資料），legend中的position屬性可以調節圖例的位置。其中有‘left'、‘right'，‘bottom'、‘top'分別代表左右下上位置。

3.showInLegend是bool值，為false的時候不顯示上面的圖例。

4.tips這裡是當滑鼠放在餅圖上的時候顯示的提示性文字，其中的renderer方法中可設定提示哪些內容。

5.label設定餅圖上顯示文字的一些屬性。其中的display屬性決定文字在餅圖中位置，共有‘outside'、‘rotate'兩種方式，前者表示文字顯示在圖表的外邊，後者文字顯示在圖表的裡邊。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧彙總》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。