Flex拖拽形成柱状图

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" layout="vertical" creationComplete="init()"> <mx:Script>     <![CDATA[         import mx.controls.Alert;         import mx.controls.DataGrid;         import mx.events.DragEvent;         import mx.core.UIComponent;         import mx.managers.DragManager;         import mx.core.DragSource;         import mx.collections.ArrayCollection;                  //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)         }                                    ]]> </mx:Script> <!--允许Grid拖拽数据--> <mx:DataGrid dragEnabled="true" dataProvider="{medalsAC}" > <mx:columns>          <mx:DataGridColumn datafield="Country" />     <mx:DataGridColumn datafield="Gold" />     <mx:DataGridColumn datafield="Silver" />     <mx:DataGridColumn datafield="bronze" />          </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",bronze: 38这样的数据项--> <mx:ColumnChart id="column"             height="200"             width="300"             paddingLeft="5"             paddingRight="5"             showdatatips="true"             dataProvider="{chartData}"         >                             <mx:horizontalAxis>                 <mx:CategoryAxis categoryField="Country"/>             </mx:horizontalAxis>             <mx:series>                 <mx:ColumnSeries                     xField="Country"                     yField="Gold"                     displayName="Gold"                     fill="{sc1}"                     stroke="{s1}"                 />                 <mx:ColumnSeries                     xField="Country"                     yField="Silver"                     displayName="Silver"                     fill="{sc2}"                     stroke="{s2}"                 />                 <mx:ColumnSeries                     xField="Country"                     yField="bronze"                     displayName="bronze"                     fill="{sc3}"                     stroke="{s3}"                 />             </mx:series>         </mx:ColumnChart>      </mx:Application>

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...