图表组件效果

在实际应用开发中为了能够更炫的定制数据展示过程，都会考虑到在图表组件上应用一些效果。针对图表组件，其可绑定的效果一般除了FLEX标准效果类以外，还可以自定义一些效果类，如在前面章节中谈及的自定义仪表盘组件。最为示例本节将重点展示Interpolate,Zoom和Slide三种效果类。

<?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}

  ]);

        private function click():void{

               chart.dataProvider = data.element;

               chart.secondDataProvider = data.element;

        }

  ]]></mx:Script>

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

  <mx:SeriesInterpolate id="interpolate" elementOffset="-10" minimumElementDuration="200" duration="2500"/>

  <mx:SeriesZoom id="zoom" horizontalFocus="center" relativeTo="chart" verticalFocus="center" elementOffset="30" minimumElementDuration="200" duration="2500"/>

  <mx:SeriesSlide id="slide"  direction="left" elementOffset="30" minimumElementDuration="100" duration="2500"/>

  <mx:ApplicationControlBar>

        <mx:Button label="Show Effects" click="click()"/>

  </mx:ApplicationControlBar>

  <mx:Panel>

     <mx:ColumnChart id="chart" height="270" showEffect="{interpolate}" >

        <mx:series>

           <mx:ColumnSeries yField="realvalue" displayName="realvalue" showDataEffect="{interpolate}" />

           <mx:ColumnSeries yField="planvalue" displayName="planvalue" showDataEffect="{zoom}" />

        </mx:series>

        <mx:secondSeries>

               <mx:LineSeries form="curve" xField="time" yField="realrate" showDataEffect="{slide}"/>

        </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