Flex拖拽形成柱状图

<?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>