柔性：问题显示自定义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