微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