圖表的幾大要素：
1、坐標：上、下、左、右。
坐標的類型，數字、分類...
坐標包含需要顯示的坐標值，即綁定的字段
坐標值的樣式，比如旋轉、字體大小、格式
坐標的最大值、最小值、是否顯示網格
坐標旁邊顯示的文字
2、圖表：柱狀圖、折線圖、點圖、餅圖、區域圖、盤表圖、雷達圖...
圖標的類型
圖表x、y軸對應的字段
圖標上顯示的文字，文字的樣式、位置
鼠標移上去需要顯示的提示信息
3、樣式
4、數據
最簡單的圖表的創建
[html] view plaincopyprint?
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坐標綁定的字段。