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