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

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. [Bindable]
18. //图的数据绑定
19. private var chartArray:ArrayCollection = new ArrayCollection([
20. {week:"星期一",month:"一月",person:"8989",rate:"56"},
21. {week:"星期二",month:"二月",person:"5675",rate:"43"},
22. {week:"星期三",month:"三月",person:"7234",rate:"12"},
23. {week:"星期四",month:"四月",person:"3456",rate:"76"},
24. {week:"星期五",month:"五月",person:"6355",rate:"49"},
25. {week:"星期六",month:"六月",person:"4356",rate:"32"},
26. {week:"星期日",month:"七月",person:"9087",rate:"87"}
27. ]);
28. /**
29. * 初始化函数
30. */
31. protected function initHandler(event:FlexEvent):void
32. {
33. }
34. /**
35. * 查询按钮函数
36. */
37. protected function search_clickHandler(event:MouseEvent):void
38. {
39. }
40. /**
41. * 单选按钮切换函数
42. */
43. protected function radiogroup_itemClickHandler(event:ItemClickEvent):void
44. {
45. if(event.currentTarget.selectedValue=="周")
46. {
47. dataX.categoryField = "week";
48. dataX.displayName = "周";
49. date.xField = "week";
50. date.yField = "person";
51. date.displayName = "人数";
52. }
53. else if(event.currentTarget.selectedValue=="月")
54. {
55. dataX.categoryField = "month";
56. dataX.displayName = "月";
57. date.xField = "month";
58. date.yField = "rate";
59. date.displayName = "比率";
60. }
61. }
62. ]]>
63. </fx:Script>
64. <fx:Declarations>
65. <s:RadioButtonGroup id="radiogroup" itemClick="radiogroup_itemClickHandler(event)"/>
66. </fx:Declarations>
67. <s:VGroup width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="20"
68. paddingTop="10" horizontalAlign="center">
69. <s:HGroup width="100%" height="30" paddingLeft="10" verticalAlign="middle">
70. <s:Label text="日期类型："/>
71. <s:Label width="20"/>
72. <s:RadioButton label="周" groupName="radiogroup" value="周" selected="true"/>
73. <s:Label width="20"/>
74. <s:RadioButton label="月" groupName="radiogroup" value="月"/>
75. <s:Label width="60"/>
76. <s:Button label="查询" id="search" click="search_clickHandler(event)"/>
77. </s:HGroup>
78. <mx:ColumnChart id="column" dataProvider="{chartArray}" width="100%" height="80%" columnWidthRatio="0.4"
79. showDataTips="true">
80. <mx:horizontalAxis>
81. <mx:CategoryAxis id="dataX" categoryField="week" displayName="周"/>
82. </mx:horizontalAxis>
83. <mx:series>
84. <mx:ColumnSeries displayName="人数" id="date" xField="week" yField="person"/>
85. </mx:series>
86. </mx:ColumnChart>
87. <mx:Legend dataProvider="{column}"/>
88. </s:VGroup>
89. </s:Application>

3、实例结果

（1）初始化时

（2）选择“月”