Flex实现双轴组合图的设计思路及代码

在Flex/Flash开发中，经常需要在一个图表中同时展示两种不同量级的数据——比如柱状图表示具体数值，折线图表示百分比。如何让它们共用同一个X轴，但各自拥有独立的Y轴？下面这个案例就给出了完整的实现方案，并附带了可直接运行的源码。

1、设计思路

整体思路其实很清晰：

（1）设计一个组合图，该图共用一个数据源；
（2）组合图由柱状图和折线图组合而成；
（3）柱状图显示的数据依据左边的竖直轴，折线图的数据依据右边的竖直轴。

简单来说，就是通过左右两个Y轴，让不同量纲的数据在同一张图表上互不干扰地呈现出来。

2、源码如下

下面直接给出完整的MXML代码，关键部分已做了注释说明。

复制代码 代码如下:

3、显示结果

运行后的效果图如下，柱状图对应左侧Y轴（数值范围0~100000），折线图对应右侧Y轴（百分比0~100），两个系列在同一个图表中清晰对比。