Flex4水平缩放LineChart并使用滚动条浏览

适用于当LineChart显示的数据较多时（这时x轴上的标签会很接近）

水平滚动X轴数据，Y轴保持不变



代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 xmlns:chartClasses="views.charts.chartClasses.*"
		 width="600" height="500" creationComplete="panel1_creationCompleteHandler(event)"
		 title="可滚动的LineChart">
	
	<fx:Script>
		<![CDATA[
			import mx.formatters.DateFormatter;
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			import spark.effects.Move;
			import spark.events.IndexChangeEvent;
			
			
			[Bindable]
			private var historyData:ArrayCollection;
			
			protected function panel1_creationCompleteHandler(event:FlexEvent):void
			{
				var len:int = 1 * 60 * 1000;
				var now:Date = new Date();
				historyData = new ArrayCollection();
				
				now.setTime(now.time - len);
				for (var i:int = 0; i < len / 1000; i++) 
				{
					now.setTime(now.time + 1000);
					var t:Date = new Date(now.time);
					var gas:Object = {time:t, value:Math.random() * 0.9};
					historyData.addItem(gas);
				}
				
				chart1.dataProvider = historyData;
			}
			
			protected function hAxisLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
			{
				var _df:DateFormatter = new DateFormatter;
			        _df.formatString = "JJ:NN:SS";
			        return _df.format(categoryValue);
			}
			
			protected function hsb_changeHandler(event:Event):void
			{
				setDataProvider();
			}
			
			private var totalPage:int = 1;
			
			protected function zoomin(event:MouseEvent):void
			{
				if(totalPage >= (1 << 4))
					return;
				hsb.value = hsb.value * 0.5;
				totalPage = totalPage << 1;
				hsb.maximum = (totalPage - 1) * 10;
				
				setDataProvider();
			}
			
			protected function zoomout(event:MouseEvent):void
			{
				if(totalPage == 1)
					return;
				
				hsb.value = hsb.value * 2;
				totalPage = totalPage >> 1;
				hsb.maximum = (totalPage - 1) * 10;
				
				setDataProvider();
			}
			
			protected function setDataProvider():void
			{
				var j:int = int(hsb.value / hsb.maximum * (hsb.maximum / 10 / totalPage) * historyData.length);
				
				var ac:ArrayCollection = new ArrayCollection();
				var len:int = Math.ceil(1.0 * historyData.length / totalPage);
				for (var i:int = 0; (i < len) && (i + j) < historyData.length; i++) 
				{
					ac.addItem(historyData.getItemAt(i + j));
				}
				
				chart1.dataProvider = ac;
			}
			
			protected function widthDropDown_changeHandler(event:IndexChangeEvent):void
			{
				totalPage = int(widthDropDown.selectedItem.@value);
				hsb.maximum = (totalPage - 1) * 10;
				hsb.value = 0;
				
				setDataProvider();
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:controlBarContent>
		<s:HGroup width="100%" height="25" horizontalAlign="center" verticalAlign="middle">
			<s:DropDownList id="widthDropDown" change="widthDropDown_changeHandler(event)"
							labelField="@label" requireSelection="true">
				<s:XMLListCollection>
					<fx:XMLList xmlns="">
						<node label="原始宽度" value="1"/>
						<node label="两倍宽度" value="2"/>
						<node label="四倍宽度" value="4"/>
					</fx:XMLList>
				</s:XMLListCollection>
			</s:DropDownList>
			<s:Button label="放大" click="zoomin(event)"/>
			<s:Button label="缩小" click="zoomout(event)"/>
			<s:HScrollBar id="hsb" width="100%" height="20" change="hsb_changeHandler(event)"
						  maximum="0" minimum="0" snapInterval="1" value="0"/>
		</s:HGroup>
	</s:controlBarContent>
	
	<s:Group id="chartGroup" width="100%" height="100%">
		<mx:LineChart id="chart1" width="100%" height="100%">
			<mx:horizontalAxis>
				<mx:CategoryAxis id="hAxis1" categoryField="time" displayName="时间"
								 labelFunction="hAxisLabelFunction"/>
			</mx:horizontalAxis>
			
			<mx:verticalAxis>
				<mx:LinearAxis id="vAxis1" baseAtZero="true" displayName="Gas比例" maximum="1"/>
			</mx:verticalAxis>
			
			<mx:series>
				<mx:LineSeries displayName="Gas" form="curve" xField="time" yField="value"/>
			</mx:series>
		</mx:LineChart>
		
		
	</s:Group>
</s:Panel>

好像没什么需要解释的。

评论

1 楼 zy14shadow 2012-04-18