flash.filters パッケージのクラスを使用して、ドロップシャドウなどのフィルタをチャートに追加できます。追加できるフィルタは次のとおりです。

• BevelFilter
• BitmapFilter
• BlurFilter
• ColorMatrixFilter
• DisplacementMapFilter
• DropShadowFilter
• GlowFilter
• GradientBevelFilter
• GradientGlowFilter

フィルタは、チャートコントロール自体に適用することも、各チャート系列に適用することもできます。フィルタをチャートコントロールに適用すると、そのチャートコントロールのすべての要素（グリッド線、軸ラベル、系列の各データポイントなど）にフィルタが適用されます。次の図は、ドロップシャドウフィルタが適用された ColumnChart コントロールを示します。

次の例では、ColumnChart コントロールにカスタムドロップシャドウフィルタを適用します。その結果、グリッド線、軸ラベル、縦棒などのすべての要素の背景に影が付きます。

<?xml version="1.0"?>
<!-- charts/ColumnWithDropShadow.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:flash="flash.filters.*">

  <mx:Script><![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
  public var expenses:ArrayCollection = new ArrayCollection([
     {Month:"Jan", Profit:2000, Expenses:1500},
     {Month:"Feb", Profit:1000, Expenses:200},
     {Month:"Mar", Profit:1500, Expenses:500}
  ]);
  ]]></mx:Script>
  <mx:Panel>
     <mx:ColumnChart id="column" dataProvider="{expenses}">
        <!-- Add a custom drop shadow filter to the 
                ColumnChart control. -->
        <mx:filters>
           <mx:DropShadowFilter 
                distance="10" 
                color="0x666666"
                alpha=".8"
           />
        </mx:filters>
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit"
                displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{column}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

フィルタの使用の詳細については、Flex でのフィルタの使用を参照してください。

チャートコントロールによっては、ドロップシャドウフィルタを追加すると、予期しない結果になることがあります。例えば、PieChart コントロールにドロップシャドウフィルタを追加すると、PieSeries のデフォルトのドロップシャドウフィルタに加えて、追加したドロップシャドウフィルタがレンダリングされます。

フィルタを削除するには、filters 配列を空の配列に設定します。次に例を示します。

<?xml version="1.0"?>
<!-- charts/ClearFilters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
  public var expenses:ArrayCollection = new ArrayCollection([
     {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
     {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
     {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
  ]);
  ]]></mx:Script>
  <mx:LineChart id="myChart" dataProvider="{expenses}">
     <mx:seriesFilters>
        <mx:Array/>
     </mx:seriesFilters>
     <mx:horizontalAxis>
        <mx:CategoryAxis 
            dataProvider="{expenses}" 
            categoryField="Month"
        />
     </mx:horizontalAxis>
     <mx:series>
        <mx:LineSeries 
            yField="Profit" 
            displayName="Profit"
        />
        <mx:LineSeries 
            yField="Expenses" 
            displayName="Expenses"
        />
        <mx:LineSeries 
            yField="Amount" 
            displayName="Amount"
        />
     </mx:series>
  </mx:LineChart>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の例では、PieChart コントロールを作成してドロップシャドウフィルタを適用します。また、ドロップシャドウが 1 つになるように、PieSeries からデフォルトのドロップシャドウフィルタを削除します。

<?xml version="1.0"?>
<!-- charts/PieChartShadow.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash=
"flash.filters.*">
  <mx:Script>
    <![CDATA[
     [Bindable]
     public var expenses:Object = [
        {Expense:"Taxes", Amount:2000},
        {Expense:"Gas", Amount:100},
        {Expense:"Food", Amount:200}
     ];
    ]]>
  </mx:Script>
  <mx:Panel title="Pie Chart">
     <mx:PieChart id="pie" 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <!-- Add a custom drop shadow to the PieChart control -->
        <mx:filters>
           <flash:DropShadowFilter
                distance="10"
                color="0x666666"
                alpha=".8"
           />
        </mx:filters>
        <mx:series>
           <mx:Array>
            <mx:PieSeries field="Amount" nameField="Expense"
            labelPosition="callout" explodeRadius=".2">
                <!-- Clear default shadow on the PieSeries -->
                <mx:filters>
                    <mx:Array/>
                </mx:filters>
            </mx:PieSeries>
           </mx:Array>
        </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider="{pie}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

系列、グリッド線、凡例項目、軸など、表示オブジェクトであるチャートエレメントに個別にフィルタを追加できます。次の例では、フィルタのセットを定義して各種チャートエレメントに適用します。

<?xml version="1.0"?>
<!-- charts/MultipleFilters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash=
"flash.filters.*" creationComplete="createFilters()">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500},
        {Month:"Feb", Profit:1000, Expenses:200},
        {Month:"Mar", Profit:1500, Expenses:500}
     ]);

     private var myBlurFilter:BlurFilter;
     private var myGlowFilter:GlowFilter;
     private var myBevelFilter:BevelFilter;
     private var myDropShadowFilter:DropShadowFilter;

     private var color:Number = 0xFF33FF;

     public function applyFilters():void {
        // Apply filters to series, grid lines, legend, and axis.
        myGridlines.filters = [myBlurFilter];
        myLegend.filters = [myGlowFilter];
        myAxisRenderer.filters = [myBevelFilter];
        s1.filters = [myDropShadowFilter];
        s2.filters = [myDropShadowFilter];
     }

     public function createFilters():void {
        // Define filters.
        myBlurFilter = new BlurFilter(4,4,1);

        myGlowFilter = new GlowFilter(color, .8, 6, 6, 
            2, 1, false, false);

        myDropShadowFilter = new DropShadowFilter(15, 45, 
            color, 0.8, 8, 8, 0.65, 1, false, false);

        myBevelFilter = new BevelFilter(5, 45, color, 0.8, 
            0x333333, 0.8, 5, 5, 1, BitmapFilterQuality.HIGH,               
            BitmapFilterType.INNER, false);

        applyFilters();
     }
  ]]></mx:Script>

  <mx:Panel>
     <mx:ColumnChart id="myChart" dataProvider="{expenses}">
        <mx:backgroundElements>
            <mx:GridLines id="myGridlines" 
                horizontalChangeCount="1"
                verticalChangeCount="1"
                direction="both"
            />
        </mx:backgroundElements>
        <mx:horizontalAxis>
            <mx:CategoryAxis
                id="a1"
                dataProvider="{expenses}" 
                categoryField="Month"
            />
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer 
                id="myAxisRenderer" 
                placement="bottom"
                canDropLabels="true"
                axis="{a1}"
            >
                <mx:axisStroke>
                    <mx:Stroke color="#000080" weight="10"/>
                </mx:axisStroke>
                <mx:tickStroke>
                    <mx:Stroke color="#000060" weight="5"/>
                </mx:tickStroke>
                <mx:minorTickStroke>
                    <mx:Stroke color="#100040" weight="5"/>
                </mx:minorTickStroke>
            </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>

        <mx:series>
           <mx:ColumnSeries id="s1" 
                xField="Month" 
                yField="Profit"
                displayName="Profit"
           />
           <mx:ColumnSeries id="s2" 
                xField="Month" 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend  id="myLegend" dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。