目前项目遇到柱状图下方的字体被遮挡,把这个问题交给其他开发人员定位了一天。给我的结论是搞不定。

回来研究了一下,充分的相信我们的开发人员水平,高估了这个问题的难度,结果苦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后的柱状图显示如下:







posted on 2012-02-26 17:35  热夜之梦  阅读(2089)  评论(0编辑  收藏  举报