BLOG TOP

【Flex】PieChartのツールチップを自分で定義する方法

2010年2月14日

Flexには円グラフ表示が可能なPieChartと呼ばれるクラスがあります。 

これを利用すると、値とラベルを入力するだけで簡単に円グラフを作成でき、 

「showDataTips="true"」と指定するだけで円グラフにマウスオーバーしたときに、 データの情報を分かりやすく表示してくれたりします。

しかし、そのマウスオーバー時の情報を自分で表現したいときも多々出てきます。 例えば、直接入力した値は表示せず割合（パーセントの情報）のみでよいときなどです。

そんなときは、PieChartの「dataTipFunction」を使いましょう。


値としては、dataTipFunction="hogefunc"のように関数ポインタを渡します。 

後は、PieChartに渡っている値（例えばラベル名や値など）を参照する方法ですが、 

以下のようにすることで実現可能です。

1
2
3
4
5
6
private function hoge(e: HitData): String {
s: String = null;
s = "ラベル名: " + e.item.FIELD_NAME + "\n"
"フィールドの値: " + e.item.FIELD_VALUE;
return s;
}

ここで、「FIELD_NAME」と「FIELD_VALUE」は、PieSeriesの「name」属性や「nameField」属性で 与えた値です。