Flex 学习笔记 datatip的背景颜色

Chart控件中datatip背景颜色和字体默认都为黑色，很不直观，可通过下面两个方法实现背景颜色修改

 

方法一：添加css定义：

  参考：http://www.haogongju.net/art/852901

@namespace chartClasses "mx.charts.chartClasses.*"; 
chartClasses|DataTip{
    backgroundColor:white;   
    fontSize: 12;  
}

 方法二：设置dataTipRenderer

   参考：http://www.giser.net/?p=776 

 

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