Use Single-choice buttons in flex to switch the horizontal and vertical coordinates and descriptions of a bar chart

1. Problem Description

A group of single-choice buttons can be divided into weeks and months. Select "Week". The horizontal coordinate of the bar chart shows the Week, and the vertical coordinate shows the number of people. Select "month" and the horizontal coordinate of the column chart shows the month, the ordinate value shows the ratio.

2. Demo instance

 

[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;
18. [Bindable]
19. // Graph data binding
20. Private var chartarray: arraycollection = new arraycollection ([
21. {Week: "Monday", month: "January", person: "8989", rate: "56 "},
22. {Week: "Tuesday", month: "February", person: "5675", rate: "43 "},
23. {Week: "Wednesday", month: "March", person: "7234", rate: "12 "},
24. {Week: "Thursday", month: "April", person: "3456", rate: "76 "},
25. {Week: "Friday", month: "May", person: "6355", rate: "49 "},
26. {Week: "Saturday", month: "June", person: "4356", rate: "32 "},
27. {Week: "Sunday", month: "July", person: "9087", rate: "87 "}
28. ]);
30. /**
31. * Initialization Function
32. */
33. Protected function inithandler (Event: flexevent): void
34. {
36. }
38. /**
39. * Query button Functions
40. */
41. Protected function search_clickhandler (Event: mouseevent): void
42. {
44. }
46. /**
47. * Single-choice button switching function
48. */
49. Protected function radiogroup_itemclickhandler (Event: itemclickevent): void
50. {
51. If (event. currenttarget. selectedvalue = "Week ")
52. {
53. Datax. categoryfield = "Week ";
54. Datax. displayname = "Week ";
55. Date. xfield = "Week ";
56. Date. yfield = "person ";
57. Date. displayname = "Number of Students ";
58. }
59. Else if (event. currenttarget. selectedvalue = "month ")
60. {
61. Datax. categoryfield = "month ";
62. Datax. displayname = "month ";
63. Date. xfield = "month ";
64. Date. yfield = "rate ";
65. Date. displayname = "ratio ";
66. }
67. }
69. ]>
70. </FX: SCRIPT>
71. <FX: declarations>
72. <S: radiobuttongroup id = "radiogroup" itemclick = "radiogroup_itemclickhandler (event)"/>
73. </FX: declarations>
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 = "date type:"/>
79. <S: Label width = "20"/>
80. <S: radiobutton label = "Week" groupname = "radiogroup" value = "Week" selected = "true"/>
81. <S: Label width = "20"/>
82. <S: radiobutton label = "month" groupname = "radiogroup" value = "month"/>
83. <S: Label width = "60"/>
84. <S: button label = "query" 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 = "Week"/>
90. </MX: horizontalaxis>
92. <Mx: Series>
93. <Mx: columnseries displayname = "" id = "date" xfield = "Week" yfield = "person"/>
94. </MX: Series>
95. </MX: columnchart>
96. <Mx: Legend dataprovider = "{column}"/>
98. </S: vgroup>
100. </S: Application>

3. instance result

(1) During Initialization

(2) Select "month"

Use Single-choice buttons in flex to switch the horizontal and vertical coordinates and descriptions of a bar chart