博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Flex在使用无线电的button切换直方图横坐标和叙述性说明
阅读量:5272 次
发布时间:2019-06-14

本文共 2779 字,大约阅读时间需要 9 分钟。

1、问题叙述性说明

      一组单选button,有周和月之分,选择“周”,柱状图横坐标显示的是周,纵坐标显示的是人数;选择“月”,柱状图横坐标显示的月,纵坐标显示的是比率。

2、演示实例

xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="initHandler(event)" fontFamily="微软雅黑" fontSize="12"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.FlexEvent; import mx.events.ItemClickEvent; [Bindable] //图的数据绑定 private var chartArray:ArrayCollection = new ArrayCollection([ {week:"星期一",month:"一月",person:"8989",rate:"56"}, {week:"星期二",month:"二月",person:"5675",rate:"43"}, {week:"星期三",month:"三月",person:"7234",rate:"12"}, {week:"星期四",month:"四月",person:"3456",rate:"76"}, {week:"星期五",month:"五月",person:"6355",rate:"49"}, {week:"星期六",month:"六月",person:"4356",rate:"32"}, {week:"星期日",month:"七月",person:"9087",rate:"87"} ]); /** * 初始化函数 */ protected function initHandler(event:FlexEvent):void { } /** * 查询button函数 */ protected function search_clickHandler(event:MouseEvent):void { } /** * 单选button切换函数 */ protected function radiogroup_itemClickHandler(event:ItemClickEvent):void { if(event.currentTarget.selectedValue=="周") { dataX.categoryField = "week"; dataX.displayName = "周"; date.xField = "week"; date.yField = "person"; date.displayName = "人数"; } else if(event.currentTarget.selectedValue=="月") { dataX.categoryField = "month"; dataX.displayName = "月"; date.xField = "month"; date.yField = "rate"; date.displayName = "比率"; } } ]]> </fx:Script> <fx:Declarations> <s:RadioButtonGroup id="radiogroup" itemClick="radiogroup_itemClickHandler(event)"/> </fx:Declarations> <s:VGroup width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="20" paddingTop="10" horizontalAlign="center"> <s:HGroup width="100%" height="30" paddingLeft="10" verticalAlign="middle"> <s:Label text="日期类型:"/> <s:Label width="20"/> <s:RadioButton label="周" groupName="radiogroup" value="周" selected="true"/> <s:Label width="20"/> <s:RadioButton label="月" groupName="radiogroup" value="月"/> <s:Label width="60"/> <s:Button label="查询" id="search" click="search_clickHandler(event)"/> </s:HGroup> <mx:ColumnChart id="column" dataProvider="{chartArray}" width="100%" height="80%" columnWidthRatio="0.4" showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis id="dataX" categoryField="week" displayName="周"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries displayName="人数" id="date" xField="week" yField="person"/> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{column}"/> </s:VGroup> </s:Application>

3、实例结果

(1)初始化时

(2)选择“月”

版权声明:本文博主原创文章。博客,未经同意不得转载。

转载于:https://www.cnblogs.com/mengfanrong/p/4823904.html

你可能感兴趣的文章
ios
查看>>
APPIUM API整理(python)---操作类
查看>>
可能是把Java内存区域讲的最清楚的一篇文章
查看>>
Oracle函数使用
查看>>
hive基本操作与应用
查看>>
common-fileupload上传文件
查看>>
第 6 天 python的类
查看>>
EularProject 32: 数字1-9排列构成乘法等式
查看>>
1079. Total Sales of Supply Chain (25)
查看>>
ThinkPHP 文件上传处理
查看>>
【转】移动前端手机输入法自带emoji表情字符处理
查看>>
5分钟了解swagger
查看>>
美赛论文写作--写作规范
查看>>
获取当前用户
查看>>
Mysql BLOB、BLOB与TEXT区别及性能影响、将BLOB类型转换成VARCHAR类型
查看>>
C运行时库
查看>>
使用sed进行文字替换
查看>>
20155228 2016-2017-2《Java程序设计》课程总结
查看>>
日志框架实现实时改动,实时生效,详细框架思路(5)
查看>>
注册---测试用例
查看>>