1、问题描述

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

2、演示实例

[plain] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
5.                width="100%" height="100%"   
6.                creationComplete="initHandler(event)"  
7.                fontFamily="微软雅黑" fontSize="12">  
8.     <s:layout>  
9.         <s:BasicLayout/>  
10.     </s:layout>  
11.     <fx:Script>  
12.         <![CDATA[  
13.             import mx.collections.ArrayCollection;  
14.             import mx.controls.Alert;  
15.             import mx.events.FlexEvent;  
16.             import mx.events.ItemClickEvent;  
17.               
18.             [Bindable]  
19.             //图的数据绑定  
20.             private var chartArray:ArrayCollection = new ArrayCollection([  
21.                 {week:"星期一",month:"一月",person:"8989",rate:"56"},  
22.                 {week:"星期二",month:"二月",person:"5675",rate:"43"},  
23.                 {week:"星期三",month:"三月",person:"7234",rate:"12"},  
24.                 {week:"星期四",month:"四月",person:"3456",rate:"76"},  
25.                 {week:"星期五",month:"五月",person:"6355",rate:"49"},  
26.                 {week:"星期六",month:"六月",person:"4356",rate:"32"},  
27.                 {week:"星期日",month:"七月",person:"9087",rate:"87"}  
28.             ]);  
29.   
30.             /**  
31.              * 初始化函数  
32.              */  
33.             protected function initHandler(event:FlexEvent):void  
34.             {  
35.                   
36.             }  
37.   
38.             /**  
39.              * 查询按钮函数  
40.              */  
41.             protected function search_clickHandler(event:MouseEvent):void  
42.             {  
43.                   
44.             }  
45.   
46.             /**  
47.              * 单选按钮切换函数  
48.              */  
49.             protected function radiogroup_itemClickHandler(event:ItemClickEvent):void  
50.             {  
51.                 if(event.currentTarget.selectedValuehttp://www.mamicode.com/=="周")  
52.                 {  
53.                     dataX.categoryField = "week";  
54.                     dataX.displayName = "周";  
55.                     date.xField = "week";  
56.                     date.yField = "person";  
57.                     date.displayName = "人数";  
58.                 }  
59.                 else if(event.currentTarget.selectedValuehttp://www.mamicode.com/=="月")  
60.                 {  
61.                     dataX.categoryField = "month";  
62.                     dataX.displayName = "月";  
63.                     date.xField = "month";  
64.                     date.yField = "rate";  
65.                     date.displayName = "比率";  
66.                 }  
67.             }  
68.   
69.         ]]>  
70.     </fx:Script>  
71.     <fx:Declarations>  
72.         <s:RadioButtonGroup id="radiogroup" itemClick="radiogroup_itemClickHandler(event)"/>  
73.     </fx:Declarations>  
74.       
75.     <s:VGroup width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="20"  
76.               paddingTop="10" horizontalAlign="center">  
77.         <s:HGroup width="100%" height="30" paddingLeft="10" verticalAlign="middle">  
78.             <s:Label text="日期类型："/>  
79.             <s:Label width="20"/>  
80.             <s:RadioButton label="周" groupName="radiogroup" value="http://www.mamicode.com/周" selected="true"/>  
81.             <s:Label width="20"/>  
82.             <s:RadioButton label="月" groupName="radiogroup" value="http://www.mamicode.com/月"/>  
83.             <s:Label width="60"/>  
84.             <s:Button label="查询" id="search" click="search_clickHandler(event)"/>  
85.         </s:HGroup>  
86.         <mx:ColumnChart id="column" dataProvider="{chartArray}" width="100%" height="80%" columnWidthRatio="0.4"  
87.                         showDataTips="true">  
88.             <mx:horizontalAxis>  
89.                 <mx:CategoryAxis id="dataX" categoryField="week" displayName="周"/>  
90.             </mx:horizontalAxis>  
91.               
92.             <mx:series>  
93.                 <mx:ColumnSeries displayName="人数" id="date" xField="week" yField="person"/>  
94.             </mx:series>  
95.         </mx:ColumnChart>  
96.         <mx:Legend dataProvider="{column}"/>  
97.           
98.     </s:VGroup>  
99.       
100. </s:Application>  

3、实例结果

（1）初始化时

（2）选择“月”

Flex中利用单选按钮切换柱状图横纵坐标以及描述