`
luhantu
  • 浏览: 204010 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex Chart 中用dataFunction对数据进行处理

    博客分类:
  • Flex
阅读更多

在flex中用chart对数据展示时,有时候数据中有空值,但是希望数据为空时能用其他默认值来代替,这个时候就可以用dataFunction来做对数据显示前的一个预处理。

<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:mx="library://ns.adobe.com/flex/mx" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	height="600">
	<fx:Script><![CDATA[
		import mx.charts.CategoryAxis;
		import mx.charts.chartClasses.AxisBase;
		import mx.charts.chartClasses.Series;
		
		[Bindable] 
		public var SMITH:Array = [ 
		{month: 1, High:45.87,Low:null, open:25.19}, 
		{month: 2, High:45.74,Low:10.23, open:35.29}, 
		{month: 3, High:45.77,Low:12.13, open:45.19}, 
		{month: null, High:46.06,Low:10.45, open:15.59}, 
		]; 
		
		private function columnDataFunc(series:Series, item:Object, fieldName:String):Object { 
			if(fieldName == "yValue" && series.hasOwnProperty("yField"))
			{
				var yfield:String = series["yField"];
				if(item[yfield] == null)
				{
					return 123; 
				}
				//此时的返回值必须与数据类型相匹配。
				return item[yfield];
			}
			else if(fieldName == "xValue")
			{
				var xfield:String = categoryAxis.categoryField;
				//此时,必须返回为string类型的值,因为x轴为null时,chart控件会默认用此数据的index来代表,如果不为string的话,chart的图形会发生平移现象
				//但是记得此时必须和categoryDataFunction中的返回逻辑一样
				return item[xfield] != null ? item[xfield].toString() : "4";
			}
			else
			{
				return null;
			}
		} 
		private function categoryDataFunction(axis:AxisBase, item:Object):Object { 
			// 对数据源数据显示之前做处理,因为显示的时候都用string类型,所以可以返回任何类型
			return item.month == null ? "4" :  item.month; 
		} 
		
		protected function categoryAxisLabelFunction(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String
		{
			// labelFunction 仅仅决定显示的label的值
			var showString:String = item.toString() + " -label";
			return  showString;  
		}
		
	]]></fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:ColumnChart id="chart" dataProvider="{SMITH}"
					showDataTips="true" width="100%" height="100%">
		<mx:horizontalAxis>
			<!-- The dataFunction replaces "categoryField='month'. -->
			<mx:CategoryAxis id="categoryAxis"  
							 dataFunction="categoryDataFunction"
							 labelFunction="categoryAxisLabelFunction"
							 categoryField="month"/>
		</mx:horizontalAxis>
		<mx:series>
			<!--
			The dataFunction replaces yField value, which cannot drill down
			into an object (close.High is not valid).
			-->
			<mx:ColumnSeries id="highClose" yField="High" maxColumnWidth="20" name="High"
							 dataFunction="columnDataFunc" />
			<mx:ColumnSeries id="lowClose" yField="Low" maxColumnWidth="20" name="Low"
							 dataFunction="columnDataFunc" />
		</mx:series>
	</mx:ColumnChart>
</s:Application>

 

0
0
分享到:
评论

相关推荐

    flex chart

    标题 "flex chart" 指的是使用 Adobe Flex 技术创建的数据图表组件。Flex 是一个开源框架,主要用于构建富互联网应用程序(RIA),特别是在基于 Adobe Flash Player 或 Adobe AIR 的平台上。Flex Chart 是 Flex SDK ...

    flex Chart

    Flex Chart 是Adobe Flex框架中用于数据可视化的组件集,它提供了强大的图表绘制功能,使得开发者可以轻松地创建各种类型的图表,如柱状图、折线图、饼图、散点图等。在Flex 3中,Chart组件是MXML和ActionScript开发...

    Flex Chart 使用教程(含源代码)

    "FlexChart使用教程.doc"可能包含详细的步骤说明和代码示例,教你如何创建、配置和定制Flex Chart。而"FlexDemo"可能是一个实际的Flex项目,包含完整的MXML和ActionScript代码,供学习者参考和运行。 五、进阶技巧 ...

    Flex chart line 线性表(单线和双线)

    Flex Chart Line是Adobe Flex框架中的一个关键组件,用于创建数据可视化图表,特别是线性图表。在本场景中,我们关注的是“单线”和“双线”两种类型的线性图表。Flex 4.5是Adobe Flex SDK的一个版本,它提供了更...

    FlexChart平均线代码

    FlexChart是Adobe Flex框架中的一个图表组件,用于创建各种数据可视化图表。在描述中提到的“FlexChart平均线代码”是指使用FlexChart来绘制平均线图表的源代码。这个平均线可能指的是移动平均线,一种在金融数据...

    Flex Chart+WebService<mxml源码>

    Flex Chart+WebService由于发布时没有注意,忘了把MXML的源码打包。webservice采用的是Myeclipse自带的XFIRES,可自行添加。

    Flex Chart 图表3D展示

    Flex Chart 是Adobe Flex框架中的一种组件,用于创建各种数据可视化图表。在本示例中,我们关注的是"Flex Chart的3D展示",这表明它利用了Flex AS(ActionScript)语言来实现一种引人注目的3D效果。ActionScript是...

    去除flex chart 水印方法

    - Flex Chart是指使用Flex框架构建的数据可视化组件。 - 这些图表组件可以非常方便地集成到RIA应用中,提供丰富的数据展示功能。 - 由于版权和许可问题,未经许可的Flex Chart可能会包含水印。 3. **水印去除...

    FlexChart使用教程

    ### FlexChart使用教程详解 #### 一、Flex与RIA背景介绍 随着互联网技术的发展,用户对Web应用的要求越来越高,不仅需要高效稳定的功能性...无论是用于数据分析还是数据可视化,FlexChart都是一个值得推荐的选择。

    Flex Chart+WebService

    标题中的“Flex Chart+WebService”指的是使用Adobe Flex技术来创建图表,并通过Web Service与服务器进行数据交互的一个示例项目。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。它...

    flex 改变linechart datatips 显示样式代码

    Flex中的Datatips默认样式可能不能满足所有设计需求,因此我们需要对其进行定制。首先,我们可以通过使用`dataTipStyleName`属性来指定一个自定义的CSS样式类,这个类可以定义Datatips的外观。例如: ```xml ...

    flex 4 chart 控件

    Flex 4 Chart 控件是Adobe Flex框架中用于创建数据可视化的一种强大工具,它允许开发者创建出丰富、交互式且美观的图表。在Flex 4中,Chart组件是基于Flash Player运行时的,提供了多种图表类型,包括折线图、柱状图...

    Flex LineChart

    Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。

    Flex BlazeDs 推数据生成lineChart实例

    然后,在Flex前端,我们需要创建一个lineChart组件,并通过Binding或DataProvider来绑定数据源。数据源通常是一个ArrayCollection,它可以实时接收来自BlazeDS的推送数据。每当服务器端有新的数据可用,BlazeDS会...

    AMF抓取flex页面数据

    例如,测试人员可能需要抓取数据以验证服务功能,数据分析师则可能希望获取特定的网站数据进行研究。 9. **学习资源** - 要深入学习AMF和Flex抓取,可以参考Adobe官方文档,以及各种在线教程和论坛,如Stack ...

    flex LineChart实例

    对于想要使用Flex框架进行数据可视化的开发者来说,这是一个非常实用的参考案例。此外,该实例还展示了如何在图表上添加额外的信息(如水印),这对于保护作品的版权具有重要意义。总体而言,这份代码提供了一个很好...

    flex LineChart

    以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。

    Flex Chart Demo

    Flex Chart Demo是一个示例项目,展示了如何在Flex环境中利用图表组件进行数据可视化。Flex是Adobe开发的一款用于构建富互联网应用程序(RIA)的框架,而Flex Builder是它的集成开发环境(IDE),提供了图形化的用户...

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,它们广泛应用于数据分析、报表展示以及业务指标的可视化。 **饼形图(Pie Chart)** 饼形...

    flex中dataGrid导出数据到excel中

    flex中dataGrid导出数据到excel中,不存在乱码问题

Global site tag (gtag.js) - Google Analytics