flex lineChart中自定义datatip

在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); 
This entry was posted in flex.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">