AreaChart、BarChart、ColumnChart の各コントロールで複数のデータ系列を使用する場合、コントロールの type プロパティを使用して系列の表示方法を制御できます。次の表で、type プロパティで使用できる値について説明します。

次の例では、4 つのデータ系列を積み重ねた AreaChart コントロールを作成しています。

<?xml version="1.0"?>
<!-- charts/AreaStacked.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:Panel title="Stacked AreaChart">
     <mx:AreaChart  
        dataProvider="{expenses}" 
        showDataTips="true" 
        type="stacked"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:AreaSeries 
                yField="Profit" 
                displayName="Profit"
           />
           <mx:AreaSeries 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:AreaChart>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の例は、積み重ねた AreaChart コントロールを示します。

積み上げ（overlaid）を指定した場合は最後の系列が手前に表示されるので、塗りの alpha プロパティを使用して透明にしない限り、背後のデータ系列が見えにくくなる場合があります。詳細については、チャートコントロールでの塗りの使用を参照してください。

type プロパティを 100% に設定すると、各系列の合計が領域の 100% を占めるように各系列が縦に積み重ねられます。各列は、そのカテゴリの値の合計に対する割合（%）を表します。次に例を示します。

ColumnSet、BarSet、AreaSet の各クラスを使用してチャート系列のグループを結合することで、同じチャート内で異なるタイプの系列を使用できます。次の例では、BarSet クラスを使用して、集合タイプと積み重ねタイプの BarSeries を 1 つのチャートに結合します。この例では、MXML と ActionScript を使用してこれを実現する方法を示しています。

<?xml version="1.0"?>
<!-- charts/UsingBarSets.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()">
  <mx:Script><![CDATA[
     import mx.charts.Legend;
     import mx.charts.BarChart;
     import mx.charts.series.BarSet;
     import mx.charts.series.BarSeries;
     import mx.collections.ArrayCollection;

     [Bindable]
     private var yearlyData:ArrayCollection = new ArrayCollection([
        {month:"January", revenue:120, costs:45,
            overhead:102, oneTime:23},
        {month:"February", revenue:108, costs:42,
            overhead:87, oneTime:47},
        {month:"March", revenue:150, costs:82,
            overhead:32, oneTime:21},
        {month:"April", revenue:170, costs:44,
            overhead:68},
        {month:"May", revenue:250, costs:57,
            overhead:77, oneTime:17},
        {month:"June", revenue:200, costs:33,
            overhead:51, oneTime:30},
        {month:"July", revenue:145, costs:80,
            overhead:62, oneTime:18},
        {month:"August", revenue:166, costs:87,
            overhead:48},
        {month:"September", revenue:103, costs:56,
            overhead:42},
        {month:"October", revenue:140, costs:91,
            overhead:45, oneTime:60},
        {month:"November", revenue:100, costs:42,
            overhead:33, oneTime:67},
        {month:"December", revenue:182, costs:56,
            overhead:25, oneTime:48},
        {month:"May", revenue:120, costs:57,
            overhead:30}
     ]);

     private function initApp():void {
        var c:BarChart = new BarChart();
        c.dataProvider = yearlyData;

        var vAxis:CategoryAxis = new CategoryAxis();
        vAxis.categoryField = "month";
        c.verticalAxis = vAxis;

        var mySeries:Array = new Array();

        var outerSet:BarSet = new BarSet();
        outerSet.type = "clustered";
        var series1:BarSeries = new BarSeries();
        series1.xField = "revenue";
        series1.displayName = "Revenue";
        outerSet.series = [series1];

        var innerSet:BarSet = new BarSet();
        innerSet.type = "stacked";
        var series2:BarSeries = new BarSeries();
        var series3:BarSeries = new BarSeries();
        series2.xField = "costs";
        series2.displayName = "Recurring Costs";
        series3.xField = "oneTime";
        series3.displayName = "One-Time Costs";
        innerSet.series = [series2, series3];

        c.series = [outerSet, innerSet];

        var l:Legend = new Legend();
        l.dataProvider = c;

        panel2.addChild(c);
        panel2.addChild(l);
     }
  ]]></mx:Script>

  <mx:Panel title="Mixed Sets Chart Created in MXML" id="panel1">
     <mx:BarChart id="myChart" dataProvider="{yearlyData}">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="month"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSet type="clustered">
                <mx:BarSeries xField="revenue" 
                    displayName="Revenue"/>
                <mx:BarSet type="stacked">
                    <mx:BarSeries 
                        xField="costs" 
                        displayName="Recurring Costs"/>
                    <mx:BarSeries 
                        xField="oneTime" 
                        displayName="One-Time Costs"/>
                </mx:BarSet>
            </mx:BarSet>
        </mx:series>
     </mx:BarChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
  <mx:Panel title="Mixed Sets Chart Created in ActionScript"
    id="panel2">
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例を実行すると、チャートに 2 つの集合系列が表示されます。次の図に示すように、一方はスタンドアローンの系列で、もう一方は積み重ね系列です。

