实时监控（折线图）

选项：1、jrobin

2、asithappens

3、Extjs

考虑系统先用技术，Extjs3.0的折线图采用flash技术，当然也有纯js+CSS实现的（还没有使用）,效果不错

\<img src='https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/lkj107/EntryImages/20091105/监控.gif'/\>

var store_kpi = new Ext.data.JsonStore({ url : 'monitor.htm?method=queryWithPage&start=0&limit=20', fields:[{name:'testStartTime', type:'string'} , {name:'time', type:'float'}]}); var businessType = new Ext.form.ComboBox({ mode : 'local', editable : false, width :50, store : new Ext.data.SimpleStore({ data : [['AA', 'AA']], fields : ['value', 'text'] }), displayField : 'text', valueField : 'value', mode : 'local', triggerAction : 'all' }); var city = new Ext.form.ComboBox({ mode : 'local', width :50, editable : false, store : new Ext.data.SimpleStore({ data : [['310', '邯郸'],['311', '石家庄'], ['312', '保定'], ['313', '张家口'], ['314', '承德'], ['315', '唐山'], ['316', '廊坊'], ['317', '沧州'], ['318', '衡水'], ['319', '邢台'], ['335', '秦皇岛']], fields : ['value', 'text'] }), displayField : 'text', valueField : 'value', mode : 'local', triggerAction : 'all' }); var kpi_value = new Ext.form.ComboBox({ mode : 'local', width :60, editable : false, store : new Ext.data.SimpleStore({ data : [['BB', 'BB']], fields : ['value', 'text'] }), displayField : 'text', valueField : 'value', mode : 'local', triggerAction : 'all' }); var btn_exchange = new Ext.Button({ text : '切换监控指标', handler : function(){store_kpi.load();} }); var kpi=new Ext.Panel({ width: 700, height: 400, region : 'center', title: '性能监控', tbar: ['业务类型',businessType,new Ext.Toolbar.TextItem(""),'地市',city,new Ext.Toolbar.TextItem(""),'KPI',kpi_value,new Ext.Toolbar.TextItem(""),'-',btn_exchange], items: { xtype: 'linechart', store: store_kpi, yField: 'time', xField: 'testStartTime', xAxis: new Ext.chart.CategoryAxis({ title: '时间' }), yAxis: new Ext.chart.NumericAxis({ title: '时延(秒)' }), extraStyle: { xAxis: { labelRotation: -90 } } } }); var p_monitor = { id : 'monitor-panel', border : false, layout : 'border', items : [kpi] }; function myMethod(){ window.setTimeout('myMethod()', 5000000); store_kpi.load(); }; myMethod();