flex学习小结8
1 饼状图
import mx.collections.ArrayCollection;
//绑定需要显示的数据
[Bindable]
//设定要显示的数据
private var modelData:ArrayCollection = new ArrayCollection( [
{ Year: "2010年世界杯", Count: 4 },
{ Year: "2014年世界杯", Count: 10 },
{ Year: "说不清", Count: 50} ]);
//定义函数用于显示回调
private function displayCount(data:Object, field:String, index:Number,
percentValue:Number):String {
//取百分比的数的6位
var temp:String= (" " + percentValue).substr(0,6);
//返回要显示数据的内容
return data.Year + ": " + '\n' + "人数: " + data.Count + '\n' + temp + "%";
}
]]>
</mx:Script>
<mx:Panel title="你认为中国足球队什么时候能够再次冲出亚洲" height="100%" width="100%">
<mx:PieChart id="chart" height="100%" width="100%"
paddingRight="5" paddingLeft="5"
showDataTips="true" dataProvider="{modelData}">
<mx:series>
<mx:PieSeries id="test_PS" labelPosition="callout" field="Count"
labelFunction="displayCount">
<mx:calloutStroke>
<mx:Stroke weight="0" color="0x888888" alpha="1.0"/>
</mx:calloutStroke>
<mx:radialStroke>
<mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/>
</mx:radialStroke>
<mx:stroke>
<mx:Stroke color="0" alpha="0.20" weight="2"/>
</mx:stroke>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Panel>
2 柱状图
<![CDATA[
//调入所需的包
import mx.collections.ArrayCollection;
[Bindable]
//设定要显示的数据
private var modelCPI:ArrayCollection = new ArrayCollection( [
{ Name: "食品", rise:7.6 },
{ Name: "零售商品", rise:2.4 },
{ Name: "工业品", rise:2.8 },
{ Name: "原材料", rise:3.8 }]);
]]>
</mx:Script>
<mx:Panel title="2007年上半年物价上涨百分比"
height="100%" width="100%" layout="horizontal">
<!--设定数据源 -->
<mx:ColumnChart id="column" height="100%" width="45%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{modelCPI}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Name"/>
</mx:horizontalAxis>
<mx:series>
<!--设定显示的字段 -->
<mx:ColumnSeries xField="Name" yField="rise" displayName="上涨%"/>
</mx:series>
</mx:ColumnChart>
<!--设定数据源 -->
<mx:BarChart id="bar" height="100%" width="45%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{modelCPI}">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Name"/>
</mx:verticalAxis>
<mx:series>
<!--设定显示的字段 -->
<mx:BarSeries yField="Name" xField="rise" displayName="上涨%"/>
</mx:series>
</mx:BarChart>
</mx:Panel>
3 样式管理类stylemanager
A 设定全局样式
<mx:Style>
global{
fontSize:12pt;
color:#9933FF;
}
</mx:Style>
设定后，所有组件的样式都是一样的,也可以这样：
<![CDATA[
import mx.styles.StyleManager;
private function setCurStyle():void{
StyleManager.getStyleDeclaration("global").setStyle('fontSize',"12");
StyleManager.getStyleDeclaration("global").setStyle('color',"#9933FF");
}
]]>
</mx:Script>
<mx:Button label="全局样式按钮" horizontalCenter="0" verticalCenter="-50" click="setCurStyle
()"/>
B 引入外部样式
<mx:style source="cssTest.css"/>
4 FADE渐变效果：
<mx:Fade id="Fade1" alphaFrom="1" alphaTo="0.3" duration="500" />
<mx:Fade id="Fade2" alphaFrom="0.3" alphaTo="1" duration="500" />
<mx:Image width="90" height="120" horizontalCenter="0" verticalCenter="0"
source="flexbuilder.jpg" mouseDownEffect="Fade1" mouseUpEffect="Fade2"/>
其中alpha设置透明度
5 移动的动画效果
<![CDATA[
//引入动画效果类
import mx.effects.easing.*;
//定义函数设定移动动画效果
private function moveImage():void {
//中断当前移动效果
myMove.end();
//设定移动组件的x坐标值
myMove.xTo=mouseX-100;
//设定移动组建的y坐标值
myMove.yTo=mouseY-100;
//通过动画进行组件的移动
myMove.play();
}
]]>
</mx:Script>
<!-- 定义一个移动标签设定要移动的组件-->
<mx:Move id="myMove" target="{img}" duration="700" easingFunction="{Bounce.easeInOut}"/>
<mx:Panel title="组件移动效果" width="95%" height="95%"
paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
<!--引入Canvas用于绝对坐标值的移动，响应鼠标按下事件-->
<mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage();">
<!--设定图片内容-->
<mx:Image id="img" source="flexbuilder.jpg"/>
</mx:Canvas>