Extjs4 charts 报表

1.配置参数 

[html]  view plain copy

1. {        xtype: 'panel',          
2. layout: 'fit',          
3. title: '趋势图',          
4. //bodyStyle: 'background:#ffc; padding:10px;',          
5. height: 250,   
6. width: 1000,          
7. forceFit: true,          
8. //frame: true,         
9. items: {              
10.     id: 'XTYXQK_qushitu_chart',              
11.     xtype: 'chart',  //设置图表类型              
12.     //style: 'background:#000',               
13.     animate: true,  //开始加载时是否动画              
14.     shadow: true,  //加上阴影 自动创建一个Ext.Shadow,或一个字符串表示Ext.Shadow.mode影子的显示              
15.     store: states,//数据对象             
16.     legend: { position: 'top', boxStroke: 'border:0px;', labelFont: '11px Helvetica' }, //显示 柱子类型标题 或时内容的标题  默认为false  若设为true  默认position-bottom             
17.     //axes :轴              
18.     axes: [                          
19.         {                              
20.             type: 'Numeric',  //数字类型轴                              
21.             position: 'left', //停靠位置                             
22.             fields: ['huoyueyonghushu', 'crmshibaishu'], //Y轴坐标数据，会取最大值                              
23.             label: {    //轴上数据文本显示  比如label: { rotate: { degrees: 315} } 旋转315°                                  
24.             renderer: Ext.util.Format.numberRenderer('0')                            },                             
25.             //title: 'Y坐标',                              
26.             minimum: 0,  //起始点数 默认0                              
27.             grid: true  //显示背景表格对照                          
28.        }, {                              
29.             type: 'Category',                              
30.             position: 'bottom',                              
31.             //title: '月份',                              
32.             fields: ['xuhao'],                              
33.             grid: true,                              
34.             label: {                                 
35.             //rotate: {                 degrees: 315  
36.             },                                 
37.             renderer: function (lbl) {//这边是需求 太多了 然后少显示些X坐标轴的值得                                      
38.                     var count = Ext.getCmp('XTYXQK_qushitu_chart').store.data.items.length;                                      
39.                     var num1 = parseInt(count / 12);                                      
40.                     count % 2 > 0 ? num1++ : '';                                      
41.                     return lbl % num1 == 0 ? lbl : '';                                  
42.                 }                              
43.             }                          
44.         }                     
45.  ],              
46. series: [            //竖条 内容                          
47. {                          
48. type: 'column',                         
49.  axis: 'left', //指定Y轴  是左边这条                         
50.  highlight: true, //鼠标移上去是否高亮显示                         
51.  tips: {//柱条上面的tip版                              
52. trackMouse: true, //鼠标触发                             
53.  width: 140,                              
54. height: 28,                              
55.  renderer: function (storeItem, item) {//storeItem该条数据 item(x,y的值)                                           //this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));                                  
56.     //this.setTitle(item.value[0] + ': ' + item.value[1]);                                 
57.  this.setTitle(storeItem.get('riqi') + ': ' + item.value[1]);                             
58.  }                         
59.  },                         
60.  title: ['活跃用户数', 'crm失败用户数', '提速失败用户数', '带宽不足用户数'], //柱子的标题 与前面的legend 对应 若没设 则 字段名                        label: {//柱子上面的文字                              
61.  display: 'insideEnd',                             
62.  'text-anchor': 'middle',                              
63. field: ['huoyueyonghushu', 'crmshibaishu'],                              
64. renderer: function (lbl) {                                  
65. var count = Ext.getCmp('XTYXQK_qushitu_chart').store.data.items.length;                                 
66.  return count <= 12 ? lbl : '';                            },                             
67.  orientation: 'vertical', //显示方向                              
68. color: '#333'                          
69. },                          
70. xField: 'xuhao',                          
71. yField: ['huoyueyonghushu', 'crmshibaishu']                     
72.  }                     
73.  ]         
74.  }      
75. }  

1.1注解：

[html]  view plain copy

