修改chart的DataTip样式

flex lineChart中自定义datatip
November 7, 2011barry.z
在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);