Chart コンポーネントのいろいろ

Flex3 の Chart 系コンポーネントの使い方メモ。日本語ではグラフと呼びますが、英語圏では Chart と呼ぶのが一般的なようです。

Chart にクリックイベントを設定

まず、対象 Chart の itemClick プロパティを設定します。サンプルは ColumnChart の場合なので、他の Chart を使う場合適宜書き換えて下さい。

<mx:ColumnChart id="column" 
  height="100%" 
  width="100%" 
  paddingLeft="5" 
  paddingRight="5" 
  showDataTips="true" 
  dataProvider="{monthlyCostArrayCollection}"
  selectionMode="single"
  type="stacked"
  itemClick="overData(event)"
>

次に、そのイベントを設定します。

private function overData(event:ChartItemEvent):void {
  var hitData:HitData = event.hitData;
  var item:ColumnSeriesItem = ColumnSeriesItem(ColumnSeriesItem(hitData.chartItem));
  var series:ColumnSeries = ColumnSeries(hitData.element);
  trace(item, series);
}

HitData.chartItem プロパティの戻り値は Chart の種類によらず ChartItem です。なので、必ず型変換が必要になります。

DataTip の変更

Chart 上のアイテムをマウスでポイントすると表示されるヒントもカスタムできます。先ほどの Chart に dataTipsFunction プロパティを追加します。

<mx:ColumnChart id="column" 
  height="100%" 
  width="100%" 
  paddingLeft="5" 
  paddingRight="5" 
  showDataTips="true" 
  dataTipFunction="formatColumnDataTip"
  dataProvider="{monthlyCostArrayCollection}"
  selectionMode="single"
  type="stacked"
  itemClick="overData(event)"
>

次に、このイベントを定義します。戻すのは String で、戻した値が表示されます。簡単な HTML タグも使えるようです。

private function formatColumnDataTip(hitData:HitData):String {
  return ColumnSeriesItem(hitData.chartItem).yValue.toString();
}

先ほど同様 HitData.chartItem を型変換するのを忘れないようにして下さい。また HitData から取得するプロパティも Chart の種類によって微妙に異なる（PieChart の場合 HitData.item で取得）ので注意して下さい。

Legend にイベントを設定する

凡例を意味する Legend 要素ですが、ここの例一つ一つから元になるデータ（ColumnSeries）を参照します。

private function init():void {
  for(var i:int = 0; i < legend.numChildren; i ++) {
    var child:* = legend.getChildAt(i);
    if(child is LegendItem) {
      child.addEventListener(MouseEvent.CLICK, legendClickHandler);
    }
  }
}

private function legendClickHandler(e:MouseEvent):void {
  trace(e.currentTarget.element);
}

Legend で表示される凡例の一つ一つは LegendItem になっており、その元となっている Series は LegendItem.element で取得できます。

カスタム Legend

自分で凡例項目を作成します。一つ一つの項目を自分で書くため、イベント設定も上のような工夫はいりません。

<mx:Legend>
  <mx:LegendItem label="Test">
    <mx:fill>
      <mx:SolidColor color="0x0000FF"/>
    </mx:fill>
    <mx:stroke>
      <mx:Stroke color="0xCCCCCC" weight="2"/>
    </mx:stroke>
  </mx:LegendItem>
</mx:Legend>

このように、元データに関係なく自分でラベルと色を決めて凡例を表示するだけのようです。