Flex双Y轴的实现

最近由于项目的需要,用flex实现了一个双Y轴的Chart,现在将代码拿出来晒晒!

<?xml version="1.0"?>
<!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Wage: 2000, Fine: 100},
            { Month: "Feb", Wage: 1000, Fine: 50},
            { Month: "Mar", Wage: 1500, Fine: 70},
            { Month: "Apr", Wage: 1800, Fine: 30},
            { Month: "May", Wage: 2400, Fine: 50} ]);
        ]]>
    </mx:Script>
	<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:Stroke id = "s1" color="blue" weight="2"/>
    
    <mx:Panel title="LineChart and AreaChart Controls Example" 
        height="100%" width="100%" layout="horizontal">

        <mx:LineChart id="linechart" height="100%" width="100%"
            paddingLeft="5" paddingRight="5" 
            showDataTips="true" dataProvider="{expensesAC}">
                
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>
            
            <mx:verticalAxis>
            	<mx:LinearAxis id="first" minimum="0" maximum="200"/>
            </mx:verticalAxis>
            
            <mx:secondVerticalAxis>
            	<mx:LinearAxis id="second" minimum="500" maximum="3000"/>
            </mx:secondVerticalAxis>
            
            <mx:series>
                <mx:LineSeries verticalAxis="{first}" yField="Fine" form="curve" displayName="Fine"/>
                <mx:ColumnSeries verticalAxis="{second}" yField="Wage" displayName="Wage" stroke="{s1}" fill="{sc1}"/>
            </mx:series>
        </mx:LineChart>
    </mx:Panel>
</mx:Application>

效果请看附件.