extjs圖表繪制之條形圖實現方法分析

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

這篇文章將介紹extjs圖表中條形圖。

將實現以下的功能：

1.從后端請求數據并運用到圖表中，形成動態數據。

2.查詢出每年各個月中人數。

3.改變條形柱的顏色，改變默認的顏色換成自己想要的顏色。

1. renderer: function(sprite, storeItem, barAttr, i, store) {
2. barAttr.fill = '#3D96AE'
3. return barAttr;
4. },
5.  

先看完整的代碼：

1. Ext.define('ChartColumnTest', {
2. extend: 'Ext.panel.Panel',
3. autoScroll : true,
4. selectYear:null,
5. initComponent: function () {
6. var me = this;
7. me.store = me.createStore();
8. me.grid = me.getGridPanel();
9. me.mainPanel = Ext.create('Ext.panel.Panel',{
10. layout:'fit',
11. items:[me.grid],
12. tbar:me.createQueryTbar(),
13. });
14.  
15. Ext.apply(me,{
16. layout:'fit',
17. items:[me.mainPanel]
18. });
19. me.callParent();
20. me.mainPanel.down('chart').on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e,eOpts) {
21. me.onCellClick(cellIndex, record);
22. });
23. },
24.  
25. getGridPanel:function(){
26. var me = this;
27. return {
28. xtype:'chart',
29. animate : true,// 是否支持動態數據變化
30. legend: {// 圖例
31. display: "bottom",
32. spacing: 2,
33. padding: 5,
34. font: {
35. name: 'Tahoma',
36. color: '#3366FF',
37. size: 12,
38. bold: true
39. }
40. },
41. store:me.store,
42. axes:me.createAxes(),
43. series:me.createSeries(),
44. }
45. },
46. createQueryTbar: function(){
47. var me=this;
48. var tbar=[
49. {
50. xtype : 'combo',
51. fieldLabel:'選擇年份',
52. name:'selectYear',
53. queryMode : 'local',
54. editable : true,
55. readOnly:false,
56. labelWidth: 60,
57. width:200,
58. store : new Ext.data.ArrayStore({
59. fields : ['id','name'],
60.  
61. data : []
62. }),
63. valueField : 'name',
64. displayField : 'id',
65. triggerAction : 'all',
66. autoSelect : true,
67. listeners : {
68. beforerender : function(){
69. var newyear = Ext.Date.format(new Date(),'Y');//這是為了取現在的年份數
70. var yearlist = [];
71. for(var i = newyear;i>=2015;i--){
72. yearlist.push([i,i]);
73. }
74. this.store.loadData(yearlist);
75. }
76. }
77. },
78. {xtype: 'button',text : '查找',
79. listeners : {
80. "click" : function() {
81. var value = Ext.ComponentQuery.query('[name=selectYear]')["0"].value;
82. me.selectYear = value;
83. me.store.load();
84. }}}
85. ];
86. return tbar;
87. },
88. createStore: function () {
89. var me = this;
90. return Ext.create('Ext.data.JsonStore', {
91. //從后端請求數據
92. fields: [
93. {name: 'id', mapping: 'id'},
94. {name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},
95. 'activeCount', 'effectiveCount','effectiveProportion',
96. ],
97. proxy: {
98. type: 'ajax',
99. url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',
100. reader: {
101. type: 'json',
102. root: 'root',
103. totalProperty: 'totalProperty'
104. }
105. },
106. listeners: {
107. 'beforeload': function (store, operation, eOpts) {
108. store.proxy.extraParams.selectYear = me.selectYear
109. }
110. },
111. autoLoad: true
112. });
113. },
114.  
115. createAxes: function () {
116. var me = this;
117. var columns = [
118. {
119. type: 'Numeric',
120. position: 'left',
121. minimum: 1000,
122. maximum: 10000,
123.  
124. label: {
125. renderer: Ext.util.Format.numberRenderer('0,0')
126. },
127. title: '人數',
128. grid: true,
129. },
130. {
131. type: 'Numeric',
132. position: 'right',
133. minimum: 1000,
134. maximum: 10000,
135.  
136. label: {
137. renderer: Ext.util.Format.numberRenderer('0,0')
138. },
139. title: '人數',
140. grid: true,
141. },
142. {
143. type: 'Time',
144. position: 'bottom',
145. fields: 'statTime',
146. step: [Ext.Date.MONTH, 1],
147. dateFormat: 'y-m',
148. title: '日期',
149. grid: false,
150.  
151. }
152. ];
153. return columns;
154. },
155. createSeries: function () {
156. var me = this;
157. var columns = [
158. {
159. type: 'column',
160. axis: 'left',
161. title:'活躍用戶數',
162. highlight: true,
163. tips: {
164. trackMouse: true,
165. width: 200,
166. height: 28,
167. renderer: function(storeItem, item) {
168. this.setTitle( "人數："+storeItem.get('activeCount')+",占比："+storeItem.get('effectiveProportion') );
169. }
170. },
171. //設置條形柱的顏色
172. renderer: function(sprite, storeItem, barAttr, i, store) {
173. barAttr.fill = '#3D96AE'
174. return barAttr;
175. },
176. //設置顯示每個坐標上的文字
177. label: {
178. display: 'outside',
179. 'text-anchor': 'middle',
180. field: 'activeCount',
181. renderer: Ext.util.Format.numberRenderer('0'),
182. orientation: 'horizontal',//改變數字方向 水平顯示
183. font: '25px Helvetica, sans-serif',
184. 'text-anchor': 'start',
185. color: 'red',
186. },
187. xField: 'statTime',
188. yField: 'activeCount',
189. // yPadding:100, 距離x軸的高度
190. },
191. ];
192. return columns;
193. }
194.  
195. });
196.  

