flex 之折线图1

该博文转自:http://hi.baidu.com/wangqinlanbd/item/0b2d98797d88f22d5c1789e9

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				layout="vertical" 
				verticalAlign="middle" 
				backgroundColor="white" 
				preinitialize="init();"> 
	
	<mx:Script> 
		<![CDATA[ 
			import mx.charts.chartClasses.IAxis; 
			import mx.formatters.CurrencyFormatter; 
			
			private var currFormatter:CurrencyFormatter; 
			
			private function init():void { 
				currFormatter = new CurrencyFormatter(); 
				currFormatter.precision = 2; 
			} 
			
			private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { 
				return currFormatter.format(item); 
			} 
			
			private function lineChart_creationComplete():void { 
				var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum); 
				var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum); 
				linearAxis.minimum = linearAxisMinimum; 
				linearAxis.maximum = linearAxisMaximum; 
			} 
		]]> 
	</mx:Script> 
	
	<mx:XMLListCollection id="dp"> 
		<mx:source> 
			<mx:XMLList> 
				<quote date="8/27/2007" open="40.38" close="40.81" /> 
				<quote date="8/24/2007" open="40.5" close="40.41" /> 
				<quote date="8/23/2007" open="40.82" close="40.6" /> 
				<quote date="8/22/2007" open="40.4" close="40.77" /> 
				<quote date="8/21/2007" open="40.41" close="40.13" /> 
				<quote date="8/20/2007" open="40.55" close="40.74" /> 
				<quote date="8/17/2007" open="40.18" close="40.32" /> 
				<quote date="8/16/2007" open="39.83" close="39.96" /> 
				<quote date="8/15/2007" open="40.22" close="40.18" /> 
				<quote date="8/14/2007" open="41.01" close="40.41" /> 
				<quote date="8/13/2007" open="41" close="40.83" /> 
				<quote date="8/10/2007" open="41.3" close="41.06" /> 
				<quote date="8/9/2007" open="39.9" close="40.75" /> 
				<quote date="8/8/2007" open="39.61" close="40.23" /> 
				<quote date="8/7/2007" open="39.08" close="39.42" /> 
				<quote date="8/6/2007" open="38.71" close="39.38" /> 
				<quote date="8/3/2007" open="39.47" close="38.75" /> 
				<quote date="8/2/2007" open="39.4" close="39.52" /> 
				<quote date="8/1/2007" open="40.29" close="39.58" /> 
			</mx:XMLList> 
		</mx:source> 
	</mx:XMLListCollection> 
	
	<mx:ApplicationControlBar dock="true"> 
		<mx:Form styleName="plain"> 
			<mx:FormItem label="minimum:"> 
				<mx:HSlider id="minSlider" 
							minimum="28" 
							maximum="38" 
							value="38" 
							liveDragging="true" 
							snapInterval="1" 
							change="linearAxis.minimum = event.value;" /> 
			</mx:FormItem> 
			<mx:FormItem label="maximum:"> 
				<mx:HSlider id="maxSlider" 
							minimum="42" 
							maximum="52" 
							value="42" 
							liveDragging="true" 
							snapInterval="1" 
							change="linearAxis.maximum = event.value;" /> 
			</mx:FormItem> 
		</mx:Form> 
		
		<mx:Spacer width="100%" /> 
		
		<mx:Legend dataProvider="{lineChart}" 
				   direction="horizontal" /> 
	</mx:ApplicationControlBar> 
	
	<mx:LineChart id="lineChart" 
				  showDataTips="true" 
				  dataProvider="{dp}" 
				  width="100%" 
				  height="100%" 
				  creationComplete="lineChart_creationComplete();"> 
		
		<mx:backgroundElements> 
			<mx:GridLines id="gridLines" 
						  verticalTickAligned="false"> 
				<mx:verticalStroke> 
					<mx:Stroke color="haloSilver" 
							   weight="0" 
							   alpha="1.0" /> 
				</mx:verticalStroke> 
				<mx:horizontalStroke> 
					<!-- Set alpha to 0 so stroke isn't visible. --> 
					<mx:Stroke color="white" 
							   weight="0" 
							   alpha="0.0" /> 
				</mx:horizontalStroke> 
				<mx:horizontalFill> 
					<mx:SolidColor color="haloSilver" 
								   alpha="0.1" /> 
				</mx:horizontalFill> 
			</mx:GridLines> 
		</mx:backgroundElements> 
		
		<!-- vertical axis ** minorInterval:y轴线条的间 隔  interval:y轴数值的间隔,maximum:y轴最大值 , minimum:y轴最小值 --> 
		<mx:verticalAxis> 
			<mx:LinearAxis id="linearAxis" 
						   baseAtZero="false" 
						   title="Price (USD)" 
						   minorInterval="0.10" 
						   interval="0.5" 
						   maximum="78" minimum="0"
						   labelFunction="linearAxis_labelFunc" /> 
		</mx:verticalAxis> 
		
		<!-- horizontal axis --> 
		<mx:horizontalAxis> 
			<mx:CategoryAxis id="ca" 
							 categoryField="@date" 
							 title="Date" /> 
		</mx:horizontalAxis> 
		
		<!-- horizontal axis renderer --> 
		<mx:horizontalAxisRenderers> 
			<mx:AxisRenderer axis="{ca}"   fontSize="12"
							 canDropLabels="true" /> 
		</mx:horizontalAxisRenderers> 
		
		<!-- series --> 
		<mx:series> 
			<mx:LineSeries yField="@open" 
						   displayName="Open" /> 
		</mx:series> 
	</mx:LineChart> 
	
</mx:Application>

你可能感兴趣的:(Flex)