Flex4 - 线图（LineChart）实现双纵坐标轴

   

<?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">
	<fx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		
		[Bindable]
		private var arr:ArrayCollection=new ArrayCollection([
			{xname:'18:00',yname:2000,y2name:800},
			{xname:'19:00',yname:1000,y2name:500},
			{xname:'20:00',yname:3000,y2name:700},
			{xname:'21:00',yname:4000,y2name:800},
			{xname:'22:00',yname:1300,y2name:600}]);
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 轴线样式 (暂时不需要，改成背景上绘制)-->
		<mx:SolidColorStroke id = "axisS1" color="0xE3E3E3" weight="1" alpha="0"/>
	</fx:Declarations>	
	
	<mx:LineChart id="myChart" seriesFilters="[]" fontSize="12"
				  height="60%" width="60%"  verticalCenter="0" horizontalCenter="0" 
				  dataProvider="{arr}"
				  showDataTips="true">
		<!--backgroundElements:背景设置-->
		<mx:backgroundElements>
			<s:Group width="100%" height="100%" id="chartBg">
				<s:Rect left="0" right="1" top="0" bottom="0">
					<s:fill>
						<s:SolidColor alpha="1" color="#F5F5F5"/>
					</s:fill>    
					<s:stroke>
						<s:SolidColorStroke color="0xE3E3E3" weight="1"/>
					</s:stroke>
				</s:Rect>				
			</s:Group>
			<mx:GridLines gridDirection="both" >
				<mx:horizontalStroke>
					<mx:SolidColorStroke  color="0xE3E3E3" weight="1"/>
				</mx:horizontalStroke>
				<mx:verticalStroke>
					<mx:SolidColorStroke  color="0xEAEAEA" weight="1"/>
				</mx:verticalStroke>
			</mx:GridLines>			
		</mx:backgroundElements>
		
		<!--categoryField：横坐标数据节点-->
		<mx:horizontalAxis>
			<mx:CategoryAxis id="h1"
							 categoryField="xname"
							 title="时间"/>
		</mx:horizontalAxis>
		
		<mx:horizontalAxisRenderers>
			<mx:AxisRenderer placement="bottom" axis="{h1}"  axisStroke="{axisS1}" 
							 tickPlacement="none" minorTickPlacement="none"/>
		</mx:horizontalAxisRenderers>
		
		<!--纵坐标-->
		<mx:verticalAxisRenderers>
			<mx:AxisRenderer placement="left" axis="{v1}"  axisStroke="{axisS1}"
							 tickPlacement="none" minorTickPlacement="none"/>
			<mx:AxisRenderer placement="right" axis="{v2}"  axisStroke="{axisS1}" 
							 tickPlacement="none" minorTickPlacement="none"/>
		</mx:verticalAxisRenderers>
		
		<!--yField:纵坐标数据节点-->
		<mx:series>
			<!--纵坐标轴1数据节点-->
			<mx:LineSeries id="cs1" horizontalAxis="{h1}" yField="yname" displayName="电压（V）">
				<mx:verticalAxis>
					<mx:LinearAxis id="v1" title="电压（V）"/>
				</mx:verticalAxis>
			</mx:LineSeries>
			<!--纵坐标轴2数据节点-->
			<mx:LineSeries id="cs2" horizontalAxis="{h1}" yField="y2name" displayName="电流（A）">
				<mx:verticalAxis>
					<mx:LinearAxis id="v2" title="电流（A）"/>
				</mx:verticalAxis>
			</mx:LineSeries>
		</mx:series>
	</mx:LineChart>
</s:Application>