下面講解上圖中的代碼：

1.在panel中定義圖表。條形圖主要data（數據）、軸（y、x軸）、系列（series）組成。

2.定義查詢的tbar,圖中的數據是根據年份所查詢出來的，用來動態顯示。

3.在y軸上標刻的是人數，定義最大值和最小值，會自動調節每個間距的大小，position 定義位置 有‘left'，‘right'，bottom，‘top'四種

1. type: 'Numeric',
2. position: 'left',
3. minimum: 1000,
4. maximum: 10000,
5.  

4.step  定義以多少為間隔，在此案例中，我以一個月為間隔。position 定義位置 有‘left'，‘right'，bottom，‘top'四種，grid:false 不是網格布局。

1. {
2. type: 'Time',
3. position: 'bottom',
4. fields: 'statTime',
5. step: [Ext.Date.MONTH, 1],
6. dateFormat: 'y-m',
7. title: '日期',
8. grid: false,
9.  
10. }
11.  

5.tips  當鼠標放在圖表上所顯示的文字。在renderer方法中設置自己想顯示的文字。

1. tips: {
2. trackMouse: true,
3. width: 200,
4. height: 28,
5. renderer: function(storeItem, item) {
6. this.setTitle( "人數："+storeItem.get('activeCount')+",占比："+storeItem.
7. get('effectiveProportion') );
8. }
9. },
10.  

6.可以在定義的系列中（series）中定義renderer方法，在此方法中改變條形柱的顏色。

1. renderer: function(sprite, storeItem, barAttr, i, store) {
2. barAttr.fill = '#3D96AE'
3. return barAttr;
4. },

7.可以在label中調節顯示文字的方向和文字顯示的位置。

1. label: {
2. display: 'outside',
3. 'text-anchor': 'middle',
4. field: 'activeCount',
5. renderer: Ext.util.Format.numberRenderer('0'),
6. orientation: 'horizontal',//改變數字方向 水平顯示
7. font: '25px Helvetica, sans-serif',
8. 'text-anchor': 'start',
9. color: 'red',
10. },
11.  

display 可以改變文字在圖表中的顯示位置。‘insideStart'，‘insideEnd'，‘outside'分別代表在條形柱的最開始，最后面和外面。大家可以自己去試試。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

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