1. 图表的几大要素：  
2. 1、坐标：上、下、左、右。  
3. 坐标的类型，数字、分类...  
4. 坐标包含需要显示的坐标值，即绑定的字段  
5. 坐标值的样式，比如旋转、字体大小、格式  
6. 坐标的最大值、最小值、是否显示网格  
7. 坐标旁边显示的文字  
8. 2、图表：柱状图、折线图、点图、饼图、区域图、盘表图、雷达图...  
9. 图标的类型  
10. 图表x、y轴对应的字段  
11. 图标上显示的文字，文字的样式、位置  
12. 鼠标移上去需要显示的提示信息  
13. 3、样式  
14. 4、数据  
15. axes:用来配置坐标，可以配置多个坐标。  
16. type：配置坐标的类型。一般用到的是Numeric、Categoryposition：配置坐标的位置，比如：上下左右fields：可以配置多个字段，用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的label：可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数label: {  
17. rotate: {  
18. degrees: 315  
19. }  
20. }title：配置坐标需要显示的titlegrid：设定网格的样式。比如设定网格的透明度、样式等。grid: { // 设定网格颜色值  
21. odd: {  
22. opacity: 1,  
23. fill: '#ddd',  
24. stroke: '#bbb',  
25. 'stroke-width': 1  
26. }  
27. }minimum：可以配置坐标的最小值。当然会有对应的最大值maximum。可以配合使用majorTickSteps(主刻度，配置总共有多少个刻度)，minorTickSteps(次刻度，在每个主可短中画次刻度。比如配置10，则数字没增加10，会话一个次刻度)  
28. series：用来配置图表  
29. type：配置图表的类型，图表有很多类型。每个图表都有各自独特的配置项axis：相对于哪个坐标。因为坐标有多个，图表的高度，总的有个参照。highlight：设置鼠标移动到图表上面，是否高亮。不过这个反应很慢。tips：设置鼠标移动到图表上时的提示信息label：设置图表上显示的文字。可以设置文字的位置、样式。但不是每个图表都有这个配置项。xField：设定x坐标绑定的字段。因为axes设定了坐标的值，所以这个字段绑定的值必须在axes的坐标值中。yField：设定y坐标绑定的字段。  

2.简单的一维charts demo 为：

[html]  view plain copy

1. var chartGrid = Ext.create('Ext.grid.Panel',{  
2.     fields:['gridYear','gridNum'],  
3.     columns:[  
4.          {header:'年份',dataIndex:'gridYear',width:100},   
5.          {header:'申请专利',dataIndex:'gridNum',width:100}  
6.     ]  
7.       
8.       
9.    });  
10.       

[javascript]  view plain copy

1. //折线图  
2.     var chartnumber1 = Ext.create('Ext.chart.Chart', {  
3.         height:400,  
4.         width:800,  
5.         animate:true,  
6.         shadow:true,  
7.         store:panelStore1,  
8.         style:'background:#fff',  
9.         axes:[{//坐标  
10.             type:'Numeric',  
11.             dashSize:10,//坐标轴前导航条长度  
12.             position:'left',  
13.             fields:['preStatics'],  
14.             minimum: mini,  
15.             maximum:maxi,  
16.             grid: {  
17.                 //奇数行  
18.                 odd : {  
19.                     opacity: 1,//不透明  
20.                     fill: '#FFFF99',//表格内的填充色  
21.                     stroke: '#FF3300',//表格线颜色  
22.                     'stroke-width': 0.5//表格线宽度  
23.                 },  
24.                 //偶数行  
25.                 even : {  
26.                     opacity: 0,//透明  
27.                     stroke: '#6600CC',//表格线颜色  
28.                     'stroke-width': 0.5//表格线宽度  
29.                 }  
30.                 },  
31.                 majorTickSteps : 20,//主区间数  
32.                 minorTickSteps : 3//副区间数  
33.         },  
34.         {  
35.             type:"Category",//目录坐标  
36.             position:"bottom",  
37.             fields:['name'],  
38.             grid:true,  
39.             label: {  
40.                 rotate: {  
41.                     degrees: 315//x轴 旋转 坐标的字体显示 ：斜体  
42.                 }  
43.             }  
44.         }  
45.         ],  
46.         series:[{//序列  
47.             type:'line',  
48.             axis:'left',  
49.             xField:'name',//横  
50.             yField:"preStatics",//纵抽字段  
51.             highlight: {  
52.                  size: 7,  
53.                  radius: 7  
54.              },  
55.             style: {  
56.                     opacity: 0.5  
57.             },  
58.             markerConfig: {  
59.                 type: 'circle',  
60.                 size: 4,  
61.                 radius: 4,  
62.                 'stroke-width': 0  
63.             },  
64.             fill: true,//填满区域  
65.             smooth:true,  
66.             tips: {  
67.                 trackMouse: true,  
68.                 width: 220,  
69.                 height: 60,  
70.                 layout: 'fit',  
71.                 items:[{  
72.                     xtype:'container',  
73.                     items:[chartGrid]  
74.                 }],  
75.                 renderer: function(storeItem, item) {storeItem该条数据 item(x,y的值)   
76.                    var storeItem = item.storeItem  
77.                    var gridStore = chartGrid.store;  
78.                    var data  = [{  
79.                                     'gridYear' :storeItem.get('name'),  
80.                                     'gridNum' :storeItem.get('preStatics')  
81.                                }]  
82.                     gridStore.loadData(data)      
83.                     //this.setTitle("年"+storeItem.get('name')+'专利数'+storeItem.get('preStatics'));  
84.                 }  
85.             }  
86.         }]  
87.     })