Flex双Y轴的实现

本文参考自:http://apps.hi.baidu.com/share/detail/24719901

<? 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" >
    
     < fx: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} ]);
        
]]>
     </ fx:Script >
    
     < fx:Declarations >
         <!--  将非可视元素(例如服务、值对象)放在此处  -->    
         < mx:SolidColor  id ="sc1"  color ="blue"  alpha =".3" />
         < mx:Stroke  id  = "s1"  color ="blue"  weight ="2" />
        
     </ fx:Declarations >
    
    
     < 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 >
    
    
    
</ s:Application >

 

 

你可能感兴趣的:(Flex)