Flex中的ColumnChart和DataGrid结合使用

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
     width="100%" height="100%">
    <mx:Script>
      <!--[CDATA[
          import mx.controls.Text;
        import mx.charts.series.items.ColumnSeriesItem;
        import mx.charts.chartClasses.IAxis;
        import mx.charts.chartClasses.Series;
        import mx.charts.ChartItem;
        import service.AnalysisService;
        import mx.collections.ArrayCollection;
        import util.GlobalParameter;
        import mx.charts.HitData;
        import mx.controls.Alert;
        import mx.charts.chartClasses.ChartBase;
        
           private var anlysisService:AnalysisService; 
        private var _region:String;

        //格式化X轴上值
        private function monthShow(element:ChartItem, series:Series):Object
           {
             var data:ColumnSeriesItem = ColumnSeriesItem(element);        
             return "￥" + data.yNumber+"元";   
        }
               
        private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
              return currencyFormatter.format(item)+"元";
        }
          
          private function categoryAxis_labelFunc(
                  cat:Object,    
                pcat:Object,   
                ax:CategoryAxis,   
                item:Object):String
          {
                  return item['mymonth']+"月";
          }
        //结果
        [Bindable]
        private var arrayCollection:ArrayCollection;
        public  function setData(result:ArrayCollection):void
        {
            this.arrayCollection = result;
        }
            
        private function getQueryResult():void
        {
            anlysisService = AnalysisService.getInstance();
            var queryYear:String = this.year.selectedItem.value;
            this.anlysisService.getAnalysicalData(this,queryYear);
        }
      ]]-->

    </mx:Script>
    
    <mx:SeriesInterpolate id="interpolate" elementOffset="10"/>

    <mx:CurrencyFormatter id="currencyFormatter" precision="1"  currencySymbol="￥" />
    
    <mx:Canvas width="100%" height="64" >
         <mx:ToggleButtonBar dataProvider="{vs}" x="64" y="32"/>
         <mx:Label x="201" y="31" text="查询年份"/>
         <mx:ComboBox x="270" id="year" y="27" width="95" dataProvider="{GlobalParameter.YEAR}"></mx:ComboBox>
         <mx:Button label="查询" x="391" y="27" click="getQueryResult()"/>
    </mx:Canvas>

    <mx:SeriesZoom id="eff" horizontalFocus="{4}"  relativeTo="{6}" verticalFocus="{6}" elementOffset="{2}" minimumElementDuration="{20}" duration="{1000}"/>

    <mx:ViewStack id="vs" width="100%" height="450"  y="72">

        <mx:VBox id="chartVBox" width="100%" height="100%" icon="@Embed('image/icons/icon_chart.png')" toolTip="图形"
            paddingLeft="4" paddingTop="4" paddingBottom="4" paddingRight="4">

        <!--使用ColumnChart组件 columnWidthRatio是指每列所占的比例-->
        <mx:ColumnChart columnWidthRatio="0.2" id="column" height="100%" width="100%"  
         dataProvider="{arrayCollection}" x="173" y="10" fontSize="18" >
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="mymonth"
                     labelFunction="categoryAxis_labelFunc"
                     title="房间租赁月收益统计"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries labelPosition="outside"
                     showDataEffect="{eff}"  
                      hideDataEffect="{eff}" fontSize="14"
                      displayName="收益"
                      xField="mymonth" yField="total" />
            </mx:series>
            
            <mx:backgroundElements>
                    <mx:Array>
                        <mx:GridLines direction="both">
                            <mx:verticalStroke>
                                <mx:Stroke weight="1" color="#CCCCCC"/>
                            </mx:verticalStroke>
                        </mx:GridLines>
                    </mx:Array>
                </mx:backgroundElements>
                    <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>
             
        </mx:ColumnChart>

        </mx:VBox>

        <mx:VBox width="100%" height="100%" icon="@Embed('image/icons/icon_grid.png')" toolTip="表格" 
            hideEffect="Fade" showEffect="Fade">
            <mx:DataGrid id="grd" width="100%" height="100%" dataProvider="{arrayCollection}">
                <mx:columns>
                    <mx:DataGridColumn headerText="月份" dataField="mymonth"/>
                    <mx:DataGridColumn textAlign="right" headerText="房租" dataField="sum_rent" />
                    <mx:DataGridColumn textAlign="right" headerText="水费" dataField="sum_water_bill" />
                    <mx:DataGridColumn textAlign="right" headerText="电费" dataField="sum_electricity_bill"/>
                    <mx:DataGridColumn textAlign="right" headerText="其它费用" dataField="sum_other_bill" />
                    <mx:DataGridColumn textAlign="right" headerText="总计" dataField="total" />
                </mx:columns>
            </mx:DataGrid>
        </mx:VBox>

    </mx:ViewStack>

</mx:Canvas>