来自mx.effects 包的任何效果都能在图表上的数列或坐标轴添加的效果。一个简单的翻转效
果就可以使图表的显示效果和使用效果大大提高。以下是一个简单的效果,当鼠标离开图表,
图表就会变得透明,当鼠标放在图表上,图表就变得不透明。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="0xFFFFFF"> <mx:Script> <![CDATA[ [Bindable] public var chartDP:Array = [ {day:'Monday',rainfall:10,elevation:100,temperature:78}, {day:'Tuesday',rainfall:7,elevation:220,temperature:66}, {day:'Wednesday',rainfall:5,elevation:540,temperature:55}, {day:'Thursday',rainfall:8,elevation:60,temperature:84}, {day:'Friday',rainfall:11,elevation:390,temperature:52}, {day:'Saturday',rainfall:12,elevation:790,temperature:45}, {day:'Sunday',rainfall:14,elevation:1220,temperature:24} ]; ]]> </mx:Script> <mx:AreaChart dataProvider="{chartDP}" > <mx:horizontalAxis> <mx:CategoryAxis categoryField="day" /> </mx:horizontalAxis> <mx:series> <mx:AreaSeries alpha=".5" yField="rainfall" displayName="rainfall"> <mx:rollOverEffect> <mx:Fade alphaFrom=".5" alphaTo="1" duration="500"/> </mx:rollOverEffect> <mx:rollOutEffect> <mx:Fade alphaFrom="1" alphaTo=".5" duration="500" /> </mx:rollOutEffect> </mx:AreaSeries> </mx:series> </mx:AreaChart> </mx:Application>
想要为图表增添更多的效果,可以使用SeriesInterpolate、SeriesZoom 和SeriesSlide 这三个
效果属性值来增添动画效果。SeriesInterpolate 可以在新旧数据变换时使数据点移动。
SeriesZoom 使旧数据缩小到不可见后再将新数据从不可见放大。SeriesSlide 使旧数据滑出图
表后让新数据滑入图表。这些事件通常添加到数列对象的showDataEffect 和hideDataEffect
属性中。SeriesInterpolate 只能添加到showDataEffect 中,当将其添加到hideDataEffect 中是
没有效果的。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="0xFFFFFF"> <mx:Script> <![CDATA[ [Bindable] public var chartDP1:Array = [ {day:'Monday',rainfall:10,elevation:100,temperature:78}, {day:'Tuesday',rainfall:7,elevation:220,temperature:66}, {day:'Wednesday',rainfall:5,elevation:540,temperature:55}, {day:'Thursday',rainfall:8,elevation:60,temperature:84}, {day:'Friday',rainfall:11,elevation:390,temperature:52}, {day:'Saturday',rainfall:12,elevation:790,temperature:45}, {day:'Sunday',rainfall:14,elevation:1220,temperature:24} ]; [Bindable] public var chartDP2:Array = [ {day:'Sunday',rainfall:10,elevation:100,temperature:78}, {day:'Saturday',rainfall:7,elevation:220,temperature:66}, {day:'Friday',rainfall:5,elevation:540,temperature:55}, {day:'Thursday',rainfall:8,elevation:60,temperature:84}, {day:'Wednesday',rainfall:11,elevation:390,temperature:52}, {day:'Tuesday',rainfall:12,elevation:790,temperature:45}, {day:'Monday',rainfall:14,elevation:1220,temperature:24} ]; ]]> </mx:Script> <mx:SeriesSlide id="dataIn" duration="500" direction="up"/> <mx:SeriesSlide id="dataOut" duration="500" direction="up"/> <!--<mx:SeriesZoom id="dataOut" duration="500"/>--> <!--<mx:SeriesZoom id="dataIn" duration="500"/>--> <!--<mx:SeriesInterpolate id="dataIn" duration="1000"/>--> <mx:BarChart id="rainfallChart" dataProvider="{chartDP1}" > <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{chartDP1}" categoryField="day" /> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries yField="rainfall" xField="day" displayName="rainfall" showDataEffect="{dataIn}" hideDataEffect="{dataOut}" /> </mx:series> </mx:BarChart> <mx:HBox> <mx:RadioButton groupName="dataProvider" label="Data Provider 1" selected="true" click="rainfallChart.dataProvider=chartDP1;"/> <mx:RadioButton groupName="dataProvider" label="Data Provider 2" click="rainfallChart.dataProvider=chartDP2;"/> </mx:HBox> </mx:Application>