Extjs4.0 Chart的使用

图表的几大要素：

1、坐标：上、下、左、右。

坐标的类型，数字、分类...

坐标包含需要显示的坐标值，即绑定的字段

坐标值的样式，比如旋转、字体大小、格式

坐标的最大值、最小值、是否显示网格

坐标旁边显示的文字

2、图表：柱状图、折线图、点图、饼图、区域图、盘表图、雷达图...

图标的类型

图表x、y轴对应的字段

图标上显示的文字，文字的样式、位置

鼠标移上去需要显示的提示信息

3、样式

4、数据

最简单的图表的创建

[html]  view plain copy

1. Ext.onReady(function () {  
2.     var win = Ext.create('Ext.Window', {  
3.         width: 800,  
4.         height: 600,  
5.         hidden: false,  
6.         maximizable: true,  
7.         title: '柱状图',  
8.         renderTo: Ext.getBody(),  
9.         layout: 'fit',  
10.         tbar: [{  
11.             text: 'Reload Data',  
12.             handler: function() {  
13.                 store1.loadData(generateData());  
14.             }  
15.         }],  
16.         items: {  
17.             id: 'chartCmp',  
18.             xtype: 'chart',  
19.             style: 'background:#000',  
20.             animate: true,  
21.             shadow: true,  
22.             store: store1,  
23.             axes: [{  
24.                 type: 'Numeric',  
25.                 position: 'left',  
26.                 fields: ['data1'],  
27.                 label: {  
28.                     renderer: Ext.util.Format.numberRenderer('0,0')  
29.                 },  
30.                 title: 'Number',  
31.                 grid: true,  
32.                 minimum: 0  
33.             }, {  
34.                 type: 'Category',  
35.                 position: 'bottom',  
36.                 fields: ['name'],  
37.                 title: 'Month'  
38.             }],  
39.             series: [{  
40.                 type: 'column',  
41.                 axis: 'left',  
42.                 highlight: true,  
43.                 tips: {  
44.                   trackMouse: true,  
45.                   width: 140,  
46.                   height: 28,  
47.                   renderer: function(storeItem, item) {  
48.                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '$' );  
49.                   }  
50.                 },  
51.                 label: {  
52.                   display: 'insideEnd',  
53.                   'text-anchor': 'middle',  
54.                     field: 'data1',  
55.                     renderer: Ext.util.Format.numberRenderer('0'),  
56.                     orientation: 'vertical',  
57.                     color: '#333'  
58.                 },  
59.                 xField: 'name',  
60.                 yField: 'data1'  
61.             }]  
62.         }  
63.     });  
64. });  

axes:用来配置坐标，可以配置多个坐标。

type：配置坐标的类型。一般用到的是Numeric、Category

position：配置坐标的位置，比如：上下左右

fields：可以配置多个字段，用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的

label：可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数

              label: {
                    rotate: {
                        degrees: 315
                    }
                }

title：配置坐标需要显示的title

grid：设定网格的样式。比如设定网格的透明度、样式等。

           grid: { // 设定网格颜色值
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                }

minimum：可以配置坐标的最小值。当然会有对应的最大值maximum。可以配合使用majorTickSteps(主刻度，配置总共有多少个刻度)，minorTickSteps(次刻度，在每个主可短中画次刻度。比如配置10，则数字没增加10，会话一个次刻度)

series：用来配置图表

type：配置图表的类型，图表有很多类型。每个图表都有各自独特的配置项

axis：相对于哪个坐标。因为坐标有多个，图表的高度，总的有个参照。

highlight：设置鼠标移动到图表上面，是否高亮。不过这个反应很慢。

tips：设置鼠标移动到图表上时的提示信息

label：设置图表上显示的文字。可以设置文字的位置、样式。但不是每个图表都有这个配置项。

xField：设定x坐标绑定的字段。因为axes设定了坐标的值，所以这个字段绑定的值必须在axes的坐标值中。

yField：设定y坐标绑定的字段。

下面是一个三个坐标值的实例：

[javascript]  view plain copy

