ColumnChart-PieChart-DataGrid联动

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