Flex图表 - 使用fillFunction动态设置图表项目ChartItem的填充色
使用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>