Flex 中自带的 图标使用
本示例是介绍了 柱状图,饼状图,面积图,折线图的基本用法,详细属性配置请参考ActionScript3.0官方文档API<![CDATA[import mx.collections.ArrayCollection;[Bindable]private var medalsAC:ArrayCollection = ne
·
查看原文:http://www.ibloger.net/article/347.html
本示例是介绍了 柱状图,饼状图,面积图,折线图的基本用法,详细属性配置请参考ActionScript3.0官方文档API http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/index.html
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "美国", Gold: 35, Silver:39, Bronze: 29 },
{ Country: "中国", Gold: 32, Silver:17, Bronze: 14 },
{ Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]);
private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
var temp:String = (" " + percentValue).toString().substr(0,6);
return data.Country + ": " + "金牌总数: " + data.Gold + '\n' + temp + "%";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 设置列的填充颜色 -->
<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:SolidColorStroke id="s1" color="#FF6666" weight="2"/>
<mx:SolidColorStroke id="s2" color="#0066CC" weight="2"/>
<mx:SolidColorStroke id="s3" color="#99CC00" weight="2"/>
<!-- 饼图上用于说明信息的标注线 -->
<mx:SolidColorStroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
<!-- 饼图之间的分割线-->
<mx:SolidColorStroke id="radial" weight="1" color="#CC3333" alpha=".6"/>
<!-- 饼图和图例的外边框 -->
<mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
</fx:Declarations>
<mx:Panel title="ColumnChart 和 BarChart 控制示例(介绍美国、中国和俄罗斯的金、银、铜获奖数量)" height="50%" width="30%" layout="horizontal">
<mx:ColumnChart id="column" type="clustered" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
<mx:horizontalAxis> <!-- X水平轴 -->
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" />
<mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" />
<mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" />
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/> <!-- 添加图例 -->
<mx:BarChart id="bar" height="100%" width="45%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
<mx:verticalAxis> <!-- X垂直轴 -->
<mx:CategoryAxis categoryField="Country"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries yField="Country" xField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" />
<mx:BarSeries yField="Country" xField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" />
<mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" />
</mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{bar}"/>
</mx:Panel>
<mx:Panel title="LineChart 和 AreaChart 控制示例(介绍美国、中国和俄罗斯的金、银、铜获奖数量)" horizontalAlign="center" height="100%" width="20%" layout="vertical">
<mx:LineChart id="linechart" height="50%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="Gold" form="curve" displayName="金" lineStroke="{s1}"/>
<mx:LineSeries yField="Silver" form="curve" displayName="银" lineStroke="{s2}"/>
<mx:LineSeries yField="Bronze" form="curve" displayName="铜" lineStroke="{s3}"/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{linechart}" direction="horizontal" labelPlacement="bottom"/>
<mx:AreaChart id="Areachart" height="50%" width="100%" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="Gold" form="curve" displayName="金" areaStroke="{s1}" areaFill="{sc1}"/>
<mx:AreaSeries yField="Silver" form="curve" displayName="银" areaStroke="{s2}" areaFill="{sc2}"/>
<mx:AreaSeries yField="Bronze" form="curve" displayName="铜" areaStroke="{s3}" areaFill="{sc3}"/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{Areachart}" direction="horizontal" labelPlacement="bottom"/>
</mx:Panel>
<mx:Panel title="PieChart 控制示例(清理阴影的和未清理阴影的)" horizontalAlign="center" height="100%" width="40%" layout="vertical">
<mx:PieChart id="chart" height="50%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" dataProvider="{medalsAC}" >
<mx:series>
<mx:PieSeries nameField="Country" labelPosition="callout" field="Gold" labelFunction="displayGold"
calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}">
<!-- 清理饼图阴影. -->
<mx:filters>
<fx:Array/>
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{chart}" direction="horizontal" labelPlacement="bottom"/>
<mx:PieChart id="chart2" height="50%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" dataProvider="{medalsAC}" >
<mx:series>
<mx:PieSeries nameField="Country" labelPosition="callout" field="Gold" labelFunction="displayGold"
calloutStroke="{callouts}" radialStroke="{radial}" stroke="{pieborder}" fills="{[sc1, sc2, sc3]}">
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{chart}" direction="horizontal" labelPlacement="bottom"/>
</mx:Panel>
</s:Application>
更多推荐
已为社区贡献3条内容
所有评论(0)