FLEX4实现时间轴例子

总结：

mx:horizontalAxis：用来定义X轴；

mx:DateTimeAxis：时间轴；

 dataUnits="seconds"（里面有的属性：milliseconds seconds minutes hours days weeks months years）

interval="5"：间隔时间
minimum="{minDate}"：起始时间，绑定到 minDate

maximum="{maxDate}"：结束时间，绑定到 maxDate

labelFunction="mylabel"：x轴显示的值，有函数 mylabel 返回

alignLabelsToUnits="false"：使x轴不标值点从0开始

mx:horizontalAxisRenderers：定义一组渲染X轴的特效；

mx:AxisRenderer：定义特效的；axis="{hAxis}"

mx:verticalAxis：用来定义Y轴；

mx:verticalAxisRenderers：定义一组渲染Y轴的特效；

mx:series：定义一组LineSeries 也就是曲线或者点；

mx:LineSeries：定义要展现的数据曲线，可以定义多条曲线；

yField="valueTest"：绑定的数据源中的key为valueTest的值

xField="date"：绑定的数据源中的key为date的值

dataProvider="{this.testDatas}"：绑定数据testDatas

form="curve"：趋势图显示为曲线。可以设置曲线类型(horizontal,reverseStep,segment,step,vertical);

 itemRenderer:渲染器美化线样式作用。做一些特殊处理。

下面是一个简单的例子，里面用到的属性很少。

效果图：

<?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" minWidth="955" minHeight="600">
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.charts.chartClasses.IAxis;
			import mx.collections.ArrayCollection;
			import mx.formatters.DateFormatter;
			
			private var dateFormat:DateFormatter=new DateFormatter();
			[Bindable] 
			public var stockDataAC:ArrayCollection = new ArrayCollection( [
				{date: "2005, 1, 27", close: 41.71, next: 41.71},
				{date: "2005, 2, 28", close: 42.21, next: 42.71},
				{date: "2005, 3, 29", close: 42.11, next: 43.71},
				{date: "2005, 4, 1", close: 42.71, next: 44.71},
				{date: "2005, 5, 2", close: 42.99, next: 45.71},
				{date: "2005, 6, 3", close: 44,    next: 47.71},
				{date: "2005, 6, 27", close: 41.71, next: 41.71},
				{date: "2005, 7, 28", close: 42.21, next: 42.71},
				{date: "2005, 8, 29", close: 42.11, next: 43.71},
				{date: "2005, 10, 1", close: 42.71, next: 44.71},
				{date: "2005, 11, 2", close: 42.99, next: 45.71},
				{date: "2005, 12, 3", close: 44,    next: 47.71} ,
				{date: "2006, 1, 27", close: 41.71, next: 41.71},
				{date: "2006, 2, 28", close: 42.21, next: 42.71},
				{date: "2006, 3, 29", close: 42.11, next: 43.71},
				{date: "2006, 4, 1", close: 42.71, next: 44.71},
				{date: "2006, 5, 2", close: 42.99, next: 45.71},
				{date: "2006, 6, 3", close: 44,    next: 47.71},
				{date: "2006, 6, 27", close: 41.71, next: 41.71},
				{date: "2006, 7, 28", close: 42.21, next: 42.71},
				{date: "2006, 8, 29", close: 42.11, next: 43.71},
				{date: "2006, 10, 1", close: 42.71, next: 44.71},
				{date: "2006, 11, 2", close: 42.99, next: 45.71},
				{date: "2006, 12, 3", close: 44, next: 47.71} ]);
			/**
			 * 将集合中的时间字符串转换成日期格式
			 * */
			public function myParseFunction(s:String):Date { 
				//按，分隔取出
				var a:Array = s.split(",");
				//新建日期对象符值
				var newDate:Date = new Date(a[0],a[1]-1,a[2]);
				
				return newDate;
			}
			/**
			 * 格式化
			 */
			private function horlabelFunc(labelValue:Object, previousValue:Object, d:IAxis):String
			{
				var dtime:Date=labelValue as Date;
				
				dateFormat.formatString="YYYY-MM-DD";
				var str:String=dateFormat.format(dtime);
				
				return str;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Panel title="图形测试" height="100%" width="100%">
		<mx:LineChart id="mychart" height="100%" width="100%"
					  paddingRight="5" paddingLeft="5" 
					  showDataTips="true"  dataProvider="{stockDataAC}" >
			
			<mx:horizontalAxis>
				<mx:DateTimeAxis dataUnits="days" parseFunction="myParseFunction" labelFunction="horlabelFunc"/>
			</mx:horizontalAxis>
			
			<mx:verticalAxis>
				<mx:LinearAxis baseAtZero="false" />
			</mx:verticalAxis>
			
			<mx:series>
				<mx:LineSeries yField="close" xField="date" displayName="测试1"/>
				<mx:LineSeries yField="next" xField="date" displayName="测试2"/>
			</mx:series>
		</mx:LineChart>
	</mx:Panel>
</s:Application>