[转]Flex chart fillfunction

本文转自：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c3f.html

You can customize the appearance of chart items in a series by using the fillFunction property to define the fill. This function takes the chart item and its index as arguments, so that you can examine the chart item’s data values and return a fill based on whatever criteria you choose to use.

Programmatically assigning fills lets you set a threshold for color values, or conditionalize the colors of your chart items. For example, if the size of a pie wedge is greater than 25%, make it red, or if a column’s value is greater than 100, make it green.

You set the value of the fillFunction property on each series, so if you have multiple series, you can have multiple fill functions, or all series can share the same fill function.

The signature of the fillFunction is as follows:

function_name(element:ChartItem, index:Number):IFill { ... }

The following table describes the arguments:

Argument	Description
element	The chart item for which the fill is created; type ChartItem.
index	The index of the chart item in the RenderData object’s cache. This is different from the index of the chart's data provider because it is sorted based on the x, y, and z values; type Number.

The fillFunction property returns a Fill object (an object that implements the IFill interface). This object is typically an instance of the SolidColor class, but it can also be of type BitmapFill, LinearGradient, or RadialGradient. For information on working with gradients, see Using gradient fills with chart controls.

The returned fill from a fillFunction takes precedence over fills that are set with traditional style methods. For example, if you set the value of the fill or fills property of a series and also specify a fillFunction, the fills are ignored and the fill returned by the fillFunction is used when rendering the chart items in the series.

The following example compares the value of the yField in the data provider when it fills each chart item. If the yField value (corresponding to the CurrentAmount field) is greater than $50,000, the column is green. If it is less than $50,000, the column is red.

<?xml version="1.0"?>
<!-- charts/SimpleFillFunction.mxml -->
<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" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Script>
    <![CDATA[
     import mx.graphics.IFill;
     import mx.graphics.SolidColor;
     import mx.charts.ChartItem;
     import mx.charts.series.items.ColumnSeriesItem;

    private function myFillFunction(element:ChartItem, index:Number):IFill {
        var c:SolidColor = new SolidColor(0x00CC00);

        var item:ColumnSeriesItem = ColumnSeriesItem(element);
        var profit:Number = Number(item.yValue);       

        if (profit >= 1250) {
            return c;
        } else {
            c.color = 0xFF0000;
        }
        return c;
    }    
    ]]>
  </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Using a custom fillFunction in a Column Chart">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis title="Month" categoryField="month"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
            <mx:LinearAxis title="Profit (in $USD)"/>
        </mx:verticalAxis>
        
        <mx:series>
           <mx:ColumnSeries id="currSalesSeries" 
                xField="month" 
                yField="profit" 
                fillFunction="myFillFunction" 
                displayName="Profit"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend>
        <mx:LegendItem label="More than $1,250" fontWeight="bold">
           <mx:fill>
            <mx:SolidColor color="0x00FF00"/>
           </mx:fill>
           <mx:stroke>
            <mx:SolidColorStroke color="0x000000" weight="1"/>
           </mx:stroke>
        </mx:LegendItem>
        <mx:LegendItem label="Less than $1,250" fontWeight="bold">
           <mx:fill>
            <mx:SolidColor color="0xFF0000"/>
           </mx:fill>
           <mx:stroke>
            <mx:SolidColorStroke color="0x000000" weight="1"/>
           </mx:stroke>
         </mx:LegendItem>
     </mx:Legend>
  </s:Panel>
</s:Application>