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