ColumnChart-PieChart-DataGrid联动

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><!--<mx:Style source="Standard.css"/>--> <mx:Script><!--[CDATA[ import mx.charts.series.items.ColumnSeriesItem; import mx.graphics.SolidColor; import mx.charts.ChartItem; import mx.graphics.IFill; import mx.collections.ArrayCollection; import mx.charts.HitData; import mx.charts.events.ChartItemEvent; [Bindable] public var overview:ArrayCollection = new ArrayCollection ([ {Operator_Name:" 操作甲", AllTotal:350, 食品类:90, 饮料类:20, 烟酒类:80, 日常用品:50, 娱乐类:80, 设备类:30}, {Operator_Name:" 操作乙", AllTotal:330, 食品类:80, 饮料类:50, 烟酒类:40, 日常用品:80, 娱乐类:50, 设备类:30}, {Operator_Name:" 操作丙", AllTotal:290, 食品类:60, 饮料类:20, 烟酒类:60, 日常用品:40, 娱乐类:50, 设备类:60}, {Operator_Name:" 操作丁", AllTotal:440, 食品类:70, 饮料类:80, 烟酒类:80, 日常用品:90, 娱乐类:40, 设备类:80}, {Operator_Name:" 操作戊", AllTotal:360, 食品类:30, 饮料类:70, 烟酒类:70, 日常用品:70, 娱乐类:40, 设备类:80}, {Operator_Name:" 操作己", AllTotal:450, 食品类:80, 饮料类:90, 烟酒类:90, 日常用品:80, 娱乐类:40, 设备类:70}, {Operator_Name:" 操作庚", AllTotal:390, 食品类:90, 饮料类:80, 烟酒类:70, 日常用品:70, 娱乐类:40, 设备类:40}, {Operator_Name:" 操作辛", AllTotal:280, 食品类:30, 饮料类:50, 烟酒类:60, 日常用品:50, 娱乐类:10, 设备类:80}, {Operator_Name:" 操作壬", AllTotal:320, 食品类:70, 饮料类:60, 烟酒类:50, 日常用品:40, 娱乐类:30, 设备类:70}, {Operator_Name:" 操作癸", AllTotal:300, 食品类:10, 饮料类:70, 烟酒类:40, 日常用品:90, 娱乐类:40, 设备类:50}]) public var drillDownDataSet:ArrayCollection; [Bindable] public var mainDataProvider:ArrayCollection = overview; private function zoomIntoSeries(e:ChartItemEvent):void { if (mainDataProvider == overview) { drillDownDataSet = new ArrayCollection(createDataForDate(e)); columnSeries.displayName = " 商品类统计"; columnSeries.yField = "amount"; columnSeries.xField = "type"; ca1.categoryField = "type"; ca2.field="amount" ca2.labelFunction=displayGold2; ca3.headerText=" 商品类别" ca3.dataField="type" ca4.headerText=" 消费金额" ca4.dataField="amount" mainPanel.title = " 销售员业绩 " + e.hitData.item.Operator_Name +": ¥"+ e.hitData.item.AllTotal+" 元"; mainDataProvider = drillDownDataSet; } else { mainDataProvider = overview; columnSeries.displayName = " 销售员业绩"; columnSeries.yField = "AllTotal"; columnSeries.xField = "Operator_Name"; ca1.categoryField = "Operator_Name"; ca2.field="AllTotal" ca2.labelFunction=displayGold1; ca3.headerText=" 销售员" ca3.dataField="Operator_Name" ca4.headerText=" 消费金额" ca4.dataField="AllTotal" mainPanel.title = " 销售员业绩"; } } private function createDataForDate(e:ChartItemEvent):Array { var result:Array = []; var 食品类:Object = { type:"食品类", amount:e.hitData.item.食品类 }; var 饮料类:Object = { type:"饮料类", amount:e.hitData.item.饮料类 }; var 烟酒类:Object = { type:"烟酒类", amount:e.hitData.item.烟酒类 }; var 日常用品:Object = { type:"日常用品", amount:e.hitData.item.日常用品 }; var 娱乐类:Object = { type:"娱乐类", amount:e.hitData.item.娱乐类 }; var 设备类:Object = { type:"设备类", amount:e.hitData.item.设备类 }; result.push(食品类); result.push(饮料类); result.push(烟酒类); result.push(日常用品); result.push(娱乐类); result.push(设备类); return result; } private function displayGold1(data:Object, field:String, index:Number, percentValue:Number):String { var temp:String= (" " + percentValue).substr(0,6); return data.Operator_Name + ": " + '/n' + " 销售额: ¥" + data.AllTotal + '元/n' + temp + "%"; } private function displayGold2(data:Object, field:String, index:Number, percentValue:Number):String { var temp:String= (" " + percentValue).substr(0,6); return data.type + ": " + '/n' + " 销售额: ¥" + data.amount + '元/n' + temp + "%"; } ]]--></mx:Script> <mx:SeriesSlide id="slideIn" duration="1000" direction="down"/> <mx:SeriesSlide id="slideOut" duration="1000" direction="up"/> <mx:Panel status="ColumnChart(柱图)-PieChart(饼图)-DataGrid(网格)联动 CSSFLEX.com" layout="absolute" headerHeight="35" id="mainPanel" title=" 销售员业绩" fontSize="11" width="780" height="550"> <mx:ColumnChart id="chart0" showDataTips="true" itemClick="zoomIntoSeries(event)" dataProvider="{mainDataProvider}" fontSize="11" left="5" top="5" bottom="2" width="427"> <mx:series> <mx:ColumnSeries id="columnSeries" displayName="Total AllTotal" yField="AllTotal" xField="Operator_Name" hideDataEffect="slideOut" showDataEffect="slideIn"> <mx:fill> <mx:LinearGradient id="linearGradient"> <mx:entries> <mx:Array> <mx:GradientEntry color="0x99ff00" ratio="0.0" alpha="1.0" /> <mx:GradientEntry color="0x003300" ratio="1.0" alpha="1.0" /> </mx:Array> </mx:entries> </mx:LinearGradient> </mx:fill> </mx:ColumnSeries> </mx:series> <mx:horizontalAxis> <mx:CategoryAxis id="ca1" categoryField="Operator_Name"/> </mx:horizontalAxis> </mx:ColumnChart> <mx:PieChart id="chart1" color="0x323232" fontSize="11" showDataTips="true" dataProvider="{mainDataProvider}" itemClick="zoomIntoSeries(event)" width="325" height="280" y="225" x="435"> <mx:series> <mx:PieSeries id="ca2" labelPosition="callout" field="AllTotal" labelFunction="displayGold1"> <mx:calloutStroke> <mx:Stroke weight="0" color="0x888888" alpha="1.0"/> </mx:calloutStroke> <mx:radialStroke> <mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/> </mx:radialStroke> <mx:stroke> <mx:Stroke color="0" alpha="0.20" weight="2"/> </mx:stroke> </mx:PieSeries> </mx:series> </mx:PieChart> <mx:DataGrid id="dg" dataProvider="{mainDataProvider}" top="5" width="330" height="220" rowCount="10" x="435" > <mx:columns> <mx:DataGridColumn id="ca3" headerText=" 销售员" dataField="Operator_Name" width="100" textAlign="center"/> <mx:DataGridColumn id="ca4" headerText=" 消费金额" dataField="AllTotal" paddingRight="20" textAlign="right" /> </mx:columns> </mx:DataGrid> </mx:Panel></mx:Application>