<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
//柱形图和饼图的数据源
[Bindable]
private var medalsAC:ArrayCollection=new ArrayCollection
(
[{Country: "美国", 金牌: 35, 银牌: 39, 铜牌: 29},
{Country: "中国", 金牌: 88, 银牌: 17, 铜牌: 14},
{Country: "英国", 金牌: 27, 银牌: 27, 铜牌: 38}]);
[Bindable]
private var lines:ArrayCollection = new ArrayCollection( [
{ Month: "一月", 盈利: 2000, 消费: 1500, 数量: 450 },
{ Month: "二月", 盈利: 1000, 消费: 200, 数量: 600 },
{ Month: "三月", 盈利: 1500, 消费: 500, 数量: 300 },
{ Month: "四月", 盈利: 1800, 消费: 1200, 数量: 900 },
{ Month: "五月", 盈利: 2400, 消费: 575, 数量: 500 },
{ Month: "六月", 盈利: 2587, 消费: 567, 数量: 555 },
{ Month: "七月", 盈利: 1687, 消费: 945, 数量: 452 },
{ Month: "八月", 盈利: 5210, 消费: 867, 数量: 510 },
{ Month: "九月", 盈利: 6777, 消费: 298, 数量: 421 },
{ Month: "十月", 盈利: 8765, 消费: 986, 数量: 5554},
{ Month: "十一月", 盈利: 3456, 消费: 1789, 数量: 854 },
{ Month: "十二月", 盈利: 6533, 消费: 845, 数量: 1200 },
]);
//饼图回调方法
private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
var temp:String= (" " + percentValue).substr(0,6);
return data.Country + ":" + '/n'+ "金牌:" + data.金牌 +"/n"+temp + "%";
}
]]>
</mx:Script>
<!--标识 内部颜色-->
<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
<mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
<!--标识 边框颜色-->
<mx:Stroke id="s1" color="yellow" weight="2"/>
<mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
<mx:Stroke id="s3" color="0xFFCC66" weight="2"/>
<!--===================柱形图================-->
<mx:ColumnChart x="21" y="74" id="chart" height="237" dataProvider="{medalsAC}" fontSize="12" width="295">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="Country" yField="金牌" displayName="金牌" fill="{sc1}" stroke="{s1}"/>
<mx:ColumnSeries xField="Country" yField="银牌" displayName="银牌" fill="{sc2}" stroke="{s2}"/>
<mx:ColumnSeries xField="Country" yField="铜牌" displayName="铜牌" fill="{sc3}" stroke="{s3}"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{chart}" x="334" y="91" fontSize="12" height="103"/>
<!--===================饼图================-->
<!-- 饼图提示样式 -->
<mx:Stroke id="callouts" weight="2" color="red" alpha=".9" caps="square"/>
<!-- 饼图分割线的样式-->
<mx:Stroke id="radial" weight="1" color="gray" alpha=".6"/>
<!-- 饼图圆形边框样式 -->
<mx:Stroke id="pieborder" color="blue" weight="2" alpha=".5"/>
<mx:PieChart id="pchart"
height="284"
width="387"
showDataTips="true"
dataProvider="{medalsAC}"
x="451" y="50" fontSize="12">
<!--fills:饼图填充颜色;labelPosition:绘制提示-->
<mx:series>
<mx:PieSeries nameField="Country" labelPosition="callout"
field="金牌" labelFunction="displayGold"
calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}" >
<mx:filters>
<mx:Array/>
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{pchart}" x="870" y="137" height="97" fontSize="12"/>
<!--===========曲线图=====================-->
<mx:LineChart x="21" y="342" id="lineChart" width="693" height="273" dataProvider="{lines}" fontSize="12">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="盈利" form="curve" displayName="盈利" lineStroke="{s1}"/>
<mx:LineSeries yField="消费" form="curve" displayName="消费" lineStroke="{s2}"/>
<mx:LineSeries yField="数量" form="curve" displayName="数量" lineStroke="{s3}"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{lineChart}" x="121" y="623" width="282" height="37" fontSize="12"/>
</mx:Application>