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

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script><![CDATA[import mx.controls.Alert;import mx.controls.DataGrid;import mx.managers.DragManager;import mx.core.UIComponent;import mx.collections.ArrayCollection;import mx.events.DragEvent;//DataGrid的数据源[Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [{ Country: "美国", Gold: 35, Silver:39, Bronze: 29 },{ Country: "中国", Gold: 99, Silver:17, Bronze: 14 },{ Country: "日本", Gold: 32, Silver:27, Bronze: 38 },{ Country: "韩国", Gold: 27, Silver:27, Bronze: 2 },{ Country: "新加坡", Gold: 55, Silver:27, Bronze: 63 },{ Country: "朝鲜", Gold: 11, Silver:21, Bronze: 16 },{ Country: "马来西亚", Gold: 7, Silver:14, Bronze: 77 },{ Country: "澳洲", Gold: 0, Silver:12, Bronze: 11 } ]);//ColumnChart的数据源, 默认为空  [Bindable]private var chartData:ArrayCollection = new ArrayCollection();[Bindable]private var menu:ContextMenu = new ContextMenu();    //让columnChart监听拖拽事件 private function init():void{column.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandle);column.addEventListener(DragEvent.DRAG_DROP,dragdropHandle);//初始化右键菜单initMenu();}//初始化chart右键菜单private function initMenu():void    {var clear:ContextMenuItem = new ContextMenuItem("清空图表"); menu.customItems.push(clear);clear.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,clearAction);}    //处理鼠标右键事件private function clearAction(event:ContextMenuEvent):void{this.chartData.removeAll();}//因为只有DataGrid推拽，所以直接允许，如果界面上有多个控件监听拖拽事件，需要判断后允许正确的数据进入private function dragEnterHandle(e:DragEvent):void{DragManager.acceptDragDrop(e.currentTarget as UIComponent)}//拖拽放开后处理private function dragdropHandle(e:DragEvent):void{//往column chart的dataprovider中添加拖拽数据。//如果只需要特定的数据进入column chart，可以先做数据筛选。var datas: Array =  (e.dragInitiator as DataGrid).selectedItems;for(var i:int = 0; i < datas.length; i ++){//不包含已经存在的数据再添加if(!chartData.contains(datas[i])){chartData.addItem(datas[i]);}}}]]>
</mx:Script><mx:DataGrid dragEnabled="true" dataProvider="{medalsAC}"  x="192" y="52" allowMultipleSelection="true"><mx:columns><mx:DataGridColumn dataField="Country" headerText="国家"  /><mx:DataGridColumn dataField="Gold" headerText="金牌"/><mx:DataGridColumn dataField="Silver" headerText="银牌"/><mx:DataGridColumn dataField="Bronze" headerText="铜牌"/></mx:columns></mx:DataGrid><!-- 定义颜色 --><mx:SolidColor id="sc1" color="yellow" alpha=".8"/><mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/><mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/><!-- 定义颜色 --><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", Gold: 27, Silver:27, Bronze: 38这样的数据项--><mx:ColumnChart id="column" contextMenu="{menu}"height="202" width="402" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{chartData}"x="192" y="215">     <!--设置水平轴--><mx:horizontalAxis><!--水平轴拖动数据到chart后的文字显示--><mx:CategoryAxis categoryField="Country" /></mx:horizontalAxis><!--设置柱子--><!--fill填充颜色,stroke边框颜色--><mx:series><mx:ColumnSeries xField="Country" yField="Gold" displayName="金牌"fill="{sc1}"  stroke="{s1}" /><mx:ColumnSeries xField="Country" yField="Silver" displayName="银牌"fill="{sc2}"stroke="{s2}"/><mx:ColumnSeries xField="Country" yField="Bronze" displayName="铜牌"fill="{sc3}"stroke="{s3}"/></mx:series></mx:ColumnChart></mx:Application>

源码下载

Flex3 DataGrid拖拽到ClumnChart动态显示图表相关推荐

tkinter的可视化拖拽工具_拒绝丑图表，教你用最简单的方法做最炫酷的可视化图表！附教程...
数据可视化在我们的工作和生活中应用的越来越多,不管是在各种年度季度总结报告中,还是专业的数据分析报告中,我们经常要利用可视化图表来展现分析数据,一个高端大气的可视化图表就能给我们报告加分不少. 以前企 ...
tkinter的可视化拖拽工具_可视化越做越丑？这五个高级图表效果实现流程分享给你...
今天我们来说一说数据可视化,想必很多人在入门数据分析之后,就会经常进行可视化的工作,所谓一图胜千言,图表用的好,真的是会事半功倍的.但现实情况下,很多人遇到的问题是: 你做的图表太丑了?你做的图表到底 ...
vue可视化拖拽生成工具_一款可拖拽的WEB表单设计布局器-(echarts-vue-jquery-可视化图表)...
背景现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量还有一些场景:用户可以自由定制图表工具,通 ...
highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表实现例子基于vue来实现,如果是j ...
低代码可视化报表开源工具，只要在线拖拽就能做出复杂数据报表
平时苦于做报表的小伙伴们,今天TJ君给你们带来一个开源低代码可视化报表项目,JimuReport,来解决你们的报表难题! JimuReport,作为一个报表项目,它拥有类似excel的操作风格,简简单 ...
react 拖拽连接插件_一款精美的 react 后台管理系统
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.这么好的react开源项目,值得珍藏了! 项目依赖模块项目是用create-react-app创建的,依赖包如下: react(是一个用于构建用户界面 ...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮前言之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP) ...
JimuReport 1.3.7 首个正式版本发布，免费的可视化拖拽报表
项目介绍积木报表,一款免费的可视化Web报表工具,像搭建积木一样在线拖拽设计!功能涵盖,数据报表.打印设计.图表报表.大屏设计等! 秉承"简单.易用.专业"的产品理念,极大的降低 ...
HTML5 -canvas拖拽、移动绘制图片可操作移动，拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...

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

Flex3 DataGrid拖拽到ClumnChart动态显示图表相关推荐

最新文章

热门文章