extjs图形绘制之饼图实现方法分析

本文实例讲述了extjs图形绘制之饼图实现方法。分享给大家供大家参考，具体如下：

这篇文章将介绍extjs中自带的饼图。

代码如下：

1. Ext.define('ChartPieTest', {
2. extend: 'Ext.panel.Panel',
3. autoScroll : true,
4. initComponent: function () {
5. var me = this;
6. me.store = me.createStore();
7. me.grid = me.getGridPanel();
8. me.mainPanel = Ext.create('Ext.panel.Panel',{
9. layout:'fit',
10. items:[me.grid],
11. });
12.  
13. Ext.apply(me,{
14. layout:'fit',
15. items:[me.mainPanel]
16. });
17. me.callParent();
18. me.mainPanel.down('chart').on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e,eOpts) {
19. me.onCellClick(cellIndex, record);
20. });
21. },
22.  
23. getGridPanel:function(){
24. var me = this;
25. return {
26. xtype:'chart',
27. insetPadding: 40,
28. animate : true,// 是否支持动态数据变化
29. legend: {// 图例
30. position: "right",
31. spacing: 12,
32. padding: 5,
33. font: {
34. name: 'Tahoma',
35. color: '#3366FF',
36. size: 12,
37. bold: true
38. }
39. },
40. store:me.store,
41. //axes:me.createAxes(),
42. series:me.createSeries(),
43. }
44. },
45. createStore: function () {
46. var me = this;
47. return Ext.create('Ext.data.JsonStore', {
48. //从后端请求数据
49. /* fields: [
50. {name: 'id', mapping: 'id'},
51. {name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},
52. 'activeCount', 'effectiveCount','effectiveProportion',
53. ],
54. proxy: {
55. type: 'ajax',
56. url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',
57. reader: {
58. type: 'json',
59. root: 'root',
60. totalProperty: 'totalProperty'
61. }
62. },
63. listeners: {
64. 'beforeload': function (store, operation, eOpts) {
65. store.proxy.extraParams.selectYear = me.selectYear
66. }
67. },*/
68. //自己模拟数据
69. fields: ['name', 'data'],
70. data: [
71. { 'name': '中年人', 'data': 10 },
72. { 'name': '婴儿', 'data': 7 },
73. { 'name': '老年人', 'data': 5 },
74. { 'name': '小孩', 'data': 2 },
75. { 'name': '青少年', 'data': 27 }
76. ],
77. autoLoad: true
78. });
79. },
80.  
81. createSeries: function () {
82. var me = this;
83. var columns = [
84. {
85. type: 'pie',
86. angleField: 'data',
87. showInLegend: true,
88. tips: {
89. trackMouse: true,
90. width: 140,
91. height: 40,
92. renderer: function(storeItem, item) {
93. // calculate and display percentage on hover
94. var total = 0;
95. me.store.each(function(rec) {
96. total += rec.get('data');
97. });
98. this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) +'%');
99. }
100. },
101. highlight: {
102. segment: {
103. margin: 5
104. }
105. },
106. label: {
107. field: 'name',
108. display: 'rotate',
109. contrast: true,
110. font: '18px Arial'
111. }
112. },
113.  
114. ];
115. return columns;
116. }
117.  
118. });
119.  

注：

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程序设计有所帮助。