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

Posted by Kevin Luo at 5 January 2009

看到论坛中有朋友发贴问如何把 dataGrid的数据拖拽到column chart中显示，搜了一下好像还没有类似的答案，于是写做教程，其实很简单，道理就是把dataGrid拖拽的项的data添加到column chart的dataProvider中去。当然这要求column chart能认识dataGrid的这项数据。我的例子是 DataGrid与cloumn chart解析的都是相同构造的数据源，扩展开来的话可以把dataGrid中的某几项拿出来构造新的数据项传给column chart。其他的chart道理也是一样。

Demo操作：

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

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

主要代码

^?View Code ACTIONSCRIPT3

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

效果:

源文件下载

GridDragToChartDemo (1271)

11 Comments

hugo says (9.01.2009 at 10:51 AM):

怎么源码下载不了啊。。。能给我一份吗？发到我邮箱可以吗？

Reply
Kevin Luo says (9.01.2009 at 11:04 AM):

谢谢提醒，改了目录位置忘了跟新链接，现在好了

Reply
Online poker says (2.02.2009 at 8:09 AM):

Oh, its great!

Reply
youyou says (2.02.2009 at 4:56 PM):

真好，谢谢

Reply
smallen says (16.03.2009 at 2:22 PM):

无数据时,0边上的那个很短的白线没法去掉噢?

Reply
Leyond says (25.04.2009 at 12:40 AM):

thanks, helpful

Reply
ww says (30.04.2009 at 5:22 PM):

thanks

Reply
Viking says (22.09.2009 at 3:35 PM):

使命的下载…….谢谢楼主的好东西…..学习了….

Reply
caoyanhua says (16.12.2009 at 6:46 PM):

你好,我也是源码下载不了…
可以发份到我邮箱里吗.. 谢谢 ..

Reply
Jason says (2.05.2010 at 10:29 PM):

Great!

Reply
lv says (13.07.2010 at 9:57 AM):

Louis Vuitton
Gucci Shoes
Hermes Handbags
christian louboutin
nike shoes
replica bags
Louis Vuitton
Cheap gucci shoes
wholesale gucci shoes
louis vuitton
herve leger
Rolex Watches
Omega Watches
louis vuitton multicolore
louis vuitton vernis

Reply