复合坐标轴

在实际的应用中有可能需要在一个图表组件中显示三个坐标轴，比如一个横轴两个纵轴。其中一个纵轴用来标注销售的实际值，另一个标注实际值的增长率。实现这个功能，最主要的是设置图表组件的secondSeries属性指定附加的坐标轴以及secondDataProvider属性指定新坐标轴的数据源。参考下述示例，

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="489" height="418">

  <mx:Script><![CDATA[

        import mx.controls.Alert;

        import mx.charts.events.ChartItemEvent;

  import mx.collections.ArrayCollection;

  [Bindable]

  public var planvalue:ArrayCollection = new ArrayCollection([

     {time: "1", realvalue: 2000, planvalue: 1500,guessvalue:1000,realrate:20,planrate:10},

     {time: "2", realvalue: 1000, planvalue: 200,guessvalue:1000,realrate:40,planrate:50},

     {time: "3", realvalue: 1500, planvalue: 500,guessvalue:1000,realrate:20,planrate:80}

  ]);

       

  ]]></mx:Script>

  <mx:Model id="data" source="demoData.xml"/>

  <mx:Panel>

     <mx:ColumnChart id="chart" dataProvider="{data.element}" secondDataProvider="{data.element}" height="270" >

        <mx:series>

           <mx:ColumnSeries yField="realvalue" displayName="realvalue" />

           <mx:ColumnSeries yField="planvalue" displayName="planvalue" />

        </mx:series>

        <mx:secondSeries>

               <mx:LineSeries form="curve" xField="time" yField="realrate"/>

        </mx:secondSeries>

        <mx:horizontalAxis>

           <mx:CategoryAxis categoryField="time" />

        </mx:horizontalAxis>

        </mx:ColumnChart>

  </mx:Panel>

</mx:Application>

 

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/mervyn_lee/archive/2008/10/07/3027070.aspx