目前项目遇到柱状图下方的字体被遮挡,把这个问题交给其他开发人员定位了一天。给我的结论是搞不定。
回来研究了一下,充分的相信我们的开发人员水平,高估了这个问题的难度,结果苦B了一下午,发现只要在ColumnChart上设置clipContent="false"就OK了。。
不过倒是把columnchart的源码看了个大概,在这里记录一下:
Chart组件对于呈现是分层进行的,在ColumnChart的基类ChartBase中可以看到如下方法:
/**
* @private
*/
mx_internal function updateChildOrder():void
{
var nextindex:int = 0;
setChildIndex(_backgroundElementHolder, nextindex++);
nextindex = updateAxisOrder(nextindex);
setChildIndex(_seriesHolder, nextindex++);
setChildIndex(_annotationElementHolder, nextindex++);
setChildIndex(_allDataTipOverlay, nextindex++);
setChildIndex(_dataTipOverlay, nextindex++);
}
可以看出分为4层来显示,呈现柱状的一层一直置于最下,鼠标移动触发的dataTip放在最前。
其中的_annotationElementHolder就是摆放柱状上问题的UIComponent,从这里来看_annotationElementHolder不应该会被其他层级遮挡,因为datatip的容器是鼠标触发才会出现的,再细看代码,在ChartBase的构造方法中发现了如下代码:
_annotationElementHolder.addChild(_annotationElementMask);
_annotationElementHolder.mask = _annotationElementMask;
看来都是mask的问题,在重写的updateChildOrder中把mask设置为null.柱状图正确显示。
继续搜索_annotationElementHolder.mask的引用代码,看到了让我内牛满面的一段:
/**
* @private
*/
public function set clipContent(value:Boolean):void
{
if (_clipContent == value)
return;
_clipContent = value;
_seriesHolder.mask = _clipContent ?
_seriesMask :
null;
_backgroundElementHolder.mask = _clipContent ?
_backgroundElementMask :
null;
_annotationElementHolder.mask = _clipContent ?
_annotationElementMask :
null;
}
不细看API的人果然苦B。
设置clipContent=false后的柱状图显示如下: