Chart之ColumnChart简单应用
效果图:
代码:
<?xml version="1.0" encoding="utf-8"?> <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" height="539" width="608"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; //各个国家的金牌,银牌,铜牌数量统计 [Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [ { Country: "美国", Gold: 40, Silver:20, Bronze: 20 }, { Country: "中国", Gold: 32, Silver:17, Bronze: 14 }, { Country: "俄罗斯", Gold: 27, Silver:27, Bronze: 38 } ]); /** *更新所有国家的奖牌显示信息 */ protected function update(event:MouseEvent):void { var countryName:String = cboCountry.textInput.text; for(var i:int = 0;i<medalsAC.length;i++){ var country:Object = medalsAC.getItemAt(i); if(country.Country == countryName){ country.Gold = txtGold.text; country.Silver = txtSilver.text; country.Bronze = txtBronze.text; column.dataProvider = medalsAC; break; } } } ]]> </fx:Script> <s:Panel title="ColumnChart Control" width="565" height="403" color="0x000000" borderAlpha="0.15" fontSize="12"> <s:layout> <s:HorizontalLayout horizontalAlign="center" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> </s:layout> <mx:ColumnChart id="column" height="342" color="0x323232" showDataTips="true" dataProvider="{medalsAC}" fontSize="12"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField="Country" yField="Gold" displayName="金牌"/> <mx:ColumnSeries xField="Country" yField="Silver" displayName="银牌"/> <mx:ColumnSeries xField="Country" yField="Bronze" displayName="铜牌"/> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{column}" color="0x323232"/> </s:Panel> <s:Label x="10" y="429" text="修改3个国家的奖牌数量:"/> <s:Label x="163" y="428" text="选择国家:"/> <s:ComboBox x="231" y="424" id="cboCountry" dataProvider="{medalsAC}" labelField="Country" selectedIndex="0" /> <s:Label x="187" y="451" text="金牌:" id="lblGold"/> <s:TextInput x="232" y="452" id="txtGold"/> <s:Label x="187" y="481" text="铜牌:" id="lblSilver"/> <s:TextInput x="232" y="482" id="txtSilver"/> <s:Label x="187" y="511" text="银牌:" id="lblBronze"/> <s:TextInput x="232" y="512" id="txtBronze"/> <s:Button x="368" y="512" label="更新" width="92" id="btnUpdate" click="update(event)"/> </s:Application> <!-- Legend 控件可向图表中添加图例,此图例可为图表中的每个数据系列显示一个标签 series组织具体要显示的字段内容 -->