チャートデータの定義
チャートコントロールには、チャートのデータを定義する dataProvider プロパティがあります。データプロバイダは、Flex コンポーネントとそのコンポーネントに格納されるデータとの間に抽象レベルを作成します。同じデータプロバイダから複数のチャートにデータを提供したり、チャートのデータプロバイダを実行時に切り替えたりできます。また、データプロバイダを修正することで、同じデータプロバイダを使用するすべてのチャートにその修正結果を反映できます。
チャートデータの使用
チャートコントロールでデータプロバイダのデータを使用するには、チャート系列の xField プロパティと yField プロパティにデータプロバイダのフィールドを指定します。xField プロパティでは水平軸のデータを定義し、yField プロパティでは垂直軸のデータを定義します。
例えば、次のような構造のデータプロバイダがあるとします。
{Month: "Feb", Profit: 1000, Expenses: 200, Amount: 60}
この構造の Profit フィールドと Expenses フィールドを使用し、Month フィールドを無視する場合は、次の例のように、系列オブジェクトの xField プロパティに 1 つのフィールドを指定し、yField プロパティにもう 1 つのフィールドを指定します。
<mx:PlotSeries xField="Profit" yField="Expenses"/>
こうすると、データプロバイダの Profit フィールドと Expenses フィールドの交点がデータポイントになります。
データポイントを目的に合わせてグループ化するために、データプロバイダの別のプロパティを categoryField として選択できます。この例でデータポイントを月別に並び替えるには、次のように、Month フィールドを水平軸の categoryField プロパティに割り当てます。
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
</mx:horizontalAxis>
チャートのタイプや表示するデータの種類によっては、xField プロパティと yField プロパティのどちらか一方を使用してデータ系列を定義します。例えば、ColumnChart コントロールでは、yField プロパティを使用して縦棒の高さを定義します。xField プロパティを指定する必要はありません。個々の縦棒に対する軸ラベルが必要な場合は、horizontalAxis の categoryField プロパティを指定します。
データプロバイダには複雑なオブジェクト（オブジェクト内のオブジェクト）を含めることができます。例えば、データプロバイダオブジェクトを次のような構造にすることが可能です。
{month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}
この場合は、categoryField、xField、またはこれらと同様のフラットな命名法を使用してデータプロバイダのフィールドを単純に参照することはできません。代わりに、系列または軸の dataFunction を使用してデータプロバイダにドリルダウンします。複雑なデータの操作の詳細については、チャートデータの構造を参照してください。
チャートデータを使用するときは、次の事項に注意します。
- 系列を表示する必要がある場合、通常は系列とデータプロバイダフィールドを一致させます。だだし、例外もあります。ColumnSeries では、xField を指定しない場合、インデックスが値であると見なされます。yField を指定しない場合は、y 値を持つオブジェクトのコレクションではなく、y 値のコレクションがデータプロバイダであると見なされます。例えば、次の系列は ColumnChart コントロールで正しくレンダリングされます。
<mx:ColumnSeries dataProvider="{[1,2,3,4,5]}"/>
- 系列には、データプロバイダのフィールドを 1 つのみ使用するものと、複数使用できるものがあります。例えば、PieSeries オブジェクトの場合は field プロパティのみを指定しますが、PlotSeries オブジェクトの場合は xField と yField、BubbleSeries オブジェクトの場合は xField、yField、および radiusField を指定できます。
- ほとんどの系列では、主要な次元以外についてフィールドが指定されていない場合は適切なデフォルト値が選択されます。例えば、ColumnSeries 系列、LineSeries 系列、および AreaSeries 系列に対して xField を明示的に設定しない場合は、データプロバイダに格納されている順に、データがチャートのカテゴリに割り当てられます。BarSeries でも同様に、yField を設定しない場合はデータがカテゴリに割り当てられます。
各データ系列で使用できるすべてのフィールドの一覧については、『Adobe Flex リファレンスガイド』のデータ系列の項目を参照してください。データプロバイダの詳細については、データプロバイダコントロールを参照してください。
チャートデータのソース
データプロバイダには次の方法でデータを提供できます。
- <mx:Script> ブロックで定義する。
- 外部 XML、ActionScript、またはテキストファイルで定義する。
- WebService 呼び出しを使用して返す。
- RemoteObject コンポーネントを使用して返す。
- HTTPService コンポーネントを使用して返す。
- MXML で定義する。
チャートデータの構造、およびチャートデータが複雑なオブジェクトで構成されている場合のチャートデータの参照方法には、いくつかの制限があります。詳細については、チャートデータの構造を参照してください。
データプロバイダの詳細については、データプロバイダおよびコレクションの使用を参照してください。
データプロバイダとしての静的配列の使用
データプロバイダの最も簡単な実装方法は、オブジェクトの静的配列を使用することです。通常は、次の例のようにオブジェクトの配列を作成します。
<?xml version="1.0"?>
<!-- charts/ArrayOfObjectsDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expenses:Array = [
{Month:"January",Profit:2000,Expenses:1500,Amount:450},
{Month:"February",Profit:1000,Expenses:200,Amount:600},
{Month:"March",Profit:1500,Expenses:500,Amount:300},
{Month:"April",Profit:500,Expenses:300,Amount:500},
{Month:"May",Profit:1000,Expenses:450,Amount:250},
{Month:"June",Profit:2000,Expenses:500,Amount:700}
];
]]></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 ファイルは以下のとおりです。
次の例のように、MXML を使用して配列の内容を定義することもできます。
<?xml version="1.0"?>
<!-- charts/ArrayOfMXMLObjectsDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Array id="expenses">
<mx:Object
Month="January"
Profit="2000"
Expenses="1500"
Amount="450"
/>
<mx:Object
Month="February"
Profit="1000"
Expenses="200"
Amount="600"
/>
<mx:Object
Month="March"
Profit="1500"
Expenses="500"
Amount="300"
/>
<mx:Object
Month="April"
Profit="500"
Expenses="300"
Amount="500"
/>
<mx:Object
Month="May"
Profit="1000"
Expenses="450"
Amount="250"
/>
<mx:Object
Month="June"
Profit="2000"
Expenses="500"
Amount="700"
/>
</mx:Array>
<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 ファイルは以下のとおりです。
また、次の例に示すように、MXML でさらに多くのシンタックスを使用してオブジェクトを定義することもできます。
<?xml version="1.0"?>
<!-- charts/ArrayOfVerboseMXMLObjects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Array id="expenses">
<mx:Object>
<mx:Month>January</mx:Month>
<mx:Profit>2000</mx:Profit>
<mx:Expenses>1500</mx:Expenses>
<mx:Amount>450</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>February</mx:Month>
<mx:Profit>1000</mx:Profit>
<mx:Expenses>200</mx:Expenses>
<mx:Amount>600</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>March</mx:Month>
<mx:Profit>1500</mx:Profit>
<mx:Expenses>500</mx:Expenses>
<mx:Amount>300</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>April</mx:Month>
<mx:Profit>500</mx:Profit>
<mx:Expenses>300</mx:Expenses>
<mx:Amount>300</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>May</mx:Month>
<mx:Profit>1000</mx:Profit>
<mx:Expenses>450</mx:Expenses>
<mx:Amount>250</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>June</mx:Month>
<mx:Profit>2000</mx:Profit>
<mx:Expenses>500</mx:Expenses>
<mx:Amount>700</mx:Amount>
</mx:Object>
</mx:Array>
<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 ファイルは以下のとおりです。
チャートのデータプロバイダとして単純な配列を使用する方法の短所は、データを操作するのに Array クラスのメソッドしか使用できないことです。また、データプロバイダとして配列を使用する場合、その中のデータは静的にする必要があります。配列をバインド可能にしても、配列のデータの変更はチャートに反映されません。より堅牢なデータ操作とデータバインディングを行うには、チャートのデータプロバイダにコレクションを使用します。データプロバイダとしてのコレクションの使用を参照してください。
データプロバイダとしてのコレクションの使用
コレクションは配列よりも堅牢なデータプロバイダとなります。オブジェクトの挿入や削除だけでなく、ソートやフィルタリングの操作も可能です。コレクションは変更通知もサポートします。ArrayCollection オブジェクトを使用すると、ICollectionView または IList インターフェイスとして配列を簡単に公開できます。
次の例のように、配列と同様に MXML を使用してコレクションの内容を定義できます。
<?xml version="1.0"?>
<!-- charts/ArrayCollectionOfMXMLObjectsDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ArrayCollection id="expenses">
<mx:Object
Month="January"
Profit="2000"
Expenses="1500"
Amount="450"
/>
<mx:Object
Month="February"
Profit="1000"
Expenses="200"
Amount="600"
/>
<mx:Object
Month="March"
Profit="1500"
Expenses="500"
Amount="300"
/>
<mx:Object
Month="April"
Profit="500"
Expenses="300"
Amount="500"
/>
<mx:Object
Month="May"
Profit="1000"
Expenses="450"
Amount="250"
/>
<mx:Object
Month="June"
Profit="2000"
Expenses="500"
Amount="700"
/>
</mx:ArrayCollection>
<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 ファイルは以下のとおりです。
MXML でオブジェクトを定義する際、属性ではなく子タグを使用することもできます。
<?xml version="1.0"?>
<!-- charts/ArrayCollectionOfVerboseMXMLObjects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ArrayCollection id="expenses">
<mx:Object>
<mx:Month>January</mx:Month>
<mx:Profit>2000</mx:Profit>
<mx:Expenses>1500</mx:Expenses>
<mx:Amount>450</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>February</mx:Month>
<mx:Profit>1000</mx:Profit>
<mx:Expenses>200</mx:Expenses>
<mx:Amount>600</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>March</mx:Month>
<mx:Profit>1500</mx:Profit>
<mx:Expenses>500</mx:Expenses>
<mx:Amount>300</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>April</mx:Month>
<mx:Profit>500</mx:Profit>
<mx:Expenses>300</mx:Expenses>
<mx:Amount>300</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>May</mx:Month>
<mx:Profit>1000</mx:Profit>
<mx:Expenses>450</mx:Expenses>
<mx:Amount>250</mx:Amount>
</mx:Object>
<mx:Object>
<mx:Month>June</mx:Month>
<mx:Profit>2000</mx:Profit>
<mx:Expenses>500</mx:Expenses>
<mx:Amount>700</mx:Amount>
</mx:Object>
</mx:ArrayCollection>
<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 ファイルは以下のとおりです。
ActionScript で ArrayCollection オブジェクトを作成できます。この方法で ArrayCollection を定義する場合は、次の例のように、mx.collections.ArrayCollection クラスを読み込む必要があります。
<?xml version="1.0"?>
<!-- charts/ArrayCollectionOfObjects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expenses:ArrayCollection = new ArrayCollection([
{Month:"January", Profit:2000, Expenses:1500, Amount:450},
{Month:"February", Profit:1000, Expenses:200, Amount:600},
{Month:"March", Profit:1500, Expenses:500, Amount:300},
{Month:"April", Profit:500, Expenses:300, Amount:500},
{Month:"May", Profit:1000, Expenses:450, Amount:250},
{Month:"June", Profit:2000, Expenses:500, Amount:700}
]);
]]></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 ファイルは以下のとおりです。
データを配列に格納している場合は、その配列を ArrayCollection のコンストラクタに渡すことによって、ArrayCollection に変換できます。次の例では、配列を作成してそれを ArrayCollection に変換しています。
<?xml version="1.0"?>
<!-- charts/ArrayConvertedToArrayCollection.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
private var expenses:Array = [
{Month:"January", Profit:2000, Expenses:1500, Amount:450},
{Month:"February", Profit:1000, Expenses:200, Amount:600},
{Month:"March", Profit:1500, Expenses:500, Amount:300},
{Month:"April", Profit:500, Expenses:300, Amount:500},
{Month:"May", Profit:1000, Expenses:450, Amount:250},
{Month:"June", Profit:2000, Expenses:500, Amount:700}
];
[Bindable]
public var expensesAC:ArrayCollection =
new ArrayCollection(expenses);
]]></mx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expensesAC}">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expensesAC}"
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 ファイルは以下のとおりです。
同様に、<mx:ArrayCollection> タグを使用して変換することもできます。
<?xml version="1.0"?>
<!-- charts/ArrayConvertedToArrayCollectionMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expenses:Array = [
{Month:"January", Profit:2000, Expenses:1500, Amount:450},
{Month:"February", Profit:1000, Expenses:200, Amount:600},
{Month:"March", Profit:1500, Expenses:500, Amount:300},
{Month:"April", Profit:500, Expenses:300, Amount:500},
{Month:"May", Profit:1000, Expenses:450, Amount:250},
{Month:"June", Profit:2000, Expenses:500, Amount:700}
];
]]></mx:Script>
<mx:ArrayCollection id="expensesAC" source="{expenses}"/>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart" dataProvider="{expensesAC}">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expensesAC}"
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 ファイルは以下のとおりです。
ArrayCollections のデータはチャートのデータプロバイダにバインドできるので、リアルタイムで更新できます。次の例では、経過時間と 1 秒ごとの総メモリ使用量を保持するオブジェクトを作成します。次に、その新しいオブジェクトを、折れ線グラフのデータプロバイダとして使用する ArrayCollection にプッシュします。その結果、チャート自体が 1 秒ごとに更新され、Adobe® Flash® Player または Adobe® AIR™ の経時的なメモリ使用量が表示されます。
<?xml version="1.0"?>
<!-- charts/RealTimeArrayCollection.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize=
"initTimer()">
<mx:Script><![CDATA[
import flash.utils.Timer;
import flash.events.TimerEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var memoryUsage:ArrayCollection = new ArrayCollection();
public function initTimer():void {
// The first parameter in the Timer constructor
// is the interval, in milliseconds.
// The second parameter is how many times to run (0 is
// infinity).
var myTimer:Timer = new Timer(1000, 0);
// Add the listener for the timer event.
myTimer.addEventListener("timer", timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
var o:Object = new Object();
// Get the number of milliseconds since Flash Player or AIR started.
o.time = getTimer();
// Get the total memory Flash Player or AIR is using.
o.memory = flash.system.System.totalMemory;
trace(o.time + ":" + o.memory);
// Add new object to the ArrayCollection, which is bound
// to the chart's data provider.
memoryUsage.addItem(o);
}
]]></mx:Script>
<mx:LineChart id="chart" dataProvider="{memoryUsage}"
showDataTips="true">
<mx:horizontalAxis>
<mx:LinearAxis/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="5000000"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="memory"/>
</mx:series>
</mx:LineChart>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
データコレクションではページング（アプリケーションからの要求に応じてデータをまとめてクライアントに送信すること）が可能です。ただし、デフォルトでは Flex チャートコントロールには常時すべてのデータが表示されます。このため、チャートでデータコレクションを使用する場合は、ページング機能を無効にするか、チャートデータとして使用するデータコレクションをページングビューで表示しないようにしてください。コレクションの使用の詳細については、データプロバイダおよびコレクションの使用を参照してください。
データプロバイダとしての XML ファイルの使用
構造化ファイルでデータプロバイダのデータを定義できます。次の例は、data.xml ファイルの内容を示します。
<data>
<result month="Jan-04">
<apple>81768</apple>
<orange>60310</orange>
<banana>43357</banana>
</result>
<result month="Feb-04">
<apple>81156</apple>
<orange>58883</orange>
<banana>49280</banana>
</result>
</data>
次の例に示すように、このファイルはモデルのソースとして直接ロードできます。
<?xml version="1.0"?>
<!-- charts/XMLFileDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="results" source="../assets/data.xml"/>
<mx:Panel title="Line Chart">
<mx:LineChart id="chart" dataProvider="{results.result}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="banana" displayName="Banana"/>
<mx:LineSeries yField="apple" displayName="Apple"/>
<mx:LineSeries yField="orange" displayName="Orange"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
さらに複雑な XML を使用してデータプロバイダのデータを定義できます。例えば、XML ベースのデータプロバイダではタグをネストすることができます。ただし、その場合は dataFunction を使用してチャートで使用するフィールドを定義する必要があります。詳細については、チャートデータの構造を参照してください。
ArrayCollection をチャートのデータプロバイダとして使用するには、次の例に示すように、モデルを ArrayCollection に変換します。
<?xml version="1.0"?>
<!-- charts/XMLFileToArrayCollectionDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Script>
import mx.utils.ArrayUtil;
</mx:Script>
<mx:Model id="results" source="../assets/data.xml"/>
<mx:ArrayCollection id="myAC"
source="{ArrayUtil.toArray(results.result)}"
/>
<mx:Panel title="Line Chart">
<mx:LineChart id="chart" dataProvider="{myAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="banana" displayName="Banana"/>
<mx:LineSeries yField="apple" displayName="Apple"/>
<mx:LineSeries yField="orange" displayName="Orange"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
また、次の例のように、XML ファイルを HTTPService コンポーネントの URL として定義し、HTTPService の結果をチャートのデータプロバイダに直接バインドすることもできます。
<?xml version="1.0"?>
<!-- charts/HTTPServiceDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" creationComplete="srv.send()">
<mx:HTTPService id="srv" url="../assets/data.xml"/>
<mx:Panel title="Line Chart">
<mx:LineChart id="chart"
dataProvider="{srv.lastResult.data.result}"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="apple" name="Apple"/>
<mx:LineSeries yField="orange" name="Orange"/>
<mx:LineSeries yField="banana" name="Banana"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ArrayCollection を使用するには、次の例のように、HTTPService の結果を ArrayCollection に変換します。
<?xml version="1.0"?>
<!-- charts/HTTPServiceToArrayCollectionDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myData:ArrayCollection;
]]></mx:Script>
<mx:HTTPService
id="srv"
url="../assets/data.xml"
useProxy="false"
result="myData=ArrayCollection(srv.lastResult.data.result)"
/>
<mx:Panel title="Line Chart">
<mx:LineChart id="chart" dataProvider="{myData}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="apple" name="Apple"/>
<mx:LineSeries yField="orange" name="Orange"/>
<mx:LineSeries yField="banana" name="Banana"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
また、次の例のように HTTPService の結果の形式を E4X に設定し、E4X を XMLListCollection オブジェクトのソースとして使用することもできます。
<?xml version="1.0"?>
<!-- charts/HTTPServiceToXMLListCollection.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srv.send()">
<mx:Script><![CDATA[
import mx.utils.ArrayUtil;
]]></mx:Script>
<mx:HTTPService id="srv"
url="../assets/data.xml"
resultFormat="e4x"
/>
<mx:XMLListCollection id="myAC"
source="{srv.lastResult.result}"
/>
<mx:Panel title="Line Chart">
<mx:LineChart id="chart" dataProvider="{myAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries yField="apple" name="Apple"/>
<mx:LineSeries yField="orange" name="Orange"/>
<mx:LineSeries yField="banana" name="Banana"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
チャートデータのランダムな生成
サンプルチャートで使用するデータを作成するには、ランダムにデータを生成する方法が便利です。次の例では、チャートコントロールで使用するテストデータを生成しています。
<?xml version="1.0"?>
<!-- charts/RandomDataGeneration.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.collections.*;
// Define data provider array for the chart data.
[Bindable]
public var dataSet:ArrayCollection;
// Define the number of elements in the array.
public var dsLength:Number = 10;
public function initApp():void {
// Initialize data provider array.
dataSet = new ArrayCollection(genData());
}
public function genData():Array {
var result:Array = [];
for (var i:int=0;i<dsLength;i++) {
var localVals:Object = {
valueA:Math.random()*100,
valueB:Math.random()*100,
valueX:Math.random()*100,
valueY:Math.random()*100
};
// Push new object onto the data array.
result.push(localVals);
}
return result;
}
]]></mx:Script>
<mx:Panel title="Plot Chart">
<mx:PlotChart id="myChart" dataProvider="{dataSet}">
<mx:series>
<mx:PlotSeries
xField="valueX"
yField="valueY"
displayName="Series 1"
/>
<mx:PlotSeries
xField="valueA"
yField="valueB"
displayName="Series 2"
/>
</mx:series>
</mx:PlotChart>
<mx:Legend id="l1" dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
チャートデータの構造
ほとんどの場合、チャートのデータプロバイダとして使用するデータはスカラー値で構成されます。例えば、オブジェクトには次のように 1 組のフィールドが含まれます。
{month: "Aug", close: 45.87, open:25.19},
XML データには、フラットな構造の 1 組の子タグが含まれます。
<stock>
<month>Aug</month>
<close>45.87</close>
<open>25.19</open>
</stock>
これらの場合は、系列の xField と yField、または軸の categoryField を使用して、データプロバイダのフィールドをチャートのアイテムに割り当てます。次に例を示します。
<mx:ColumnSeries yField="close"/> <mx:CategoryAxis categoryField="month"/>
ただし、チャートデータの構造をさらに複雑なオブジェクト（オブジェクト内のオブジェクトや、ネストされた子タグを持つ XML など）で構成することも可能です。例えば、オブジェクトの中にオブジェクトを埋め込むことができます。
{month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}
XML オブジェクトでネストされたタグを使用することもできます。
<stock>
<date>
<month>Aug</month>
</date>
<price>
<close>45.87</close>
<open>25.19</open>
</price>
</stock>
これらの場合は、yField="close" のようなフラットな命名法を使用してターゲットデータを参照することはできません。また、ドット表記も使用できません。例えば、yField="values.close" や categoryField="data.month" は無効です。代わりに dataFunction メソッドを使用して、データプロバイダからどの ChartItem フィールドにデータを取り込むかを定義する必要があります。
CategoryAxis クラスでは、dataFunction のシグネチャは次のとおりです。
function_name(axis:AxisBase, item:Object):Object
ここで、「axis」は現在の軸の基本クラス、「item」はデータプロバイダのアイテムを示します。
Series クラスでは、dataFunction のシグネチャは次のとおりです。
function_name(series:Series, item:Object, fieldName:String):Object
ここで、「series」は現在の系列への参照、「item」はデータプロバイダのアイテム、「fieldName」は現在の ChartItem の、データを取り込むフィールドを示します。
次の例では、複雑なデータにアクセスして軸用のデータと系列用のデータを返す 2 つの関数を作成しています。
<?xml version="1.0"?>
<!-- charts/DataFunctionExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script><![CDATA[
import mx.charts.chartClasses.AxisBase;
import mx.charts.chartClasses.Series;
import mx.charts.CategoryAxis;
import mx.charts.chartClasses.IAxis;
import mx.charts.chartClasses.ChartBase;
import mx.charts.chartClasses.CartesianTransform;
// This data provider contains complex, nested objects.
[Bindable]
public var SMITH:Array = [
{month: "Aug", close: {High:45.87,Low:12.2}, open:25.19},
{month: "Sep", close: {High:45.74,Low:10.23}, open:35.29},
{month: "Oct", close: {High:45.77,Low:12.13}, open:45.19},
{month: "Nov", close: {High:46.06,Low:10.45}, open:15.59},
];
private function dataFunc(series:Series, item:Object, fieldName:String):Object {
trace("fieldName: " + fieldName);
if(fieldName == "yValue" && series.id=="highClose")
return(item.close.High);
else if(fieldName == "yValue" && series.id=="lowClose")
return(item.close.Low);
else if(fieldName == "xValue")
return(item.month);
else
return null;
}
private function catFunc(axis:AxisBase, item:Object):Object {
for (var s:String in item) {
trace(s + ":" + item[s]);
}
return(item.month);
}
]]></mx:Script>
<mx:ColumnChart id="chart"
dataProvider="{SMITH}"
showDataTips="true"
width="100%"
height="100%"
>
<mx:horizontalAxis>
<!-- The dataFunction replaces "categoryField='month'. -->
<mx:CategoryAxis id="h1" dataFunction="catFunc"/>
</mx:horizontalAxis>
<mx:series>
<!-- The dataFunction replaces yField value, which cannot drill
down into an object (close.High is not valid). -->
<mx:ColumnSeries id="highClose"
displayName="Close (High)"
dataFunction="dataFunc"
/>
<!-- The dataFunction replaces yField value, which cannot drill
down into an object (close.Low is not valid). -->
<mx:ColumnSeries id="lowClose"
displayName="Close (Low)"
dataFunction="dataFunc"
/>
</mx:series>
</mx:ColumnChart>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
実行時におけるチャートデータの変更
ActionScript を使用すると、様々な方法で実行時にチャートコントロールのデータを変更できます。
チャートまたは系列のデータプロバイダを変更できます。次の例では、データプロバイダをローカル変数にバインドしています。次に、ユーザーがボタンをクリックしたときに、そのローカル変数を使用してチャートのデータプロバイダを切り替えています。
<?xml version="1.0"?>
<!-- charts/ChangeDataProvider.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}
]);
[Bindable]
public var expenses2:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2400, Expenses:1509, Amount:950},
{Month:"Feb", Profit:3000, Expenses:2200, Amount:400},
{Month:"Mar", Profit:3500, Expenses:1200, Amount:200}
]);
[Bindable]
public var dp:ArrayCollection = expenses;
public function changeDataProvider():void {
if (dp==expenses) {
dp = expenses2;
} else {
dp = expenses;
}
}
]]></mx:Script>
<mx:Panel title="Line Chart">
<mx:LineChart id="myChart" dataProvider="{dp}">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{dp}"
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:Legend dataProvider="{myChart}"/>
<mx:Button label="Change Data Provider"
click="changeDataProvider()"
/>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
系列のデータポイントを追加または削除できます。次の例では、ユーザーがボタンをクリックしたときに、既存のデータプロバイダにアイテムを追加します。
<?xml version="1.0"?>
<!-- charts/AddDataItem.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var dpac:ArrayCollection = new ArrayCollection([
{A:2000},
{A:3000},
{A:4000},
{A:4000},
{A:3000},
{A:2000},
{A:6000}
]);
public function addDataItem():void {
var o:Object = {"A":2000};
dpac.addItem(o);
}
]]></mx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart"
height="400"
width="600"
dataProvider="{dpac}"
>
<mx:series>
<mx:ColumnSeries yField="A" displayName="Series 1"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:Button label="Add Data Item" click="addDataItem();"/>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
系列のフィールドを変更して、実行時にチャートデータを変更することもできます。そのためには、系列オブジェクトのデータプロバイダフィールド（xField や yField など）の値を変更します。系列への参照を取得するには、系列の id プロパティまたはチャートコントロールの series インデックスを使用します。次の例では、ユーザーが「Change Series」ボタンをクリックしたときにデータ系列を切り替えています。
<?xml version="1.0"?>
<!-- charts/ToggleSeries.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize=
"initApp();">
<mx:Script><![CDATA[
[Bindable]
public var dataSet:Array;
public var myStates:Array =
["Wisconsin","Ohio","Arizona","Penn"];
public var curSeries:String;
public function initApp():void {
var newData:Array = [];
for(var i:int=0;i<myStates.length;i++) {
newData[i] = {
Apples: Math.floor(Math.random()*150),
Oranges: Math.floor(Math.random()*150),
myState: myStates[i]
}
}
dataSet = newData;
curSeries = "apples";
}
public function changeData():void {
var series:Object = myChart.series[0];
if (curSeries == "apples") {
curSeries="oranges";
series.yField = "Oranges";
series.displayName = "Oranges";
series.setStyle("fill",0xFF9933);
} else {
curSeries="apples";
series.yField = "Apples";
series.displayName = "Apples";
series.setStyle("fill",0xFF0000);
}
}
]]></mx:Script>
<mx:Panel title="Column Chart">
<mx:ColumnChart id="myChart"
dataProvider="{dataSet}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{dataSet}"
categoryField="myState"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField="Apples"
displayName="Apples"
>
<mx:fill>
<mx:SolidColor color="0xFF0000"/>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:Button id="b1"
label="Change Series"
click="changeData()"
/>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
データバインディングを利用すると、データの変更をリアルタイムにチャートに反映できます。次の例では、Timer を使用して、新しいデータをチェックする時間間隔を定義します。チャートのデータプロバイダが ArrayCollection にバインドされているので、コレクションに新しいデータポイントが追加されるたびに、チャートが自動的に更新されます。
<?xml version="1.0"?>
<!-- charts/WatchingCollections.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initData();">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var dataSet:ArrayCollection;
[Bindable]
public var revenue:Number = 100;
private var t:Timer;
private function initData():void {
dataSet = new ArrayCollection();
t = new Timer(500);
t.addEventListener(TimerEvent.TIMER, addData);
t.start();
}
private function addData(e:Event):void {
dataSet.addItem( { revenue: revenue } );
revenue += Math.random() * 10 - 5;
}
]]></mx:Script>
<mx:SeriesInterpolate id="interp"
elementOffset="0"
duration="300"
minimumElementDuration="0"
/>
<mx:Panel title="Line Chart">
<mx:LineChart id="myChart" dataProvider="{dataSet}">
<mx:series>
<mx:LineSeries
yField="revenue"
showDataEffect="{interp}"
/>
</mx:series>
<mx:horizontalAxis>
<mx:LinearAxis autoAdjust="false"/>
</mx:horizontalAxis>
</mx:LineChart>
</mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
また、システム値を使用して実行時にチャートを更新することもできます。次の例では、LineChart コントロールの totalMemory プロパティの値をリアルタイムに追跡します。
<?xml version="1.0"?>
<!-- charts/MemoryGraph.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize=
"initTimer()">
<mx:Script><![CDATA[
import flash.utils.Timer;
import flash.events.TimerEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var memoryUsage:ArrayCollection = new ArrayCollection();
public function initTimer():void {
// The first parameter in the Timer constructor
// is the interval, in milliseconds. The second
// parameter is how many times to run (0 is
// infinity).
var myTimer:Timer = new Timer(1000, 0);
// Add the listener for the timer event.
myTimer.addEventListener("timer", timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
var o:Object = new Object();
// Get the number of milliseconds since Flash
// Player started.
o.time = getTimer();
// Get the total memory Flash Player is using.
o.memory = flash.system.System.totalMemory;
// Add new object to the ArrayCollection, which
// is bound to the chart's data provider.
memoryUsage.addItem(o);
}
]]></mx:Script>
<mx:LineChart id="chart"
dataProvider="{memoryUsage}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:LinearAxis/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="5000000"/>
</mx:verticalAxis>
<mx:series>
<mx:Array>
<mx:LineSeries yField="memory"/>
</mx:Array>
</mx:series>
</mx:LineChart>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート