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