学步园

首先来看看效果，如下图

下面是表格效果

好了，再奉献代码如下：

 <?xml version="1.0" encoding="utf-8"?><br /> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"<br /> width="100%" height="100%"><br /> <mx:Script><br /> <!--[CDATA[<br /> import mx.controls.Text;<br /> import mx.charts.series.items.ColumnSeriesItem;<br /> import mx.charts.chartClasses.IAxis;<br /> import mx.charts.chartClasses.Series;<br /> import mx.charts.ChartItem;<br /> import service.AnalysisService;<br /> import mx.collections.ArrayCollection;<br /> import util.GlobalParameter;<br /> import mx.charts.HitData;<br /> import mx.controls.Alert;<br /> import mx.charts.chartClasses.ChartBase;</p> <p> private var anlysisService:AnalysisService;<br /> private var _region:String;</p> <p> //格式化X轴上值<br /> private function monthShow(element:ChartItem, series:Series):Object<br /> {<br /> var data:ColumnSeriesItem = ColumnSeriesItem(element);<br /> return "￥" + data.yNumber+"元";<br /> }</p> <p> private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {<br /> return currencyFormatter.format(item)+"元";<br /> }</p> <p> private function categoryAxis_labelFunc(<br /> cat:Object,<br /> pcat:Object,<br /> ax:CategoryAxis,<br /> item:Object):String<br /> {<br /> return item['mymonth']+"月";<br /> }<br /> //结果<br /> [Bindable]<br /> private var arrayCollection:ArrayCollection;<br /> public function setData(result:ArrayCollection):void<br /> {<br /> this.arrayCollection = result;<br /> }</p> <p> private function getQueryResult():void<br /> {<br /> anlysisService = AnalysisService.getInstance();<br /> var queryYear:String = this.year.selectedItem.value;<br /> this.anlysisService.getAnalysicalData(this,queryYear);<br /> }<br /> ]]--></p> <p> </mx:Script></p> <p> <mx:SeriesInterpolate id="interpolate" elementOffset="10"/></p> <p> <mx:CurrencyFormatter id="currencyFormatter" precision="1" currencySymbol="￥" /></p> <p> <mx:Canvas width="100%" height="64" ><br /> <mx:ToggleButtonBar dataProvider="{vs}" x="64" y="32"/><br /> <mx:Label x="201" y="31" text="查询年份"/><br /> <mx:ComboBox x="270" id="year" y="27" width="95" dataProvider="{GlobalParameter.YEAR}"></mx:ComboBox><br /> <mx:Button label="查询" x="391" y="27" click="getQueryResult()"/><br /> </mx:Canvas></p> <p> <mx:SeriesZoom id="eff" horizontalFocus="{4}" relativeTo="{6}" verticalFocus="{6}" elementOffset="{2}" minimumElementDuration="{20}" duration="{1000}"/></p> <p> <mx:ViewStack id="vs" width="100%" height="450" y="72"></p> <p> <mx:VBox id="chartVBox" width="100%" height="100%" icon="@Embed('image/icons/icon_chart.png')" toolTip="图形"<br /> paddingLeft="4" paddingTop="4" paddingBottom="4" paddingRight="4"></p> <p> <!--使用ColumnChart组件 columnWidthRatio是指每列所占的比例--><br /> <mx:ColumnChart columnWidthRatio="0.2" id="column" height="100%" width="100%"<br /> dataProvider="{arrayCollection}" x="173" y="10" fontSize="18" ><br /> <mx:horizontalAxis><br /> <mx:CategoryAxis categoryField="mymonth"<br /> labelFunction="categoryAxis_labelFunc"<br /> title="房间租赁月收益统计"/><br /> </mx:horizontalAxis><br /> <mx:series><br /> <mx:ColumnSeries labelPosition="outside"<br /> showDataEffect="{eff}"<br /> hideDataEffect="{eff}" fontSize="14"<br /> displayName="收益"<br /> xField="mymonth" yField="total" /><br /> </mx:series></p> <p> <mx:backgroundElements><br /> <mx:Array><br /> <mx:GridLines direction="both"><br /> <mx:verticalStroke><br /> <mx:Stroke weight="1" color="#CCCCCC"/><br /> </mx:verticalStroke><br /> </mx:GridLines><br /> </mx:Array><br /> </mx:backgroundElements><br /> <!-- vertical axis --><br /> <mx:verticalAxis><br /> <mx:LinearAxis baseAtZero="false"<br /> labelFunction="linearAxis_labelFunc" /><br /> </mx:verticalAxis></p> <p> </mx:ColumnChart></p> <p> </mx:VBox></p> <p> <mx:VBox width="100%" height="100%" icon="@Embed('image/icons/icon_grid.png')" toolTip="表格"<br /> hideEffect="Fade" showEffect="Fade"><br /> <mx:DataGrid id="grd" width="100%" height="100%" dataProvider="{arrayCollection}"><br /> <mx:columns><br /> <mx:DataGridColumn headerText="月份" dataField="mymonth"/><br /> <mx:DataGridColumn textAlign="right" headerText="房租" dataField="sum_rent" /><br /> <mx:DataGridColumn textAlign="right" headerText="水费" dataField="sum_water_bill" /><br /> <mx:DataGridColumn textAlign="right" headerText="电费" dataField="sum_electricity_bill"/><br /> <mx:DataGridColumn textAlign="right" headerText="其它费用" dataField="sum_other_bill" /><br /> <mx:DataGridColumn textAlign="right" headerText="总计" dataField="total" /><br /> </mx:columns><br /> </mx:DataGrid><br /> </mx:VBox></p> <p> </mx:ViewStack></p> <p></mx:Canvas>