FLEX 条形图(柱状图)设置刻度为百分比

来源:互联网 发布:派拓网络 编辑:程序博客网 时间:2024/05/16 00:46

作者原创,如需转载请注明出处:www.krzone.org
  不多说了,附上代码+成品看吧,关键地方在代码里面有注解了。

<?xml version="1.0"?>
<!-- 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="#58ACFA" alpha=".6"/>

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="#0174DF" weight="1"/>

    <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>
          
            <mx:series>
                <mx:BarSeries fontSize="14"
                    yField="GDS"
                    xField="BL"
                    displayName="外业完成比例"
                    fill="{sc1}"
                    stroke="{s1}"                                      
                />
                
            </mx:series>
        </mx:BarChart>

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