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 });
更多的样式定义可以看上面给出的连接。