Flex图表 - 使用fillFunction动态设置图表项目ChartItem的填充色

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

使用Flex图表时，我们有时需要根据数据动态的设置ChartItem的填充色，即同一系列ChartItem可以使用不同的颜色。

我们只需要使用 fillFunction 即可。

比如下面柱状图例子，如果销量低于100则使用红色的柱子，大于等于100使用绿色的柱子。

代码如下：

<?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.ChartItem;
			import mx.charts.series.items.ColumnSeriesItem;
			import mx.graphics.IFill;
			import mx.graphics.SolidColor;
			
			private function myFillFunction(element:ChartItem, index:Number):IFill {
				var c:SolidColor = new SolidColor(0x00CC00);
				
				var item:ColumnSeriesItem = ColumnSeriesItem(element);
				var sales:Number = Number(item.yValue);       
				
				if (sales >= 100) {
					return c;
				} else {
					c.color = 0xFF0000;
				}
				return c;
			}  
		]]>
	</fx:Script>
	
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	
	<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" 
							 fillFunction="myFillFunction"
							 displayName="销量"/>
		</mx:series>
	</mx:ColumnChart>
	<mx:Legend>
		<mx:LegendItem label="销量高于100" fontWeight="bold" fontSize="12">
			<mx:fill>
				<mx:SolidColor color="0x00FF00"/>
			</mx:fill>
			<mx:stroke>
				<mx:SolidColorStroke color="0x000000" weight="1"/>
			</mx:stroke>
		</mx:LegendItem>
		<mx:LegendItem label="销量低于100" fontWeight="bold"  fontSize="12">
			<mx:fill>
				<mx:SolidColor color="0xFF0000"/>
			</mx:fill>
			<mx:stroke>
				<mx:SolidColorStroke color="0x000000" weight="1"/>
			</mx:stroke>
		</mx:LegendItem>
	</mx:Legend>
</s:Application>