2012-03-09 14:26 LineChart实现双Y坐标

效果图：




LineChart文件内容：

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup gap="0" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Script>
  <![CDATA[
   import mx.binding.utils.BindingUtils;
   import mx.collections.ArrayCollection;

   import spark.components.CheckBox;

   public static const VERTICALAXISLEFT:String = 'verticalAxisLeft';
   public static const VERTICALAXISRIGHT:String = 'verticalAxisRight';
   [Bindable]
   /* 数据源 */
   private var _dataProvider:ArrayCollection;
   [Bindable]
   /* 水平轴上的绑定字段 ，默认空*/
   private var _categoryField:String = '';
   [Bindable]
   /* 水平轴上的标题 ，默认空*/
   private var _title:String = '';
   [Bindable]
   /* 是否显示左边的刻度线，默认true */
   private var _calibrationLeft:Boolean = true;
   [Bindable]
   /* 是否显示右边的刻度线，默认false */
   private var _calibrationRight:Boolean = false;
   [Bindable]
   /* 在垂直轴上显示的内容，可多个 ，格式 {yField:'字段',displayName:'提示标题',align:}*/
   private var _lineSeriesArray:Array;

   public function set dataProvider(value:ArrayCollection):void {
    _dataProvider = value;
   }

   public function set categoryField(value:String):void {
    _categoryField = value;
   }

   public function set title(value:String):void {
    _title = value;
   }

   public function set calibrationRight(value:Boolean):void {
    _calibrationRight = value;
   }

   public function set calibrationLeft(value:Boolean):void {
    _calibrationLeft = value;
   }

   public function set lineSeriesArray(value:Array):void {
    _lineSeriesArray = value;
    if (_lineSeriesArray) {
     var check:CheckBox;
     var target:mx.charts.LineChart = mx.charts.LineChart(this.getChildAt(1));
     colorList.removeAll();
     while (_lineSeriesArray.length > 0) {
      var item:Object = _lineSeriesArray.pop();
      var series:LineSeries = new LineSeries;
      series.horizontalAxis = h1;
      series.yField = item.yField;
      series.displayName = item.displayName;
      if (item.align == VERTICALAXISLEFT) {
       series.verticalAxis = v1;
      } else if (item.align == VERTICALAXISRIGHT) {
       series.verticalAxis = v2;
      }
      var storkt:SolidColorStroke = new SolidColorStroke();
      //随机生成颜色colorArr[i]
      storkt.color = bulidColor();
      storkt.weight = 1;
      series.setStyle("lineStroke", storkt);
      target.series.push(series);
      target.series = target.series;

      check = new CheckBox;
      check.setStyle('color', storkt.color);
      check.label = item.displayName;
      check.selected = true;
      tools.addElement(check);

      BindingUtils.bindProperty(series, 'visible', check, 'selected');
      BindingUtils.bindProperty(series, 'includeInLayout', check, 'selected');
     }
    }
   }

   private var source:Array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F'];

   private var colorList:ArrayCollection = new ArrayCollection;

   private function bulidColor():uint {
    var color:String = '0x';
    var index:Number;
    for (var i:int = 0; i < 6; i++) {
     //0-15之间的随机数，不包含15
     index = Math.round(Math.random() * 15);
     color += source[index];
    }
    if (colorList.contains(color)) {
     bulidColor();
    } else {
     colorList.addItem(color);
    }
    return mx.core.Singleton.getInstance("mx.styles::IStyleManager2").getColorName(color);
   }
  ]]>
</fx:Script>
<s:HGroup id="tools" gap="15" width="100%" horizontalAlign="center" verticalAlign="middle" height="30"/>
<mx:LineChart seriesFilters="[]" dataProvider="{_dataProvider}" showDataTips="true" width="100%" height="100%">
  <!--backgroundElements:背景设置-->
  <mx:backgroundElements>
   <mx:GridLines horizontalTickAligned="false" verticalTickAligned="false">
    <mx:verticalStroke>
     <mx:SolidColorStroke id="ss" color="#a6cecd" weight="1" alpha="0.4"/>
    </mx:verticalStroke>
    <mx:horizontalStroke>
     <mx:SolidColorStroke color="#a6cecd" weight="1" alpha="0.6"/>
    </mx:horizontalStroke>
   </mx:GridLines>
  </mx:backgroundElements>

  <!--categoryField：横坐标数据节点-->
  <mx:horizontalAxis>
   <mx:CategoryAxis id="h1" categoryField="{_categoryField}" title="{_title}"/>
  </mx:horizontalAxis>
  <mx:horizontalAxisRenderers>
   <mx:AxisRenderer placement="bottom" axis="{h1}"/>
  </mx:horizontalAxisRenderers>

  <!--纵坐标-->
  <mx:verticalAxisRenderers>
   <mx:AxisRenderer axisStroke="{ss}" placement="left" axis="{v1}" visible="{_calibrationLeft}"
        includeInLayout="{_calibrationLeft}"/>
   <mx:AxisRenderer axisStroke="{ss}" placement="right" axis="{v2}" visible="{_calibrationRight}"
        includeInLayout="{_calibrationRight}"/>
  </mx:verticalAxisRenderers>

  <mx:series>
   <!--纵坐标轴1-->
   <mx:LineSeries id="w__sasfw" horizontalAxis="{h1}" visible="false" includeInLayout="false">
    <mx:verticalAxis>
     <mx:LinearAxis id="v1" title=""/>
    </mx:verticalAxis>
   </mx:LineSeries>
   <!--纵坐标轴2-->
   <mx:LineSeries horizontalAxis="{h1}" visible="false" includeInLayout="false">
    <mx:verticalAxis>
     <mx:LinearAxis id="v2" title=""/>
    </mx:verticalAxis>
   </mx:LineSeries>
  </mx:series>
</mx:LineChart>
</s:VGroup>



测试文件内容：

<?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" xmlns:charts="com.charts.*">
<s:layout>
  <s:VerticalLayout/>
</s:layout>
<fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;

   [Bindable]
   private var expensesAC:ArrayCollection = new ArrayCollection([{Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450}, {Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600}, {Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300}, {Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900}, {Month: "May", Profit: 2400, Expenses: 575, Amount: 500}]);

   override protected function createChildren():void {
    addEventListener(FlexEvent.APPLICATION_COMPLETE, function(e:FlexEvent):void {
     var source:Array = [{yField: 'Profit', displayName: '利润', align: LineChart.VERTICALAXISLEFT}, {yField: 'Expenses', displayName: '开支', align: LineChart.VERTICALAXISLEFT}, {yField: 'Amount', displayName: '金额', align: LineChart.VERTICALAXISRIGHT}];
     chart.lineSeriesArray = source;
    });
    super.createChildren();
   }
  ]]>
</fx:Script>
<!-- Define custom colors for use as fills in the AreaChart control. -->
<charts:LineChart id="chart" width="100%" height="100%" calibrationRight="true" dataProvider="{expensesAC}" categoryField="Month"
       title="这是测试，可以改啊"/>
</s:Application>