Flex 4 Chart Legend

设置Legend的字体大小

直接设置 Legend的fontSize是没有用的。

可以通过扩展LegendItem类，并设置Legend的ItemClass属性来实现。
package{
     import mx.charts.LegendItem;
     public class BigFontLegendItem extends LegendItem{
              public function BigLegendItem(){
                    super();
                    this.styleName="ChineseFont";
              }
     }
}
//application中：
<mx:Style>
    .ChineseFont{
        fontFamily:"Verdana","宋体";
        fontSize:12;
    }
</mx:Style>
<mx:Legend legendItemClass="LinkLegendItem"/>

 

也可以通过派生这个类, 就可以修改其相应的样式.

派生LegendItem 类, 并设置样式.
BigFontLegendIte.as

view plaincopy to clipboardprint?
package com     
{     
import mx.charts.LegendItem;     
public class BigFontLegendItem extends LegendItem     
{     
   public function BigFontLegendItem()     
   {     
    super();     
    this.styleName = "<STRONG>ChineseFont</STRONG>";     
   }     
       
}     
}   
package com  
{  
import mx.charts.LegendItem;  
public class BigFontLegendItem extends LegendItem  
{  
   public function BigFontLegendItem()  
   {  
    super();  
    this.styleName = "<STRONG>ChineseFont</STRONG>  
 
 
";  
   }  
    
}  
} 

2. 然后定义样式, 在 Legend 中直接指定legendItemClass 为  BigFontLegendIte

view plaincopy to clipboardprint?
<mx:Style>    
     .<STRONG>ChineseFont</STRONG>    
    
    
{     
        fontFamily:"Verdana","宋体";     
        fontSize:12;     
     }     
</mx:Style>    
    
<mx:Legend legendItemClass="com.BigFontLegendItem " />  
<mx:Style> 
     .<STRONG>ChineseFont</STRONG> 
 
 
{  
        fontFamily:"Verdana","宋体";  
        fontSize:12;  
     }  
</mx:Style> 
 
<mx:Legend legendItemClass="com.BigFontLegendItem " /> 

这样就可以设置Legend 中的字体大小或者样式了.

 

 

 

在flex chart中使用带链接的Legend

 

从LegendItem类中派生出LinkLegendItem类，并做两件事：
1. 设置鼠标为手型。
在构造函数中调用 

   this.buttonMode = true;
    this.mouseChildren = false;

即可

2. 设置鼠标经过时，改变背景色。步骤：
a.在createChildren时添加一个背景画布（放最底层）
b.捕捉鼠标的over 和out事件，在鼠标经过时设置背景色可见，鼠标移出时，隐藏。

3. 设置Legend 的 legendItemClass="LinkLegendItem" 。 若需要捕捉legendItem的单击事件，设置ItemClick事件即可。

全部代码如下。

//LinkLegendItem
package
{
import flash.events.MouseEvent;
import flash.ui.Mouse;

import mx.charts.LegendItem;
import mx.containers.Canvas;

public class LinkLegendItem extends LegendItem
{
   private var bgElement:Canvas;
     private var _highlight:Boolean;
   public function LinkLegendItem()
   {
    super();

   //这两行设置鼠标样式为手形
    this.buttonMode = true;
    this.mouseChildren = false;
  
    addEventListener(MouseEvent.MOUSE_OVER, handleEvent);
         addEventListener(MouseEvent.MOUSE_OUT, handleEvent);
   }
 
   override protected function createChildren():void {
         super.createChildren();
        
         bgElement = new Canvas();
         bgElement.setStyle("backgroundColor", 0x00ff00);
         addChildAt(bgElement,0);
     }
   
    private function handleEvent(event:MouseEvent):void{
        if(event.type == MouseEvent.MOUSE_OVER)
            highlight = true;
        else if(event.type == MouseEvent.MOUSE_OUT)
            highlight = false;
    }
   
   
    public function set highlight(value:Boolean):void{
        _highlight = value;
        invalidateDisplayList()
    }
   
     protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        graphics.clear();
        graphics.beginFill(0,0);
        graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
        graphics.endFill();       

         name = label;
         bgElement.setActualSize(unscaledWidth, unscaledHeight);
         if(_highlight)
            bgElement.visible = true;
        else
            bgElement.visible = false;
           
               }
       }
 

}