flex: проблема с отображением пользовательских dataTipRenderer правильно

Question

У меня есть гибкая AreaChart с пользовательским dataTipRenderer:

<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

Есть идеи, почему ??

Большое спасибо!

Ofer

Answer 1

Я бы посоветовал поместить изображения и контент в пользовательский макет-контейнер, такой как 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 размещает все по горизонтали, а представленный мною холст позволяет рисовать фон и контент друг над другом. Как я уже говорил ... я надеюсь, что это даст вам общую идею.

Chris