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

Flex #datagrid #clumnchart #拖拽2014-04-10 09:32
以下代码支持多行同时拖拽，重复数据不重得添加，添加了图表右键菜单等等。
01<?xml version="1.0" encoding="utf-8" ?>
02<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
03creationComplete="init()">
04    <mx:Script>
05        <![CDATA[ import mx.controls.Alert; import mx.controls.DataGrid; import
06        mx.managers.DragManager; import mx.core.UIComponent; import mx.collections.ArrayCollection;
07        import mx.events.DragEvent; //DataGrid的数据源 [Bindable] private var medalsAC:ArrayCollection=n
08        ew ArrayCollection( [ { Country: "美国", Gold: 35, Silver:39, Bronze: 29
09        }, { Country: "中国", Gold: 99, Silver:17, Bronze: 14 }, { Country: "日本",
10        Gold: 32, Silver:27, Bronze: 38 }, { Country: "韩国", Gold: 27, Silver:27,
11        Bronze: 2 }, { Country: "新加坡", Gold: 55, Silver:27, Bronze: 63 }, { Country:
12        "朝鲜", Gold: 11, Silver:21, Bronze: 16 }, { Country: "马来西亚", Gold: 7, Silver:14,
13        Bronze: 77 }, { Country: "澳洲", Gold: 0, Silver:12, Bronze: 11 } ]); //ColumnChart的数据源,
14        默认为空 [Bindable] private var chartData:ArrayCollection=n ew ArrayCollection();
15        [Bindable] private var menu:ContextMenu=n ew ContextMenu(); //让columnChart监听拖拽事件
16        private function init():void{ column.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandle);
17        column.addEventListener(DragEvent.DRAG_DROP,dragdropHandle); //初始化右键菜单
18        initMenu(); } //初始化chart右键菜单 private function initMenu():void { var clear:ContextMenuItem=n
19        ew ContextMenuItem("清空图表"); menu.customItems.push(clear); clear.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,clearAction);
20        } //处理鼠标右键事件 private function clearAction(event:ContextMenuEvent):void
21        { this.chartData.removeAll(); } //因为只有DataGrid推拽，所以直接允许，如果界面上有多个控件监听拖拽事件，需要判断后允许正确的数据进入
22        private function dragEnterHandle(e:DragEvent):void{ DragManager.acceptDragDrop(e.currentTarget
23        as UIComponent) } //拖拽放开后处理 private function dragdropHandle(e:DragEvent):void{
24        //往column chart的dataprovider中添加拖拽数据。 //如果只需要特定的数据进入column chart，可以先做数据筛选。
25        var datas: Array=( e.dragInitiator as DataGrid).selectedItems; for(var
26        i:int=0 ; i < datas.length; i ++) { //不包含已经存在的数据再添加 if(!chartData.contains(datas[i]))
27        { chartData.addItem(datas[i]); } } } ]]>
28    </mx:Script>
29    <mx:DataGrid dragEnabled="true" dataProvider="{medalsAC}" x="192" y="52"
30    allowMultipleSelection="true">
31        <mx:columns>
32            <mx:DataGridColumn dataField="Country" headerText="国家" />
33            <mx:DataGridColumn dataField="Gold" headerText="金牌" />
34            <mx:DataGridColumn dataField="Silver" headerText="银牌" />
35            <mx:DataGridColumn dataField="Bronze" headerText="铜牌" />
36        </mx:columns>
37    </mx:DataGrid>
38    <!-- 定义颜色 -->
39    <mx:SolidColor id="sc1" color="yellow" alpha=".8" />
40    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6" />
41    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6" />
42    <!-- 定义颜色 -->
43    <mx:Stroke id="s1" color="yellow" weight="2" />
44    <mx:Stroke id="s2" color="0xCCCCCC" weight="2" />
45    <mx:Stroke id="s3" color="0xFFCC66" weight="2" />
46    <!--Column chart设置成能解析Country: "Russia", Gold: 27, Silver:27, Bronze:
47    38这样的数据项-->
48    <mx:ColumnChart id="column" contextMenu="{menu}" height="202" width="402"
49    paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{chartData}"
50    x="192" y="215">
51        <!--设置水平轴-->
52        <mx:horizontalAxis>
53            <!--水平轴拖动数据到chart后的文字显示-->
54            <mx:CategoryAxis categoryField="Country" />
55        </mx:horizontalAxis>
56        <!--设置柱子-->
57        <!--fill填充颜色,stroke边框颜色 http://yige.org/-->
58        <mx:series>
59            <mx:ColumnSeries xField="Country" yField="Gold" displayName="金牌" fill="{sc1}"
60            stroke="{s1}" />
61            <mx:ColumnSeries xField="Country" yField="Silver" displayName="银牌" fill="{sc2}"
62            stroke="{s2}" />
63            <mx:ColumnSeries xField="Country" yField="Bronze" displayName="铜牌" fill="{sc3}"
64            stroke="{s3}" />
65        </mx:series>
66    </mx:ColumnChart>
67</mx:Application>
Flex DataGrid表头过滤搜索解决方法 2014/04/01
Flex3 DataGrid拖拽到ClumnChart动态显示图表

相关文章
