16.2.为图表添加效果
16.2.1. 问题
我想要为图表添加一些效果。
16.2.2. 解决办法
想为图表的坐标轴或数列添加效果，要使用坐标轴定义的<mx:rollOverEffect> 或者<mx:rollOutEffect>标签。
16.2.3.讨论
来自mx.effects 包的任何效果都能在图表上的数列或坐标轴添加的效果。一个简单的翻转效果就可以使图表的显示效果和使用效果大大提高。以下是一个简单的效果，当鼠标离开图表，图表就会变得透明，当鼠标放在图表上，图表就变得不透明。
以下的部分是为区域图表添加的鼠标翻转的逐渐透明效果。这些效果只会在数列的部分出现，不会影响整个图表。
想要为图表增添更多的效果，可以使用SeriesInterpolate、SeriesZoom 和SeriesSlide 这三个效果属性值来增添动画效果。SeriesInterpolate 可以在新旧数据变换时使数据点移动。
SeriesZoom 使旧数据缩小到不可见后再将新数据从不可见放大。SeriesSlide 使旧数据滑出图表后让新数据滑入图表。这些事件通常添加到数列对象的showDataEffect 和hideDataEffect属性中。SeriesInterpolate 只能添加到showDataEffect 中，当将其添加到hideDataEffect 中是没有效果的。
以下例子显示了一个图表的滑动效果，当转换两个数据集合的时候就会显示出图表数列滑动的效果。若要显示SeriesZoom 效果，就要把其他效果的代码加上注释，然后去掉SeriesZoom效果的注释。要显示SeriesInterpolate 效果，同样要把其他效果的代码加上注释，然后去掉SeriesInterpolate 效果的注释，并且要把ColumnSeries 标签中的hideDataEffect 属性去掉。
我想要为图表添加一些效果。
16.2.2. 解决办法
想为图表的坐标轴或数列添加效果，要使用坐标轴定义的<mx:rollOverEffect> 或者<mx:rollOutEffect>标签。
16.2.3.讨论
来自mx.effects 包的任何效果都能在图表上的数列或坐标轴添加的效果。一个简单的翻转效果就可以使图表的显示效果和使用效果大大提高。以下是一个简单的效果，当鼠标离开图表，图表就会变得透明，当鼠标放在图表上，图表就变得不透明。
+展开
-XML
<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:horizontalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries alpha=".5" yField="rainfall" displayName=""rainfall">
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:horizontalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries alpha=".5" yField="rainfall" displayName=""rainfall">
以下的部分是为区域图表添加的鼠标翻转的逐渐透明效果。这些效果只会在数列的部分出现，不会影响整个图表。
+展开
-XML
<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>
<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 中是没有效果的。
以下例子显示了一个图表的滑动效果，当转换两个数据集合的时候就会显示出图表数列滑动的效果。若要显示SeriesZoom 效果，就要把其他效果的代码加上注释，然后去掉SeriesZoom效果的注释。要显示SeriesInterpolate 效果，同样要把其他效果的代码加上注释，然后去掉SeriesInterpolate 效果的注释，并且要把ColumnSeries 标签中的hideDataEffect 属性去掉。
+展开
-XML
<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: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>
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: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>
加支付宝好友偷能量挖...
