加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Flex3 DataGrid拖拽到ClumnChart动态显示图表

发布时间：2020-12-15 04:29:28 所属栏目：百科 来源：网络整理
导读：分类：?Web前端 2013-01-27 16:43 ? 10053人阅读 ? 评论(1) ? 收藏 ? 举报 支持多行同时拖拽，重复数据不重得添加，添加了图表右键菜单.? [html] ? view plain copy ? xml ? version = "1.0" ? encoding = "utf-8" ? ?? mx:Application ? xmlns:mx = "http:/
分类：?Web前端 2013-01-27 16:43? 10053人阅读? 评论(1)? 收藏? 举报

支持多行同时拖拽，重复数据不重得添加，添加了图表右键菜单.?

[html]? view plain copy
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute"?creationComplete="init()">??
  3. mx:Script>??
  4. ????<![CDATA[?
  5. ????????import?mx.controls.Alert;?
  6. ????????import?mx.controls.DataGrid;?
  7. ????????import?mx.managers.DragManager;?
  8. ????????import?mx.core.UIComponent;?
  9. ????????import?mx.collections.ArrayCollection;?
  10. ????????import?mx.events.DragEvent;?
  11. ?????????
  12. ????????//DataGrid的数据源?
  13. ?????[Bindable]?
  14. ?????private?var?medalsAC:ArrayCollection?=?new?ArrayCollection(?[?
  15. ?????????{?Country:?"美国",?Gold:?35,?Silver:39,?Bronze:?29?},?
  16. ?????????{?Country:?"中国",?Gold:?99,?Silver:17,?Bronze:?14?},?
  17. ?????????{?Country:?"日本",?Gold:?32,?Silver:27,?Bronze:?38?},147); background-color:inherit">?????????{?Country:?"韩国",?Gold:?27,?Bronze:?2?},147); background-color:inherit">?????????{?Country:?"新加坡",?Gold:?55,?Bronze:?63?},147); background-color:inherit">?????????{?Country:?"朝鲜",?Gold:?11,?Silver:21,?Bronze:?16?},147); background-color:inherit">?????????{?Country:?"马来西亚",?Gold:?7,?Silver:14,?Bronze:?77?},147); background-color:inherit">??????????{?Country:?"澳洲",?Gold:?0,?Silver:12,?Bronze:?11?}??
  18. ??????????]);?
  19. ???????
  20. ?????//ColumnChart的数据源,?默认为空???
  21. ?????[Bindable]?
  22. ?????private?var?chartData:ArrayCollection?=?new?ArrayCollection();?
  23. ???????[Bindable]?
  24. ???????private?var?menu:ContextMenu?=?new?ContextMenu();?????
  25. ??????//让columnChart监听拖拽事件??
  26. ?????private?function?init():void{?
  27. ?????????column.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandle);?
  28. ?????????column.addEventListener(DragEvent.DRAG_DROP,dragdropHandle);?
  29. ?????????//初始化右键菜单?
  30. ?????????initMenu();?
  31. ?????}?
  32. ??????//初始化chart右键菜单?
  33. ??????private?function?initMenu():void?????
  34. ??????{?
  35. ??????????var?clear:ContextMenuItem?=?new?ContextMenuItem("清空图表");??
  36. ??????????menu.customItems.push(clear);?
  37. ??????????clear.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,clearAction);?
  38. ??????}?????
  39. ??????//处理鼠标右键事件?
  40. ??????private?function?clearAction(event:ContextMenuEvent):void?
  41. ??????{?
  42. ??????????this.chartData.removeAll();?
  43. ??????}?
  44. ???????
  45. ?????//因为只有DataGrid推拽，所以直接允许，如果界面上有多个控件监听拖拽事件，需要判断后允许正确的数据进入?
  46. ?????private?function?dragEnterHandle(e:DragEvent):void{?
  47. ?????????DragManager.acceptDragDrop(e.currentTarget?as?UIComponent)?
  48. ?????}?
  49. ???
  50. ?????//拖拽放开后处理?
  51. ?????private?function?dragdropHandle(e:DragEvent):void{?
  52. ?????????//往column?chart的dataprovider中添加拖拽数据。?
  53. ?????????//如果只需要特定的数据进入column?chart，可以先做数据筛选。?
  54. ?????????var?datas:?Array?=??(e.dragInitiator?as?DataGrid).selectedItems;?
  55. ?????????for(var?i:int?=?0;?i?<?datas.length;?i?++)?
  56. ?????????{?
  57. ?????????????//不包含已经存在的数据再添加?
  58. ?????????????if(!chartData.contains(datas[i]))?
  59. ?????????????{?
  60. ?????????????????chartData.addItem(datas[i]);?
  61. ?????????????}?
  62. ?????????}?
  63. ??????????
  64. ?????????
  65. ????]]>??
  66. </ ??
  67. ????mx:DataGrid?dragEnabled="true"?dataProvider="{medalsAC}"??x="192"?y="52"?allowMultipleSelection="true" ????????mx:columns ????????????mx:DataGridColumn?dataField="Country"?headerText="国家"??/>??
  68. ????????????mx:DataGridColumn?dataField="Gold"?headerText="金牌"/>??
  69. mx:DataGridColumn?dataField="Silver"?headerText="银牌"mx:DataGridColumn?dataField="Bronze"?headerText="铜牌" ???????? ????mx:DataGrid ??????
  70. ?????<!--?定义颜色?-->??
  71. mx:SolidColor?id="sc1"?color="yellow"?alpha=".8"mx:SolidColor?id="sc2"?color="0xCCCCCC"?alpha=".6"mx:SolidColor?id="sc3"?color="0xFFCC66"?alpha=".6" ??????
  72. ????<!--?定义颜色?-->??
  73. 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",?Bronze:?38这样的数据项-->??
  74. mx:ColumnChart?id="column"?contextMenu="{menu}"??
  75. ????????????height="202"???
  76. ????????????width="402"???
  77. ????????????paddingLeft="5"???
  78. ????????????paddingRight="5"???
  79. ????????????showDataTips="true"???
  80. ????????????dataProvider="{chartData}"??
  81. ?????????x="192"?y="215">???????
  82. ????????????????
  83. ??????????????<!--设置水平轴-->??
  84. mx:horizontalAxis ????????????<!--水平轴拖动数据到chart后的文字显示-->??
  85. ????????????????mx:CategoryAxis?categoryField="Country"? ????????????<!--设置柱子-->??
  86. <!--fill填充颜色,stroke边框颜色-->??
  87. mx:series ????????????????mx:ColumnSeries???
  88. ????????????????????xField="Country"???
  89. ????????????????????yField="Gold"???
  90. ????????????????????displayName="金牌"??
  91. ????????????????????fill="{sc1}"????
  92. ????????????????????stroke="{s1}"???
  93. mx:ColumnSeries???
  94. ????????????????????xField="Country"???
  95. ????????????????????yField="Silver"???
  96. ????????????????????displayName="银牌"??
  97. ????????????????????fill="{sc2}"??
  98. ????????????????????stroke="{s2}"??
  99. ????????????????????yField="Bronze"???
  100. ????????????????????displayName="铜牌"??
  101. ????????????????????fill="{sc3}"??
  102. ????????????????????stroke="{s3}"??
  103. mx:ColumnChart ??
  104. mx:Application>??

源码下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同