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