自定義AxisRenderer

Question

我正在與一個LineChart與CategoryAxis水平軸和我需要每個類別都有一個非常自定義的格式顯示。使用CategoryAxis.LabelFunction對於我的目的來說功能不夠強大，因爲它只允許自定義Label對象的文本字段的格式。特別是對於這個項目，我需要每個類別都是一個網格或兩個不同的多行標籤的HGroup。左邊的標籤需要左對齊，右邊對齊。

我嘗試創建一個自定義類，extends Group和implements IDataRenderer。然而，public function set data(value:Object)，在IDataRenderer定義，似乎總是具有值被稱爲一個AxisLabel對象，其不內它傳遞一個對象，只是一個字符串（AxisLabel.text）

---

作爲劈-EY替代方案中，我嘗試使用LabelFunction傳遞編碼的字符串，但即使這樣也會導致問題。不知怎的，這個代碼會導致沒事就爲CategoryAxis要顯示：

public class HeatmapAxisLabelRenderer 
extends HGroup 
implements IDataRenderer 
{ 
public function HeatmapAxisLabelRenderer() 
{ 
    super(); 

    this.includeInLayout = true; 
    this.visible = true; 

    this.width = 100; 
    this.height = 40; 
//  this.percentWidth = 100; 
//  this.percentHeight = 100; 
} 


// Internal variable for the property value. 
private var _data:Object; 

// Make the data property bindable. 
[Bindable("dataChange")] 

// Define the getter method. 
public function get data():Object { 
    return _data; 
} 

// Define the setter method, and dispatch an event when the property 
// changes to support data binding. 
public function set data(value:Object):void { 
    _data = value; 

    if (value is AxisLabel && AxisLabel(value).text!=null) { 
     var parts:Array = AxisLabel(value).text.split("|~|"); 
     if (parts.length != 2) return; 

     var name:Label = new Label(); 
     name.text = parts[0]; 
     name.setStyle("textAlign","left"); 
     name.width = 100; 

     var limit:Label = new Label(); 
     limit.text = parts[1]; 
     limit.setStyle("textAlign","right"); 
     limit.width = 100; 

     this.addElement(name); 
     this.addElement(limit); 

     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); 
    } else { 
     trace("renderer bad value"); 
    } 
} 

Answer 1

這個問題似乎是Group和AxisRenderer之間一個奇怪的相互作用，而事實上，你的渲染器（一個HGroup）有明確的寬/高值（組在其構造函數中）：

在您的自定義渲染器上設置data之後，AxisRenderer`告訴自定義渲染器使其大小無效。

雖然這樣做，Group正確地決定不做任何事情，因爲它具有明確的寬度/高度。

我做了一些改動，以得到這個工作：

• 只設置寬度
• 沒有設置兒童標籤寬度（你可能會想播放瓦特/本）
構造
• 製作的標籤對象的成員變量，只有一次在創建他們創造兒童（用於數據的setter可能會頻繁調用）

代碼：

package 
{ 
    import mx.charts.AxisLabel; 
    import mx.core.IDataRenderer; 
    import mx.events.FlexEvent; 

    import spark.components.HGroup; 
    import spark.components.Label; 

    public class HeatmapAxisLabelRenderer extends HGroup implements IDataRenderer 
    { 
     public function HeatmapAxisLabelRenderer() 
     { 
      super(); 
      this.width=100; 
     } 

     private var _data:Object; 

     [Bindable("dataChange")] 
     public function get data():Object { 
          return _data; 
     } 

     private var nameLabel:Label; 
     private var limit:Label; 

     override protected function createChildren():void 
     { 
      super.createChildren(); 
      if (!nameLabel) 
      { 
       nameLabel=new Label(); 
       nameLabel.setStyle("textAlign","left"); 
       limit = new Label(); 
       limit.setStyle("textAlign", "right"); 
       addElement(nameLabel); 
       addElement(limit); 
      } 
     } 

     public function set data(value:Object):void 
     { 
      if (_data === value) 
       return; 

      _data = value; 
      if (value is AxisLabel && AxisLabel(value).text!=null) 
      { 
       var parts:Array = AxisLabel(value).text.split("|~|"); 
       if (parts.length == 2) 
       { 
        nameLabel.text = parts[0]; 
        limit.text = parts[1]; 
       } 
      } 
      else 
      { 
       trace("renderer bad value"); 
      } 
      dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); 
     } 
    } 
}