Extjs4 charts 报表

矫情吗；* 2024-02-19 16:14 7阅读 0赞

1.配置参数

**\[html\]** [view plain][] [copy][view plain]

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][view plain]

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 为：

![1332752857_1066.png][]

**\[html\]** [view plain][] [copy][view plain]

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][view plain]

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.  \})

[view plain]: http://blog.csdn.net/wwwyuanliang10000/article/details/7395695#
[1332752857_1066.png]: https://img-my.csdn.net/uploads/201203/26/1332752857_1066.png