对齐多个Flex Chart的y轴

财经图表一般都由多个图表组成。与同步多个图表数据提示一样,多个图表还有对齐多个图表y轴的问题。正好有网友问到这个问题,特写此文小结一下。

最简单的办法就是动态设置gutterLeft或gutterRight样式。首先取得每个图表装订线大小,再比较获得水平装订线的最大值,当完成绘制后重新动态设置gutterLeft或gutterRight样式。如下面的代码:

private function creationCompleteHandler(event:FlexEvent):void
{
    var right:Number = Math.max(priceChart.computedGutters.right, volumnChart.computedGutters.right);
    event.target.setStyle("gutterRight", right);
    //event.target.verticalAxisRenderers[0].setStyle("labelGap", -right);
}

如果装订线太大会导致绘图区域太小,可以将轴标签放绘图区内部,就像GOOG财经那样,通过设置labelGap样式为负数值很容易就实现这一功能。注释上面的代码的第四行,打开第五行注释就可以了。

个人觉得最好的办法还是通过自定义AxisRenderer来实现。在AxisRenderer组件中我们可以很方便地动态设置AxisRenderer与装订线的边距。如下面的代码:

public function AxisRendererEx()
{
    super();
    this.addEventListener(FlexEvent.CREATION_COMPLETE, init);
}

private function init(event:FlexEvent):void
{
    this.setStyle("labelGap", -gutters.width);
    //swap children index
    this.parent.addChild(this);
}

注意:init处理函数中最后一行代码确保了y轴标签位于数据系列的上层。

点击此处查看该实例最终效果,点击此处下载该实例的源码。

发表评论