<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var salesDept_1:ArrayCollection = new ArrayCollection( [
{ SalesDept: "销售一部", tract: 3500, gather:3400 },
]);
private var salesDept_2:ArrayCollection = new ArrayCollection( [
{ SalesDept: "销售二部", tract: 2000, gather:1400 },
]);
//这里定义的是数据源
]]>
</mx:Script>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="50%" layout="horizontal">
<mx:ColumnChart id="column" height="100%" width="45%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{salesDept_1}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="SalesDept"/>
</mx:horizontalAxis>
先制定柱子按照数据源的什么分类,然后在后面的series中指定每一个分类中的具体小类
//在中里我们指定柱子显示的方向,horizontalAxis表示竖向显示,
/*
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:verticalAxis>
表示横向显示
*/
<mx:series>
<mx:ColumnSeries xField="SalesDept" yField="tract" displayName="签单"/>
<mx:ColumnSeries xField="SalesDept" yField="gather" displayName="到帐"/>
//displayName表示图表显示出来的名字yField表示数据显示的字段
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}"/>
<mx:HBox>
<mx:RadioButton groupName="stocks" label="销售一部"
selected="true" click="column.dataProvider=salesDept_1;"/>
<mx:RadioButton groupName="stocks" label="销售二部"
click="column.dataProvider=salesDept_2;"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
分享到:
相关推荐
<mx:ColumnChart x="6" y="65" id="columnchart1" showDataTips="true" dataProvider="{list}" height="390" itemClick="onItemClick(event)"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Time"/> ...
本篇文章将深入探讨Flex Graph的基本概念、用途、核心组件以及如何通过实例进行应用。 一、Flex Graph概述 Flex Graph组件是Flex SDK中的一个部分,它允许开发人员创建各种图表,如折线图、柱状图、饼图等,用于...
<mx:ColumnChart id="columnCharts" dataProvider="{myData}" showDataTips="true" columnWidthRatio="0.6" width="623" height="338"> <!-- 背景元素配置 --> <mx:backgroundElements> <mx:GridLines> <mx:...
数据可以是XML、JSON或其他格式,关键在于数据结构要与Flex图表组件的预期输入相匹配。 五、代码实现 1. 创建Flex项目,导入所需的图表库。 2. 设置数据源:将股票数据绑定到`ArrayCollection`,这是Flex中最常用的...
综上所述,“flex图表展示数据源码”涉及了Flex框架中的数据可视化技术,包括使用MX和Spark图表组件、数据源的创建和绑定、以及动态更新图表数据的方法。在实际项目中,开发者需要根据具体需求灵活应用这些知识点,...
- `mx:PieChart`, `mx:ColumnChart`, `mx:BarChart`, 和 `mx:LineChart` 是不同类型的图表组件,它们可以通过数据集展示数据。 - `cbChartType` 的数据提供者允许用户在不同的图表类型间切换。 4. **颜色选择器和...
`<mx:ColumnChart>`柱状图的一种,与`<mx:BarChart>`类似,但通常用于竖直方向上的数据比较。 ##### 8. DateTimeAxis `<mx:DateTimeAxis>`时间轴,适用于连续的时间序列数据。 ##### 9. GridLines `<mx:GridLines>...
`mx:ColumnChart`、`mx:LineChart`和`mx:PieChart`等类提供了丰富的图表选项,可以创建出美观且信息丰富的可视化效果。此外,`mx:Legend`和`mx:Axis`等组件则帮助我们更好地组织和解释数据。 分页和过滤是大型数据...
Flex中的mx.charts.ColumnChart类可以实现这一功能,同样通过dataProvider设置数据源,设置columnWidthRatio调整每个柱子的宽度,以及使用horizontalAxis和verticalAxis定义横纵坐标轴。 饼图适用于展示各部分占...
4. 动态更新:实时数据显示是Flex图表的一个强大特性,可以在运行时动态添加、删除或修改数据,图表会即时响应。 5. 视觉效果:Flex提供多种视觉效果,如动画、阴影、3D效果等,可以提升图表的视觉吸引力。 五、...
你需要在.mxml文件中导入相关的图表库,例如`<s:BarChart>`(Spark)或`<mx:ColumnChart>`(MX)。接着,你可以定义一个chart数据系列,这通常是一个`<s:Series>`(Spark)或`<mx:ColumnSeries>`(MX)元素,它将...
在Flex中,可以使用`mx.charts.ColumnChart`类来创建柱状图。以下是一些关键步骤: 1. 创建一个新的Flex项目,并在MXML文件中引入必要的命名空间,如`<s:Application>`和`<mx:ColumnChart>`。 2. 定义数据源,通常...
<mx:ColumnChart id="columnChart" showDataTips="true" width="100%" height="100%"/> ... </mx:HBox> <mx:HBox id="pieBox" name="PieChart" width="100%"> ... </mx:HBox> <mx:HBox id="lineBox" name=...
Flex是一种开源的富互联网应用程序(RIA)开发框架,由Adobe公司提供,主要用于创建交互式、高性能的Web应用。...这个实例对于学习和理解Flex图表组件的使用非常有帮助,可以作为进一步开发自己数据可视化应用的基础。
- 数据绑定机制使得`moviemodel.movieList.subPointedDataList`可以直接作为图表`<mx:ColumnChart>`的数据提供者,当Java端数据发生变化时,图表会自动更新。 4. **BlazeDS配置**: - 在Java应用服务器(如Tomcat...
### Flex环境配置与图表应用详解 #### 一、Flex环境配置 **1. 安装FlexBuilder** - **步骤**: 下载并安装最新版本的FlexBuilder。 - **配置FlexBuilder**: 在JRUN或Tomcat中需要导入`flex`和`samples`两个包到`...
以上就是关于"Eclipse开发Flex新手必学例子(后台数据页面显示N种图表)"的主要内容,希望对初学者在理解Flex图表和后台数据交互方面有所帮助。通过不断练习和探索,你将能够自如地运用Flex创建出各种复杂且富有洞察力...
在Flex中,我们可以利用MX图表组件库来创建柱状图,这个库包含了多种图表类型,如条形图(BarChart)、柱状图(ColumnChart)等。这些图表能够以直观的方式展示数据,帮助用户快速理解和分析信息。 动态显示效果是...
开发者可能使用了Flex提供的mx.charts库,该库包含了多种图表类型,如条形图(BarChart)、柱状图(ColumnChart)等。 `.actionScriptProperties`文件是Adobe Flex Builder或Flash Builder中的项目配置文件,它存储...
在Flex开发中,有时我们需要对图表的...通过理解并使用`labelRotation`属性以及正确地嵌入字体,我们可以灵活地调整Flex图表的轴标签,以适应各种设计和布局需求。这对于创建美观且用户友好的数据可视化界面至关重要。