ColumnChart コントロールは、データ内の値によって高さが決まる一連の縦棒でデータを表します。ColumnChart コントロールを使用すると、単純な縦棒、集合縦棒、積み上げ、積み重ね、構成比、高低など、様々な形式の縦棒グラフを作成できます。詳細については、チャートの積み重ねを参照してください。

次の例は、2 つの系列を含む ColumnChart コントロールを示します。

縦棒グラフのデータを定義するには、ColumnChart コントロールと共に ColumnSeries チャート系列を使用します。次の表で、縦棒グラフを定義する ColumnSeries チャート系列のプロパティについて説明します。

次の例では、2 つの系列を含む ColumnChart コントロールを作成します。

<?xml version="1.0"?>
<!-- charts/BasicColumn.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}">
        <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="{myChart}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ColumnChart コントロールの縦棒のスタイルをカスタマイズするには、fill プロパティと stroke プロパティにそれぞれ SolidColor オブジェクトおよび Stroke オブジェクトを指定します。次の例では、カスタム SolidColor オブジェクトとカスタム Stroke オブジェクトを定義して、それらを ColumnChart コントロール内の ColumnSeries オブジェクトに適用しています。

<?xml version="1.0"?>
<!-- charts/BasicColumnFills.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>

    <!-- Define custom colors for use as column fills. -->
    <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
    <mx:SolidColor id="sc2" color="red" alpha=".3"/>

    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="blue" weight="2"/>
    <mx:Stroke id="s2" color="red" weight="2"/>

    <mx:Panel title="ColumnChart Control with Custom Column Styles">
        <mx:ColumnChart id="myChart" dataProvider="{expenses}">
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses}" 
                    categoryField="Month"
                />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries 
                    xField="Month" 
                    yField="Profit"
                    displayName="Profit"
                    fill="{sc1}"
                    stroke="{s1}"
                />
                <mx:ColumnSeries 
                    xField="Month" 
                    yField="Expenses"
                    displayName="Expenses"
                    fill="{sc2}"
                    stroke="{s2}"
                />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

塗りの使用の詳細については、チャートコントロールでの塗りの使用を参照してください。Stroke クラスの使用の詳細については、チャートコントロールでの線の使用を参照してください。

浮動縦棒グラフの作成

チャートのデータ系列の minField プロパティを使用して、浮動縦棒グラフを作成することもできます。このプロパティによって、縦棒の下端の値を設定できます。次に浮動 ColumnChart コントロールの例を示します。

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

<?xml version="1.0"?>
<!-- charts/MinFieldColumn.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", Revenue:1200, Expenses:500},
        {Month:"Feb", Revenue:1200, Expenses:550},
        {Month:"Mar", Revenue:1240, Expenses:475},
        {Month:"Apr", Revenue:1300, Expenses:600},
        {Month:"May", Revenue:1420, Expenses:575},
        {Month:"Jun", Revenue:1400, Expenses:600},
        {Month:"Jul", Revenue:1500, Expenses:600},
        {Month:"Aug", Revenue:1600, Expenses:750},
        {Month:"Sep", Revenue:1600, Expenses:735},
        {Month:"Oct", Revenue:1750, Expenses:750},
        {Month:"Nov", Revenue:1800, Expenses:800},
        {Month:"Dec", Revenue:2000, Expenses:850}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Floating Column Chart">
     <mx:ColumnChart 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
            />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                yField="Revenue" 
                minField="Expenses" 
                displayName="Revenue"
            />
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

詳細については、minField プロパティの使用を参照してください。