首页 > 代码库 > Flex 中自带的 图标使用
Flex 中自带的 图标使用
本示例是介绍了 柱状图,饼状图,面积图,折线图的基本用法,详细属性配置请参考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>
Flex 中自带的 图标使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。