Flex图表 - 使用fillFunction动态设置图表项目ChartItem的填充色
作者:hangge | 2014-12-10 10:56
使用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>
全部评论(0)