1. Ext.onReady(function () {  
2.     var win = Ext.create('Ext.Window', {  
3.         width: 800,  
4.         height: 600,  
5.         hidden: false,  
6.         maximizable: true,  
7.         title: '柱状图',  
8.         renderTo: Ext.getBody(),  
9.         layout: 'fit',  
10.         tbar: [{  
11.             text: 'Reload Data',  
12.             handler: function () {  
13.                 store1.loadData(generateData());  
14.             }  
15.         }],  
16.         items: {  
17.             id: 'chartCmp',  
18.             xtype: 'chart',  
19.             style: 'background:#000',  
20.             animate: true,  
21.             shadow: true,  
22.             store: store1,  
23.             legend: {  
24.                 position: 'right'  
25.             },  
26.             axes: [  
27.             {  
28.                 type: 'Numeric',  
29.                 position: 'left',  
30.                 fields: ['data1'],  
31.                 label: {  
32.                     renderer: Ext.util.Format.numberRenderer('0,0')  
33.                 },  
34.                 title: 'Number',  
35.                 grid: true,  
36.                 minimum: 0  
37.             },  
38.             {  
39.                 type: 'Numeric',  
40.                 position: 'right',  
41.                 fields: ['data2'],  
42.                 label: {  
43.                     renderer: Ext.util.Format.numberRenderer('0,0')  
44.                 },  
45.                 title: 'Number',  
46.                 grid: true,  
47.                 majorTickSteps:5,  
48.                 minorTickSteps:10,  
49.                 maximum:500,  
50.                 minimum: 0  
51.             }, {  
52.                 type: 'Category',  
53.                 position: 'bottom',  
54.                 fields: ['name'],  
55.                 title: 'Month'  
56.             }],  
57.             series: [{  
58.                 type: 'column',  
59.                 axis: 'right',  
60.                 highlight: true,  
61.                 tips: {  
62.                     trackMouse: true,  
63.                     width: 140,  
64.                     height: 28,  
65.                     renderer: function (storeItem, item) {  
66.                         this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));  
67.                     }  
68.                 },  
69.                 label: {  
70.                     display: 'insideEnd',  
71.                     'text-anchor': 'middle',  
72.                     field: 'data1',  
73.                     renderer: Ext.util.Format.numberRenderer('0'),  
74.                     orientation: 'vertical',  
75.                     color: '#333'  
76.                 },  
77.                 xField: 'name',  
78.                 yField: 'data1'  
79.             },  
80.             {  
81.                 type: 'line',  
82.                 axis: 'left',  
83.                 highlight: true,  
84.                 tips: {  
85.                     trackMouse: true,  
86.                     width: 140,  
87.                     height: 28,  
88.                     renderer: function (storeItem, item) {  
89.                         this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));  
90.                     }  
91.                 },  
92.                 label: {  
93.                     display: 'insideEnd',  
94.                     'text-anchor': 'middle',  
95.                     field: 'data1',  
96.                     renderer: Ext.util.Format.numberRenderer('0'),  
97.                     orientation: 'vertical',  
98.                     color: '#333'  
99.                 },  
100.                 style: { 'foreground-color': '#00f' },  
101.                 showMarkers:true,  
102.                  markerConfig: {// 由Ext.Draw.Sprite配置项决定  
103.                     type: 'circle',  
104.                     size: 4,  
105.                     radius: 4,  
106.                     fill: '#00f',  
107.                     'stroke-width': 0  
108.                 },  
109.                 xField: 'name',  
110.                 yField: 'data1'  
111.             }]  
112.         }  
113.     });  
114. });  

效果：

这个示例使用三个坐标，左、右、下。显示了两个图表，一个使用左边的坐标，一个使用右边的坐标。

这个实现很简单，只需要在axes配置三个坐标。并配置好他们的位置。在配置series配置两个图表。一个axis配置为'right'，一个配置为'left'。这个就可以显示主次坐标了。

这个示例中使用了一个折线图。折线图有一个配置项是markerConfig，可以设定点的样式。比如设定点为圆圈、正方形等。其实它是一个Ext.Draw.Sprite。