Flex 迷你教程 — DataGrid, 拖拽数据到chart中显示

Demo操作：

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

代码里注释已经很清楚了，直接看就能明白

主要代码

 //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)
     }


效果:

原文：http://www.flextheworld.com/2009/01/flex-datagrid-drag-chart.html