Flex图表 - 使用filterFunction过滤图表数据

2014-12-10 发布：hangge 阅读：246

使用Flex图表，有时需要对数据集进行过滤，只显示满足要求的项目。

使用filterFunction即可：filterFunction接收一个包含系列中所有数据项的Array，并返回满足函数中定义条件的一个数据项Array。（注：filterFunction是配置在每一个系列上的）

下面例子，如果销量小于100的话则不显示柱子（如下2013年不显示销量，但2013年这个刻度坐标还在）

代码如下：

<?xml version="1.0"?>
<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">
	
	<fx:Declarations>
		<fx:XML id="salesDataXML">
			<all>
				<data year="2012" sales="125"/>
				<data year="2013" sales="88"/>
				<data year="2014" sales="136"/>
				<data year="2015" sales="125"/>
				<data year="2016" sales="150"/>
			</all>
		</fx:XML>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.charts.series.items.ColumnSeriesItem;
			
			private function myfilterFunction(data:Array):Array{
				var temp:Array = [];
				for(var i:int = 0;i<data.length;i++){
					var item:ColumnSeriesItem = data[i] as ColumnSeriesItem;
					if(i!=1){
						temp.push(item);
					}
				}
				return temp;
			}
		]]>
	</fx:Script>
	
	<mx:ColumnChart id="myChart" fontSize="12"
					height="260"
					dataProvider="{salesDataXML.data}" 
					showDataTips="true">
		<mx:horizontalAxis>
			<mx:CategoryAxis title="年度" categoryField="@year"/>
		</mx:horizontalAxis>
		<mx:verticalAxis>
			<mx:LinearAxis title="销量"/>
		</mx:verticalAxis>
		
		<mx:series>
			<mx:ColumnSeries id="currSalesSeries" 
							 xField="@year" 
							 yField="@sales" 
							 filterFunction="myfilterFunction"
							 displayName="销量"/>
		</mx:series>
	</mx:ColumnChart>	
</s:Application>