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>