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

Posted by Kevin Luo at 5 January 2009

Category: Flex 迷你教程

Tags:

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

Demo操作:

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

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

主要代码

?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 (980)

9 Comments

  1. hugo says

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

    Reply

  2. Kevin Luo says

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

    Reply

  3. Online poker says

    Oh, its great!

    Reply

  4. youyou says

    真好,谢谢

    Reply

  5. smallen says

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

    Reply

  6. Leyond says

    thanks, helpful

    Reply

  7. ww says

    thanks

    Reply

  8. Viking says

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

    Reply

  9. caoyanhua says

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

    Reply

Leave a Reply

Leave a Reply
  • (required)
  • (required) (will not be published)