本文实例讲述了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,{

layout:'fit',

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;

}

});


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,{

layout:'fit',

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图片操作技巧大全JavaScript切换特效与技巧总结JavaScript运动效果与技巧汇总JavaScript动画特效与技巧汇总JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。