Extjs4.0 Chart属性中文解释

图表的几大要素：

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坐标绑定的字段。