<?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>