来自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>
分享到:
相关推荐
Flex 3 Cookbook.Flex 3 Cookbook.Flex 3 Cookbook.Flex 3 Cookbook.Flex 3 Cookbook.Flex 3 Cookbook.Flex 3 Cookbook.
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex 4 Cookbook
flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解flex cookbook 了解...
Flex 3 Cookbook[中文版].pdf 网络上大力推荐的Flex学习图书
Flex_3_Cookbook中文文档,学习flex的好资料
Flex 3 Cookbook简体中文版最新推荐常青Flex 3 Cookbook简体中文版最新推荐常青Flex 3 Cookbook简体中文版最新推荐常青Flex 3 Cookbook简体中文版最新推荐常青
Flex.4.Cookbook
flex 学习文档 Flex 3 Cookbook pdf Flex 3 Cookbook源码
Flex.3.Cookbook
flex4 cookbook下载flex4 cookbook下载flex4 cookbook下载flex4 cookbook下载flex4 cookbook下载flex4 cookbook下载
大礼包了 送Flex cookbook(中文版)+Flex入门到实践 想真心学东西的 下载无憾
Flex3 CookBook 教程 Flex3 CookBook 教程
Flex_CookBook_读书笔记(精品) Flex_CookBook_读书笔记(精品)
Flex+3+Cookbook+中文版
flex cookbook中文版flex cookbook中文版flex cookbook中文版
Flex 4 Cookbook 英文版( pdf 非影印版)
Flex_3_Cookbook_中文版_V1.part1