Flex チャートコントロールを使用して、数種類の一般的な形式のチャート（グラフ）を作成できます。作成したチャートの外観をカスタマイズすることもできます。チャートコントロールは、mx.charts.* パッケージに含まれています。

次の表は、サポートされているチャートのタイプと、それぞれのチャートに表示するデータの定義に使用するコントロールのクラス名と系列クラス名の一覧です。

チャートタイプ	チャートコントロールクラス	チャート系列クラス
面グラフ	AreaChart	AreaSeries
横棒グラフ	BarChart	BarSeries
バブルチャート	BubbleChart	BubbleSeries
ローソク足チャート	CandlestickChart	CandlestickSeries
縦棒グラフ	ColumnChart	ColumnSeries
HighLowOpenClose チャート	HLOCChart	HLOCSeries
折れ線グラフ	LineChart	LineSeries
円グラフ	PieChart	PieSeries
プロットチャート	PlotChart	PlotSeries

PieChart クラス以外のチャートコントロールはすべて、CartesianChart クラスのサブクラスです。Cartesian チャートは一般的に、長方形の 2 次元領域に一連のデータポイントを表すチャートです。PieChart クラスは PolarChart クラスのサブクラスです。PolarChart クラスは円形の領域にデータを表します。

チャートコントロールはすべて、ChartBase クラスの基本的なチャート特性を継承しています。

MXML でチャートコントロールを記述する場合、通常は次のような構造になります。

<mx:ChartName>
    <!-- Define one or more series. -->
    <mx:SeriesName/>

    <!-- Define the axes. -->
    <mx:horizontalAxis>
        <mx:axis_type/>
    </mx:horizontalAxis>
    <mx:verticalAxis>
        <mx:axis_type/>
    </mx:verticalAxis>

    <!-- Style the axes and ticks marks. -->
    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer/>
    </mx:horizontalAxisRenderers>
    <mx:verticalAxisRenderers>
        <mx:AxisRenderer/>
    </mx:verticalAxisRenderers/>

    <!-- Add grid lines and other elements to the chart. -->
    <mx:annotationElements>
        <mx:Array/>
    </mx:annotationElements>
    <mx:backgroundElements>
        <mx:Array/>
    </mx:backgroundElements/>
</mx:ChartName>

<!-- Optionally define the legend. -->
<mx:Legend/>

次の表で、チャートの各部分を詳細に説明します。

部分	説明
Chart	（必須）チャートのデータプロバイダを 1 つまたは 2 つ定義します。チャートのタイプも定義し、データヒント、マウス感度、ふち取りのスタイル、および軸のスタイルを設定します。 これはチャートコントロールの最上位のタグです。他のタグはすべて、このタグの子タグです。
Series	（必須）チャートに表示するデータ系列を 1 つまたは複数定義します。線、塗り、データ系列のレンダラー（スキン）を設定し、各系列のチャート凡例で使用される線と塗りも設定します。 それぞれのチャートに 2 番目の系列を定義して、1 つのチャートに複数のデータ系列を表示することもできます。 チャートの各系列には、固有のデータプロバイダを設定できます。
Axes	軸のタイプ（数値またはカテゴリ）を設定します。軸のラベル、タイトル、追加スペースなどのスタイルプロパティも定義します。 2 番目の系列セットがある場合は、その系列の軸を定義することもできます。
AxesRenderer	（オプション）目盛りの配置とスタイルを設定し、ラベルの有効/無効を切り替えます。また、軸線、ラベルの回転、ラベル間隔を定義します。 2 番目の系列がある場合は、その系列の軸レンダラーを定義することもできます。
Elements	（オプション）チャートに表示されるグリッド線などのエレメントを定義します。

Flex では、チャートタイプごとに、対応するチャートコントロールとチャート系列があります。チャートコントロールでは、チャートタイプ、チャートデータを提供するデータプロバイダ、グリッド線、チャートの軸に表示するテキストなどのチャートタイプに固有のプロパティを定義します。チャートコントロールの dataProvider プロパティは、チャートでどのデータを使用するかを指定します。

データプロバイダはオブジェクトのコレクションです。データプロバイダには、オブジェクトの配列や Collection API を実装するオブジェクトを指定できます。また、E4X クエリの結果など、XML ノードを持つ XMLList オブジェクトもデータプロバイダにすることができます。

チャートコンポーネントでは、1 次元配列と同様のフラットな（リストベースの）データプロバイダを使用します。データプロバイダには、ストリングや数値などのオブジェクトだけでなく、それ以外のオブジェクトを含めることもできます。チャートのデータプロバイダの詳細については、チャートデータの定義を参照してください。

チャート系列では、データプロバイダのどのデータをチャートに表示するかを指定します。データプロバイダにはチャートに不要なデータも含まれている場合があるので、チャート系列を使用して、データプロバイダのどの項目を使用するかを指定します。データ系列は 1 つまたは 2 つ指定できます。また、チャート内のデータの外観も、チャート系列で定義できます。

チャート系列でデータプロバイダが明示的に設定されていない場合は、チャートからデータプロバイダが継承されます。dataProvider プロパティの値をチャートコントロールに設定している場合は、プロパティの値を系列に設定する必要はありません。ただし、チャートのそれぞれの系列に異なるデータプロバイダを定義することもできます。

例えば、円グラフを作成する場合は、PieChart コントロールと PieSeries チャート系列を使用します。面グラフを作成する場合は、次の例のように、AreaChart コントロールと AreaSeries チャート系列を使用します。

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

この例では、<mx:AreaSeries> タグを 1 つだけ含む配列を定義します。<mx:AreaSeries> タグで、面グラフに表示するデータ系列を 1 つ指定しています。

次の例のように、<mx:AreaSeries> タグをもう 1 つ追加すると、面グラフに 2 つのデータ系列を表示できます。

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

データプロバイダはチャートコントロールに対して定義する必要はありません。次の例のように、それぞれの系列に固有のデータプロバイダを設定できます。

<?xml version="1.0"?>
<!-- charts/MultipleDataProviders.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var profit04:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000},
        {Month:"Feb", Profit:1000},
        {Month:"Mar", Profit:1500}
     ]);
     [Bindable]
     public var profit05:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2200},
        {Month:"Feb", Profit:1200},
        {Month:"Mar", Profit:1700}
     ]);
     [Bindable]
     public var profit06:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2400},
        {Month:"Feb", Profit:1400},
        {Month:"Mar", Profit:1900}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{profit04}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="Month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                dataProvider="{profit04}" 
                yField="Profit"
                xField="Month" 
                displayName="2004"
           />
           <mx:ColumnSeries 
                dataProvider="{profit05}" 
                yField="Profit"
                xField="Month" 
                displayName="2005"
           />
           <mx:ColumnSeries 
                dataProvider="{profit06}" 
                yField="Profit"
                xField="Month" 
                displayName="2006"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ブラウザウィンドウのサイズに合わせてチャートのサイズが動的に変更されるようにするには、次の例のように width と height の属性をパーセントで指定します。

<?xml version="1.0"?>
<!-- charts/BasicBarSize.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="Bar Chart" height="500" width="500">
     <mx:BarChart id="myChart" 
        dataProvider="{expenses}" 
        height="100%"
        width="100%"
     >
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:BarSeries 
                yField="Month" 
                xField="Profit" 
                displayName="Profit"
           />
           <mx:BarSeries 
                yField="Month" 
                xField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:BarChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ウィンドウのサイズが変更されたときにチャートのサイズも変更する場合は、チャートの親コンテナのサイズもパーセントで設定します。