这篇文章将介绍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; } });
注：
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数学运算用法总结》