柔性：問題顯示自定義dataTipRenderer正確

Question

我有一個自定義的dataTipRenderer柔性AreaChart：

<mx:AreaChart id="numParticipants" 
        dataProvider="{UsersModel.graphData.data_points.point}" 
        seriesFilters="[]" right="10" left="10" 
        top="10" bottom="10" fontSize="9" color="#8D8D8D" 
        dataTipRenderer="tooltip.ChartTooltip" 
        showDataTips="true" dataTipMode="multiple" mouseSensitivity="10"> 

渲染代碼是在這裏：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" top="5" width="154" height="42"> 

    <mx:Style source="css/style.css"/> 
    <mx:Script> 
     <![CDATA[ 
      import models.UsersModel; 
       import mx.charts.HitData;   
      import mx.formatters.DateFormatter; 

      override public function set data(value:Object):void 
      { 
       //trace("ChartTooltip: x=" + x + " y=" + y); 
        var dataPoint:HitData = value as HitData; 
        var date:Date = new Date(); 
       var units:String = UsersModel.graphData.units; 

        date.setTime(dataPoint.item.timestamp * 1000); 

       switch (units) 
       { 
        case "days": 
         txtDate.text = dayFormatter.format(date); 
        break; 
       case "hours": 
        txtDate.text = hourFormatter.format(date); 
        break; 
      } 
      txtUsers.text = dataPoint.item.participants; 
     } 
    ]]> 
</mx:Script> 

<mx:DateFormatter id="hourFormatter" formatString="L:NN A"/> 
<mx:DateFormatter id="dayFormatter" formatString="MMM DD"/> 
<mx:Image source="@Embed('images/BaloonLeft.png')" x="0" width="25" height="42" y="0" maintainAspectRatio="false" /> 
<mx:Image source="@Embed('images/BaloonCenter.png')" x="25" width="120" height="42" y="0" maintainAspectRatio="false"/> 
<mx:Image source="@Embed('images/BaloonRight.png')" x="145" width="9" height="42" y="0" maintainAspectRatio="false" /> 
<mx:VBox x="25" width="120" height="42" y="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" verticalGap="0"> 
    <mx:HBox> 
     <mx:Label text="Date:" styleName="dataTooltipText" fontWeight="bold"/> 
     <mx:Label id="txtDate" styleName="dataTooltipText"/> 
    </mx:HBox> 
    <mx:HBox> 
     <mx:Label text="Users:" styleName="dataTooltipText" fontWeight="bold"/> 
     <mx:Label id="txtUsers" styleName="dataTooltipText"/> 
    </mx:HBox> 
</mx:VBox> 

的提示正確地給出了一些數據點，但對其他人來說，它看起來不太好。

這裏是它的外觀抓屏：

http://www.flickr.com/photos/91145267@N00/6025401750/in/photostream

任何想法，爲什麼？

非常感謝！

奧弗

Answer 1

我建議放置圖片和內容定製layoutContainer內如HBox中：

<mx:HBox> 
    <mx:Image source="@Embed('images/BaloonLeft.png')" x="0" width="25" height="42" y="0" maintainAspectRatio="false" /> 
    <mx:Canvas> 
     <mx:Image source="@Embed('images/BaloonCenter.png')" x="25" width="120" height="42" y="0" maintainAspectRatio="false"/> 

     <mx:VBox x="25" width="120" height="42" y="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" verticalGap="0"> 
      <mx:HBox> 
       <mx:Label text="Date:" styleName="dataTooltipText" fontWeight="bold"/> 
       <mx:Label id="txtDate" styleName="dataTooltipText"/> 
      </mx:HBox> 
      <mx:HBox> 
       <mx:Label text="Users:" styleName="dataTooltipText" fontWeight="bold"/> 
       <mx:Label id="txtUsers" styleName="dataTooltipText"/> 
      </mx:HBox> 
     </mx:VBox> 
    </mx:Canvas> 
    <mx:Image source="@Embed('images/BaloonRight.png')" x="145" width="9" height="42" y="0" maintainAspectRatio="false" /> 
</mx:HBox> 

我還沒有真正測試了這一點，但我想給你主要想法。 HBox水平佈置所有東西，我介紹的Canvas可以將背景和內容相互繪製。正如我所提到的......我希望它能給你一個總體的想法。

Chris