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);