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 });
更多的樣式定義可以看上面給出的連接。