Flex Demo详解

来源:互联网 发布:蜂窝移动数据不能关闭 编辑:程序博客网 时间:2024/06/10 14:49

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <!-- 鼠标指中时候弹出提示框的样式,可根据个人情况而修改 -->
   <mx:Style>
        DataTip {
            fontFamily: "Arial";
            fontSize: 14;                      
        }
    </mx:Style>


    <mx:Script>
        <![CDATA[ 
        //导入相关包       
        import mx.collections.ArrayCollection;
        import mx.charts.*;

        //定义生成柱状图的数组
        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { GDS: "单位A", BL: 60},
            { GDS: "单位B", BL: 72},                      
            { GDS: "单位C", BL: 46},
            { GDS: "单位D", BL: 62},
            { GDS: "单位E", BL: 76},
            { GDS: "单位F", BL: 77},
            { GDS: "单位G", BL: 81} ]);
      
      
         
      
       public function myLabelFormat(obj:Object,pcat:Object,ax:LinearAxis):String
    {
          return  numForm.format(obj)+"%";
    }
   
    public function myLabelDisplay(hd:HitData):String{
      return "外业完成比例/n"+hd.item.GDS+":"+hd.item.BL+"%";
     
    }
      
        ]]>   
    </mx:Script>
    <mx:NumberFormatter id="numForm" useThousandsSeparator="true"/>
    <!-- 横条的颜色 alpha为透明度,默认为.10 --><!-- 横条除去边框的颜色就是横条中心部分的颜色-->
    <mx:SolidColor id="sc1" color="#58ACFF" alpha=".6"/>

    <!-- Define custom Strokes for the columns. --><!-- 横条边框的颜色,weight是边框的宽度-->
    <mx:Stroke id="s1" color="#0174DF" weight="2"/>
     <!-- 图表的标题-->
    <mx:Panel fontSize="15" title="数据工程-外业完成比例"
        height="140%" width="100%" layout="horizontal">
       
         <!-- 调用dataTipFunction重写鼠标指中时弹出的提示信息 -->
         <mx:BarChart id="bar" height="100%" width="95%"
            paddingLeft="1" paddingRight="1"
            showDataTips="true" fontSize="14" dataProvider="{medalsAC}"
            dataTipFunction="myLabelDisplay"          
            >
           
            <!-- 设置纵坐标读取的属性 --><!--坐标对象--> 
            <mx:verticalAxis>
                <mx:CategoryAxis id="a1" categoryField="GDS"/>   
            </mx:verticalAxis>
           
           
           <!-- 设置横坐标的最小刻度以及最大刻度,另外调用labelFunction重写刻度格式为百分比 --> <!--坐标对象-->
           <mx:horizontalAxis>
                <mx:LinearAxis    minimum="0" maximum="100" labelFunction="myLabelFormat"/>
           </mx:horizontalAxis>
          <!--图线对象 yField,xField为图线字段,displayName为图线描述,BarSeries是图线类型-->
          <!--fill是引用设置横条实体颜色及透明度的id,stroke是引用设置横条边框颜色及宽度的id-->
            <mx:series>
                <mx:BarSeries fontSize="14"
                    yField="GDS" 
                    xField="BL"
                    displayName="外业完成比例"
                     fill="{sc1}"
                    stroke="{s1}"                                    
                />
               
            </mx:series>
        </mx:BarChart>
        <!--设置小图形显示的图线描述-->
          <mx:Legend dataProvider="{bar}"/>


    </mx:Panel>
</mx:Application>

原创粉丝点击