Flex2基礎講座（第7章　チャートコンポーネントの利用）1/2

第7章　チャートコンポーネントの利用

この章では、チャート(グラフ)コンポーネントについて説明します。
チャートコンポーネントは、チャートコンポーネント独自のライセンスが必要となります。

1.Flex2で使用することができるチャートコンポーネント

1. 主なチャートリスト
   

   チャート名	概要
   AreaChart	エリアチャート
   BarChart	水平方向の棒グラフ
   CandlestickChart	株価グラフ
   ColumnChart	垂直方向の棒グラフ
   LineChart	折れ線グラフ
   PieChart	円グラフ
   PlotChart	プロットチャート
   BubbleChart	バブルチャート

   
   
2. チャートイメージ　（クリックすると別ウィンドウで拡大）
   
   

2.グラフの作成

チャートコンポーネントはデータ分析などにおいてよく使われるコンポーネントです。

まず、基本的なチャート、棒グラフ(ColumnChart)の作成してみましょう。
棒グラフでは(他のグラフもそうですが)、単一のグラフを表示することも、複数のグラフを表示することもできます。ここでは、以下のようなデータを使って、月ごとの売り上げを表示するグラフを作成します。

データでは、Steeve、Scott、Andyの3人の1月、2月、3月の売り上げがあります。まず最初は、Steeveだけのデータを使った単一グラフを表示してみます。

1. FlexBuilderのデザインモードに移行し、ComponentsのChartからColumnGraphをデザインキャンバスにDrag&Dropします。
   
   
2. PopUpウィンドがあがりますので、以下のように設定します。
   →

   ---

   • ID:グラフに付けるid
   • Series element：表示するデータを指定(詳細は後述)
   • Include Legend：凡例を表示するかの指定
     
3. データバインディングの設定をプロパティ画面にて行います。
   
   
   バインドするデータは上記のsalesデータなので、それを登録します。
   
   
4. ソースモードへ移行します。現在ソースは以下のようになっています。
   
   
   DisplayNameは凡例に表示される名前を指定します。先ほどのPopUpで登録したものがここに反映されます。yFieldには、どのデータを使うのかを指定します。ここでは、Steeveのデータを使用するので、以下のように指定します。
   
   
   
5. X軸として使うデータが指定されていません。今回は月ごとの状況を表示するので、Monthデータを使用します。X軸を指定するためには、以下のような記述を追加します。
   
   
6. 以下が全ソースです。
   
   【サンプルソース】
   
   
   
7. これをコンパイルして表示すると以下のようになります。
   
   【画面イメージ】
   
   
   
8. displayName、バインド用データを変更して、日本語表示したものです。
   
   【画面イメージ】
   
   
   
9. 単一グラフの作成方法は上記のようになります。これは棒グラフ(BarChart)、折れ線グラフでも同様です。では、複数グラフを表示してみましょう。グラフデータは<mx:series>指定しました。このタグに表示したいデータを追加していきます。
   
   
   ※配列データ salesのScottをScottoに変更しています。
   
   
10. 表示されるグラフは以下のようになります。
    
    【画面イメージ】
    
    
    チャート上にマウスオーバさせることにより、チャートデータの内容を表示させることができます。
    これを行うためには、グラフタグに、showDataTipsプロパティを設定します。
    
    

3.重ね合わせグラフの作成

例えば、上記のグラフにおいて、各月の総計を表示したいとすると、棒グラフを1つ追加するか、または別のグラフを作成する必要があります。しかし、各月の総計は、折れ線グラフにして、この棒グラフ上に重ねることができたとしたらどうでしょうか？　Flexのグラフでは、このようなグラフの重ね合わせをすることができます。
以下に例を示します。

このグラフは、棒グラフ(ColumnChart)内に、折れ線グラフを表記することで実現しています。
以下に全ソースを示します。

【サンプルソース】

<mx:series>タグの中に、ColumnChart用の<mx:ColumnSeries>、<mx:LineSeries>タグの双方が記述されていることに注意してください。また、それぞれが異なるデータをバインディングしている点にも注意してください。<mx:ColumnSeries>は各自のデータが記述されている配列を、<mx:LineSeries>は、総計が記述されている配列がバインドされています。

4.二軸グラフの作成

重ね合わせグラフでは、各グラフが必要とするY軸エリアが大きく異なった場合、グラフ自体が極端に大きいものになってしまいます。上記重ね合わせグラフでも、折れ線グラフと棒グラフの間に不要な空間が開いています。このような無駄なエリアを削除するために、二軸のグラフを作成することができます。以下に二軸グラフの例を示します。

【画面イメージ】

【サンプルソース】

5.円グラフの作成

円グラフも、棒グラフ、折れ線グラフと同様の手順で作成することができます。以下にサンプルを示します。

【サンプルソース】

変更されているのは<mx:series>タグ内の<mx:PieSeries>です。
ここでは、円グラフに表示するデータ(field)や、凡例に表示するデータ(nameField)、ラベルの表示位置(labelPosition)を指定します。

以下にグラフのイメージを示します。

【グラフイメージ】

labalPositionで指定するラベル表示位置は、

• callout
• inside
• insideWithCallout
• none
• outside

から選択することができます。

ラベルの表記はlabelFunctionプロパティを使って変更することができます。これは、円グラフだけでなく、すべてのグラフで使用することができます。

以下にそのイメージを示します。

【ラベル表記を変更したグラフ】

【サンプルソース】

labelFunctionプロパティに呼び出しメソッドを指定します。この場合、引数は4つとなるようです。この呼び出されたメソッドの中でラベルのフォーマットを変更し、表示しています。

6.チャートイベントの取得

グラフはクリックされるとイベントを発生します。この時生成されるイベントオブジェクトには、クリックされた場所の情報などが入っています。
下の図ではクリックされた場所のデータをデータグリッドに表示しています。

【イベントイメージ】

クリックイベントは、itemClickで取得することができます。では、イベントの取得方法を見てみましょう。
クリックされた場所のデータは、イベントオブジェクトのhitData.itemに格納されています。これを使うには、mx.chart.HitDataクラスをインポートする必要があります。

右クリックでソースを表示します。

ページの先頭へ戻る