通常、積み重ね系列の値は累積的です。つまり、すべての値が互いに加算されて 1 つの大きなデータアイテム（縦棒、横棒または面）になります。系列に負の値が含まれている場合は、データアイテムがどのようにレンダリングされるか予測がつかなくなります。これは、負の値を加算すると通常はデータアイテムから値が減算されるためです。ただし、AreaSet、BarSet、ColumnSet の各クラスの allowNegativeForStacked プロパティを使用すると、積み重ね系列に負の値を持つデータを含めることができます。この場合は、適切に積み重ねられた負のデータアイテムがレンダリングされます。

次の例では、負の値を含む Profit フィールドと Expenses フィールドを積み重ねています。

<?xml version="1.0"?>
<!-- charts/StackedNegative.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},
        {Month:"Feb", Profit:1000, Expenses:-200},
        {Month:"Mar", Profit:1500, Expenses:-500}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
            <mx:ColumnSet type="stacked" allowNegativeForStacked="true">
                <mx:series>
                    <mx:ColumnSeries 
                        xField="Month" 
                        yField="Profit" 
                        displayName="Profit"
                    />
                    <mx:ColumnSeries 
                        xField="Month" 
                        yField="Expenses" 
                        displayName="Expenses"
                    />
                </mx:series>
            </mx:ColumnSet>           
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例を実行すると、チャートに 3 か月分のデータが表示され、すべての経費データと一部の収益データが負の値にレンダリングされます。

ColumnChart コントロールを使用して、カスケーディング（ウォーターフォール）縦棒グラフを作成できます。この形式のグラフを作成する 1 つの方法は、非表示の系列を作成し、それを使用して他の縦棒の高さを調整することです。これにより、ウォーターフォール効果が得られます。次の図は、ウォーターフォール縦棒グラフの例を示します。

このグラフを作成するコードは次のとおりです。

<?xml version="1.0"?>
<!-- charts/WaterfallStacked.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:"2005", top:25, middle:20, bottom:17, Invisible:0},
        {Month:"Jan", top:14, middle:12, bottom:10, Invisible:62},
        {Month:"Feb", top:8, middle:6, bottom:4, Invisible:98},
        {Month:"Mar", top:6, middle:5, bottom:5, Invisible:116},
        {Month:"Apr", top:5, middle:4, bottom:4, Invisible:132},
        {Month:"May", top:5, middle:3, bottom:5, Invisible:140},
        {Month:"Jun", top:4, middle:3, bottom:2, Invisible:155},
        {Month:"2006", top:68, middle:57, bottom:39, Invisible:0}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Stacked Waterfall">
     <mx:ColumnChart id="myChart"
        dataProvider="{expenses}"
        columnWidthRatio=".9"
        showDataTips="true"
        type="stacked"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis
                dataProvider="{expenses}"
                categoryField="Month"
            />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                yField="Invisible" 
                displayName="Invisible"
           >
                <mx:fill>
                    <!--Set alpha to 0 to hide invisible column.-->
                    <mx:SolidColor color="0xFFFFFF" alpha="0"/>
                </mx:fill>
           </mx:ColumnSeries>
           <mx:ColumnSeries yField="bottom" displayName="Profit"/>
           <mx:ColumnSeries yField="middle" displayName="Expenses"/>
           <mx:ColumnSeries yField="top" displayName="Profit"/>
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。