flex lineChart中自定义datatip

原文 http://www.giser.net/?p=776

在Flex4中使用lineChart会遇到一个bug，datatip上的背景是黑色的，造成文字看不清楚，和整体界面不协调。

那么解决这个问题需要自定义datatip，不使用默认的datatip。

下面的代码自定义一个datatip，在updateDisplayList函数中来定义datatip中要显示的内容和背景颜色

package
{
	import mx.charts.chartClasses.DataTip;
	import mx.charts.*;
	import flash.display.*;
	import flash.geom.Matrix;
	import flash.text.TextField;     

	public class MyDataTip extends DataTip {

		// The title is renderered in a TextField.
		private var myText:TextField; 

		public function MyDataTip() {
			super();
		}       

		override protected function createChildren():void{
			super.createChildren();
			myText = new TextField();
		}

		override protected function updateDisplayList(w:Number, h:Number):void {
			super.updateDisplayList(w, h);

			// The data property provides access to the data tip's text.
			if(data.hasOwnProperty('text')) {
				myText.text = data.text;
			} else {
				myText.text = data.toString();
			}

			this.setStyle("textAlign","center");
			var g:Graphics = graphics;
			g.clear();
			var m:Matrix = new Matrix();
			m.createGradientBox(w+100,h,0,0,0);
			g.beginGradientFill(GradientType.LINEAR,[0xFFFFFF,0xFFFFFF],
				[.1,1],[0,255],m,null,null,0);
			g.drawRect(-50,0,w+100,h);
			g.endFill();
		}
	}
}

在lineChart的createComplete函数中调用下面的方法，应用这个新的datatip

linechart.setStyle("dataTipRenderer",MyDataTip);