Flex3 DataGrid拖拽到ClumnChart动态显示图表实现代码

<?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.51sjk.com/Upload/Articles/1/0/245/245964_20210619000201800.jpg" 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>