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

时间：2014-10-11 03:39:24 阅读：322 评论：0 收藏：0 [点我收藏+]

标签：style blog http io os ar for strong 数据

1、问题描述

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

2、演示实例

[plain] view plain copy

<?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
{
}
/**
* 查询按钮函数
*/
protected function search_clickHandler(event:MouseEvent):void
{
}
/**
* 单选按钮切换函数
*/
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）初始化时

bubuko.com,布布扣

（2）选择“月”

bubuko.com,布布扣

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

标签：style blog http io os ar for strong 数据

原文地址：http://www.cnblogs.com/yido9932/p/4018170.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行