flex拖拽DataGrid行数据显示到chart中的效果例子

如何把 dataGrid的数据拖拽到column chart中显示哪？其实很简单，道理就是把dataGrid拖拽的项的data添加到column chart的dataProvider中去。当然这要求column chart能认识dataGrid的这项数据。下面的例子是 DataGrid与cloumn chart解析的都是相同构造的数据源，扩展开来的话可以把dataGrid中的某几项拿出来构造新的数据项传给column chart。其他的chart道理也是一样。 1、运行效果如下图

 

 

 

2、操作方法
随意拖拽grid中的某一项到下面的column chart，放手，column chart显示拄状图.
相同数据不能重复添加。

 

<?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", Gold: 27, Silver:27, 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>