ChartElement

ChartElementクラスは、Chartに対してラベルを表示したり、グリッドを表示したりするクラスの基本クラス。
このクラスを継承し、updateDisplayListをオーバーライドすると、描画時にChartから呼び出されます。

例えばマウスポインターに合わせて縦横のルーラーを出したい場合、

	import mx.charts.chartClasses.ChartElement;
	import flash.events.MouseEvent;
	import flash.geom.Point;

	public class Ruler extends ChartElement{
		public function Ruler():void{
			super();
			addEventListener(MouseEvent.MOUSE_MOVE,handleMouseMove);
			addEventListener(MouseEvent.MOUSE_OUT,handleMouseOut);			
		}
		private function handleMouseMove(e:MouseEvent):void{
			updateDisplayList(unscaledWidth,unscaledHeight);			
			var p:Point = new Point(this.mouseX,this.mouseY);
			graphics.lineStyle(2,0xFF0000,0.5);
			graphics.moveTo(0,p.y);
			graphics.lineTo(unscaledWidth,p.y);
			graphics.moveTo(p.x,0);
			graphics.lineTo(p.x,unscaledHeight);
		}
		private function handleMouseOut(e:MouseEvent):void{
			updateDisplayList(unscaledWidth,unscaledHeight);
		}
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{        	
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			graphics.clear();   
			graphics.moveTo(0,0);
			graphics.lineStyle(0,0x000000,0);
			graphics.beginFill(0x000000,0);
			graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
			graphics.endFill();
		}
	}

というクラスをつくります。
updaateDisplayListは、Chart描画時に呼び出されるメソッドで、Javaでいうpaintメソッドです。
ここではチャート領域いっぱいに透過度０のマスクを描画しています。
描画したところは自分の領域として認識される為、マスクを描画することでそこで発生する
イベントをキャッチすることが出来ます。

後はマウスイベントを拾って、マウスの位置を計算して描画するだけです。

最後に、このクラスをChartに対して「annotationElements」として登録します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
		<mx:ColumnChart >
			<mx:annotationElements>
				<local:Ruler/>
			</mx:annotationElements>
		</mx:ColumnChart>
</mx:Application>

サンプルはhttp://hatena.souko105.net/20080304/RulerSample.htmlから。