<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" layout="vertical" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.DataGrid; import mx.events.DragEvent; import mx.core.UIComponent; import mx.managers.DragManager; import mx.core.DragSource; import mx.collections.ArrayCollection; //DataGrid的数据源 [Bindable] private var medalsAC:ArrayCollection = new ArrayCollection( [ { Country: "USA",Gold: 35,Silver:39,bronze: 29 }, { Country: "China",Gold: 32,Silver:17,bronze: 14 }, { Country: "Russia",Gold: 27,Silver:27,bronze: 38 } ]); //ColumnChart的数据源,默认为空 [Bindable] private var chartData:ArrayCollection = new ArrayCollection() private function init():void{ //让columnChart监听拖拽事件 column.addEventListener(DragEvent.DRAG_ENTER,dragenterHandle) column.addEventListener(DragEvent.DRAG_DROP,dragdropHandle) } //因为只有DataGrid推拽,所以直接允许,如果界面上有多个控件监听拖拽事件,需要判断后允许正确的数据进入 private function dragenterHandle(e:DragEvent):void{ DragManager.acceptDragDrop(e.currentTarget as UIComponent) } //拖拽放开后处理 private function dragdropHandle(e:DragEvent):void{ //如果Column Chart中已经存在相同数据,报错返回 if(chartData.contains((e.dragInitiator as DataGrid).selectedItem)){ Alert.show("数据已经存在"); return; } //往column chart的dataprovider中添加拖拽数据。 //如果只需要特定的数据进入column chart,可以先做数据筛选。 chartData.addItem((e.dragInitiator as DataGrid).selectedItem) } ]]> </mx:Script> <!--允许Grid拖拽数据--> <mx:DataGrid dragEnabled="true" dataProvider="{medalsAC}" > <mx:columns> <mx:DataGridColumn datafield="Country" /> <mx:DataGridColumn datafield="Gold" /> <mx:DataGridColumn datafield="Silver" /> <mx:DataGridColumn datafield="bronze" /> </mx:columns> </mx:DataGrid> <!-- 定义颜色 --> <mx:SolidColor id="sc1" color="yellow" alpha=".8"/> <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/> <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/> <!-- 定义颜色 --> <mx:stroke id="s1" color="yellow" weight="2"/> <mx:stroke id="s2" color="0xCCCCCC" weight="2"/> <mx:stroke id="s3" color="0xFFCC66" weight="2"/> <!--Column chart设置成能解析Country: "Russia",bronze: 38这样的数据项--> <mx:ColumnChart id="column" height="200" width="300" paddingLeft="5" paddingRight="5" showdatatips="true" dataProvider="{chartData}" > <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" /> <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" /> <mx:ColumnSeries xField="Country" yField="bronze" displayName="bronze" fill="{sc3}" stroke="{s3}" /> </mx:series> </mx:ColumnChart> </mx:Application>