用flex模拟了个实时装置监控曲线图

用flex模拟了个实时设备监控曲线图

用flex模拟了个实时设备监控曲线图，最近在弄报表这块，用到flex里面图表控件。

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		import mx.charts.chartClasses.AxisLabelSet;
		import mx.formatters.DateFormatter;
		import mx.charts.chartClasses.IAxis;
		import mx.collections.ArrayCollection;
		[Bindable] 
		public var testDatas:ArrayCollection;
		[Bindable]
		private var maxDate:Date;
		[Bindable]
		private var minDate:Date;
		private var timer:Timer;
		private var dateFormat:DateFormatter = new DateFormatter();
		private var dateVar:Date;
		
		private function init():void {
			dateFormat.formatString = "HH:NN:SS";      
			minDate = new Date();
			var dx:Date = new Date();
			dx.setTime(minDate.getTime());
			dx.setMinutes(dx.getMinutes()+1, dx.getSeconds(), dx.getMilliseconds());
			maxDate = dx;
			dateVar = new Date();
			dateVar.setTime(minDate.getTime());
			testDatas = new ArrayCollection([{date: dateVar, valueTest: 43.71} ]);
			timer =  new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, getDatas)
			timer.start();
		}
		
		private function mylabel(labelValue:Object, previousValue:Object, d:IAxis):String {
			var str:String = dateFormat.format(labelValue);
			return str;
		}
		
		private function getDatas(et:Event):void {
			var valueTestValue:int = Math.random()*50;
			var dm:Date = new Date();
			dm.setTime(dateVar.getTime()+1000);
			dateVar = dm;
			if (dateVar.getTime()>maxDate.getTime()) {
				maxDate = dateVar;
				var dx:Date = new Date();
				dx.setTime(dateVar.getTime());
				dx.setMinutes(dateVar.getMinutes()-1, dateVar.getSeconds(), dateVar.getMilliseconds());
				minDate = dx;
			}
			testDatas.addItem({date: dateVar, value: valueTestValue});      
		}
		]]>
	</fx:Script>
	<s:Panel title="设备实时曲线图" width="100%" height="100%">
		<mx:LineChart id="mychart" height="100%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true">
			<mx:horizontalAxis>
				<mx:DateTimeAxis dataUnits="seconds" interval="5" minimum="{minDate}"   maximum="{maxDate}" labelFunction="mylabel"/> 
			</mx:horizontalAxis>
			<mx:verticalAxis>
				<mx:LinearAxis baseAtZero="true" />
			</mx:verticalAxis>
			<mx:series>
				<mx:LineSeries yField="value" xField="date" form="curve" displayName="测试" dataProvider="{this.testDatas}"/>
			</mx:series>
		</mx:LineChart>
	</s:Panel>
</s:Application>