Apache flex flex:正确显示自定义dataTipRenderer时出现问题
我有一个带有自定义数据提示器的flex面积图:Apache flex flex:正确显示自定义dataTipRenderer时出现问题,apache-flex,charts,Apache Flex,Charts,我有一个带有自定义数据提示器的flex面积图: <mx:AreaChart id="numParticipants" dataProvider="{UsersModel.graphData.data_points.point}" seriesFilters="[]" right="10" left="10" top="10" bottom="10" fontSize="9" c
<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>
对于某些数据点,工具提示显示正确,但对于其他数据点,它看起来不太好
以下是其外观的屏幕截图:
你知道为什么吗
非常感谢
Ofer我建议将图像和内容放置在自定义布局容器中,如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水平布局所有内容,我介绍的画布使背景和内容相互覆盖成为可能。正如我提到的。。。我希望它能给你一个大概的想法
克里斯你好,克里斯,谢谢你的快速回复。我尝试了你的建议(稍作调整),但仍然得到完全相同的结果。因此,我的猜测是,它与图形元素布局无关,因为一些提示显示正确,如屏幕截图所示。仍然在寻找更多的想法。。。谢谢