Flex图表 - 使用filterFunction过滤图表数据
作者:hangge | 2014-12-10 11:36
使用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>
全部评论(0)