我的技术贴的首发地址:http://atian25.javaeye.com/

天猪部落阁 - (ExtJS && AS3 && Java)

专注于ExtJS && AS3 && Java

常用链接

统计

FLASH

WORK

友情链接

最新评论

[原创]Extjs 3.0 Chart 小用一下

http://atian25.javaeye.com/blog/413947

实际上就是YUI CHART, 具体的文档可以看: http://developer.yahoo.com/yui/charts/

先上个图:

代码如下:

1.定义store


 1 //定义store  
 2 var chartStore = new Ext.data.JsonStore({  
 3       root:'data',  
 4       fields:[  
 5         {  
 6           //似乎有bug,labelfunction不好用,就自己处理一个field来当x轴标签  
 7           name:'label',  
 8           mapping:'endTime',  
 9           convert:function(v,record){  
10             return Date.parseDate(v, 'Y-m-d H:i:s').format('H:i');  
11           }  
12         },  
13         {name:'startTime',type:'date',dateFormat:'Y-m-d H:i:s'},  
14         {name:'endTime',type:'date',dateFormat:'Y-m-d H:i:s'},  
15         {name:'alarmCount',type:'int'},  
16         {name:'eventCount',type:'int'}  
17       ],  
18       sortInfo:{field: 'startTime', direction: 'ASC'}  
19     });  
20   
21 //测试数据  
22 var obj={  
23         startTime:'2009-06-22 01:00:00',  
24         endTime:'2009-06-23 01:00:00',  
25         interval:60,  
26         data:[  
27           {startTime:'2009-06-22 01:00:00',endTime:'2009-06-22 02:00:00',alarmCount:02,eventCount:15},  
28           {startTime:'2009-06-22 02:00:00',endTime:'2009-06-22 03:00:00',alarmCount:03,eventCount:0},  
29           {startTime:'2009-06-22 03:00:00',endTime:'2009-06-22 04:00:00',alarmCount:04,eventCount:15},  
30           {startTime:'2009-06-22 04:00:00',endTime:'2009-06-22 05:00:00',alarmCount:15,eventCount:25},  
31           {startTime:'2009-06-22 05:00:00',endTime:'2009-06-22 06:00:00',alarmCount:06,eventCount:15},  
32           {startTime:'2009-06-22 06:00:00',endTime:'2009-06-22 07:00:00',alarmCount:0,eventCount:20},  
33           {startTime:'2009-06-22 07:00:00',endTime:'2009-06-22 08:00:00',alarmCount:0,eventCount:0},  
34           {startTime:'2009-06-22 08:00:00',endTime:'2009-06-22 09:00:00',alarmCount:09,eventCount:15},  
35           {startTime:'2009-06-22 09:00:00',endTime:'2009-06-22 10:00:00',alarmCount:10,eventCount:15},  
36           {startTime:'2009-06-22 10:00:00',endTime:'2009-06-22 11:00:00',alarmCount:11,eventCount:25},  
37           {startTime:'2009-06-22 11:00:00',endTime:'2009-06-22 12:00:00',alarmCount:12,eventCount:75},  
38           {startTime:'2009-06-22 12:00:00',endTime:'2009-06-22 13:00:00',alarmCount:13,eventCount:12},  
39           {startTime:'2009-06-22 13:00:00',endTime:'2009-06-22 14:00:00',alarmCount:14,eventCount:10},  
40           {startTime:'2009-06-22 14:00:00',endTime:'2009-06-22 15:00:00',alarmCount:45,eventCount:60},  
41           {startTime:'2009-06-22 15:00:00',endTime:'2009-06-22 16:00:00',alarmCount:16,eventCount:25},  
42           {startTime:'2009-06-22 16:00:00',endTime:'2009-06-22 17:00:00',alarmCount:17,eventCount:8},  
43           {startTime:'2009-06-22 17:00:00',endTime:'2009-06-22 18:00:00',alarmCount:18,eventCount:47},  
44           {startTime:'2009-06-22 18:00:00',endTime:'2009-06-22 19:00:00',alarmCount:29,eventCount:35},  
45           {startTime:'2009-06-22 19:00:00',endTime:'2009-06-22 20:00:00',alarmCount:20,eventCount:15},  
46           {startTime:'2009-06-22 20:00:00',endTime:'2009-06-22 21:00:00',alarmCount:21,eventCount:10},  
47           {startTime:'2009-06-22 21:00:00',endTime:'2009-06-22 22:00:00',alarmCount:22,eventCount:5},  
48           {startTime:'2009-06-22 22:00:00',endTime:'2009-06-22 23:00:00',alarmCount:53,eventCount:15},  
49           {startTime:'2009-06-22 23:00:00',endTime:'2009-06-23 00:00:00',alarmCount:24,eventCount:33},  
50           {startTime:'2009-06-23 00:00:00',endTime:'2009-06-23 01:00:00',alarmCount:11,eventCount:0}  
51         ]  
52       }  
53   
54 //载入数据  
55 chartStore.loadData(obj); 

2.定义chart
 1 var chartWin = new Ext.Window({  
 2   title:'::近24小时告警分布图表::',  
 3   layout:'fit',  
 4   closeAction:'hide',  
 5   plain: true,  
 6   height:300,  
 7   width:1000,  
 8   items:[{  
 9     xtype:'linechart',  
10     url: '/js/extjs/3.0/resources/charts.swf',  
11     store:chartStore,  
12     //xField: 'label',  
13     //yField:'alarmCount',  
14       
15     //定义tip内容  
16     tipRenderer : function(chart, record){  
17       var startTime = record.get('startTime').format('y-m-d H:i');  
18       var endTime = record.get('endTime').format('y-m-d H:i');  
19       var str = String.format('开始时间:{0}\n结束时间:{1}\n告警数:{2}\n事件数:{3}',startTime,endTime,record.get('alarmCount'),record.get('eventCount'))  
20       return str;  
21     },  
22     //定义两个图表,一个是柱状图,一个是折线图  
23     series: [{  
24         type: 'column',  
25         displayName: '事件个数',  
26         xField: 'label',  
27         yField: 'eventCount',  
28         style: {  
29           color:0x99BBE8,  
30           size: 20  
31         }  
32     },{  
33         type:'line',  
34         displayName: '告警',  
35         xField: 'label',  
36         yField: 'alarmCount',  
37         style: {  
38           color: 0x15428B  
39         }  
40     }],  
41     //定义图表样式  
42     chartStyle: {  
43       //不知道为啥没出来这个图示  
44       legend:{  
45         display: "top"  
46       },  
47       xAxis: {  
48         color: 0x69aBc8,  
49         majorTicks: {color: 0x69aBc8, length:4},  
50         minorTicks: {color: 0x69aBc8, length: 2},  
51         majorGridLines:{size: 1, color: 0xeeeeee}  
52       },  
53       yAxis: {  
54         color: 0x69aBc8,  
55         majorTicks: {color: 0x69aBc8, length: 4},  
56         minorTicks: {color: 0x69aBc8, length: 2},  
57         majorGridLines: {size: 1, color: 0xdfe8f6}  
58       }  
59     }  
60   }]  
61 });

更多的样式定义可以看上面给出的连接。

posted on 2009-07-01 10:28 天猪 阅读(3765) 评论(0)  编辑  收藏 所属分类: JavascriptExtJS


只有注册用户登录后才能发表评论。


网站导航: