Flex柱状图和线图结合

[img][/img]

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
width="800" 
height="400" 
fontSize="12"
title="柱状图+线状图"
creationComplete="initApp()">

<!-- 柱状图加线图，各自用各自的Y轴 -->

<mx:Script>
  <![CDATA[
   import mx.charts.series.items.ColumnSeriesItem;
   import mx.charts.chartClasses.Series;
   import mx.charts.ChartItem;
   import mx.collections.ArrayCollection;
   /** 绑定的数据源*/
         [Bindable]
         private var medalsAC:ArrayCollection;
          
         /**
          * 初始化方法
          */
         private function initApp():void
         {
          var array:ArrayCollection = new ArrayCollection();
          for(var i:uint; i<12; i++)
          {
           var obj:Object = new Object();
           obj.month = (i+1) + "月份";
           obj.number = 100 + Math.round(Math.random() * 500);
           array.addItem(obj);
          }
          medalsAC = new ArrayCollection();
          
          //计算增长率
          for(var j:uint; j<array.length; j++)
          {
           obj = new Object();
           obj.month = array[j].month;
           obj.number = array[j].number;
           if(j>0)
           {
            obj.rise =  Number(((array[j].number - array[j-1].number) / array[j-1].number) * 100).toFixed(2);
           }
           medalsAC.addItem(obj);
          }
         }
  ]]>
</mx:Script>


    <mx:SolidColor id="sc1" color="blue" alpha="0.6"/>
    
    <mx:Stroke id="s1" color="white" weight="2"/>
    <mx:Stroke id="s2" color="red" weight="2"/>
    
<mx:HBox height="100%" width="100%" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10">
  <mx:ColumnChart id="column" 
      height="100%" 
            width="100%" 
            showDataTips="true"
            dataProvider="{medalsAC}" 
            secondDataProvider="{medalsAC}" fontSize="12">   
   <mx:horizontalAxis>
          <mx:CategoryAxis categoryField="month"/>
         </mx:horizontalAxis>
                 
         <mx:series>
          <mx:ColumnSeries yField="number" displayName="生产量" fill="{sc1}" stroke="{s1}"/>
         </mx:series>
             
   <mx:secondVerticalAxis>
          <mx:LinearAxis />
         </mx:secondVerticalAxis>
            
   <mx:secondSeries>
    <mx:LineSeries yField="rise" displayName="增长率" form="curve" lineStroke="{s2}"/>
         </mx:secondSeries>
         
  </mx:ColumnChart>
  
  <mx:Legend dataProvider="{column}" fontWeight="bold"/>
  
</mx:HBox>
</mx:Panel>

评论

1 楼 chengzanda 2013-08-02  

写的很好，不过secondVerticalAxis等标签在flex4.0之后就用不了，也不知道用怎么代替