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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧三皮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值