In Flex, use single-choice buttons to switch the horizontal and vertical coordinates and descriptions of the column chart, and use the flex column chart.

In Flex, use single-choice buttons to switch the horizontal and vertical coordinates and descriptions of the column chart, and use the flex column 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

<? 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] // bind the data of the graph to private var chartArray: ArrayCollection = new ArrayCollection ([{week: "Monday", month: "January", person: "8989 ", rate: "56" },{ week: "Tuesday", month: "February", person: "5675", rate: "43" },{ week: "Wednesday ", month: "March", person: "7234", rate: "12" },{ week: "Thursday", month: "April", person: "3456", rate: "76" },{ week: "Friday", month: "May", person: "6355", rate: "49" },{ week: "Saturday", month: "June", person: "4356", rate: "32" },{ week: "Sunday", month: "July", person: "9087", rate: "87"}]);/*** initialization function */protected function initHandler (event: FlexEvent ): void {}/*** query Button function */protected function search_clickHandler (event: MouseEvent): void {}/*** single-choice button switching function */protected function radiogroup_itemClickHandler (event: itemClickEvent): void {if (event. currentTarget. selectedValue = "Week") {dataX. categoryField = "week"; dataX. displayName = "Week"; date. xField = "week"; date. yField = "person"; date. displayName = "Number of people";} else if (event. currentTarget. selectedValue = "month") {dataX. categoryField = "month"; dataX. displayName = "month"; date. xField = "month"; date. yField = "rate"; date. displayName = "ratio" ;}}]]> </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 = "date type:"/> <s: label width = "20"/> <s: RadioButton label = "Week" groupName = "radiogroup" value = "Week" selected = "true"/> <s: label width = "20"/> <s: RadioButton label = "month" groupName = "radiogroup" value = "month"/> <s: label width = "60"/> <s: Button label = "query" 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. instance result

(1) During Initialization

(2) Select "month"

How Does flex create a bar chart? How to display data in the database table to a column chart?

There is a columnchart chart, which extracts data from the database, transfers the data to the ILIST type instance in FLEX, and saves the data, and binds it to the columnchart chart. You can set the display of the horizontal and vertical coordinates by yourself, and check if the API has an instance ..

Can I convert the horizontal and vertical coordinates of a column chart in WORD?

Generally, excel is used to directly generate data, modify data directly on the original table, and modify the bar chart automatically.
What you see in word should be pasted from excel.