Axure设计之数据图表面积图（中继器）

面积图又叫区域图。 它是在折线图的基础之上形成的， 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。在系统开发中我们经常使用这种数据图表做统计分析。

一、效果展示

1、该示例为多色面积图，分别对种类和数量以月份为单位进行统计；

2、横轴为统计月份，纵轴分别为种类和数量坐标系，实现鼠标移入移出显示和隐藏提示框；

原型预览地址：https://gc2pcb.axshare.com

二、实现思路

1、第一步先搞定坐标轴，确定横纵轴参数；

2、第二步使用中继器，确定中继器子类中使用的元素，根据统计项将数据录入中继器；

3、第三步需要手动画线，以及由线推导面（其实就是画多边形）；

4、第四步就是添加交互事件，例如鼠标移入移出显示和隐藏提示框以及显示的数据。

三、实现步骤

接下来我以以下数据作为示例数据，利用Axure RP 9软件制作一个面积图：

1、按照思路，我们先画坐标轴，这一步没啥技巧：

2、第二步，拖入一个中继器，点击进行编辑，添加矩形，线（虚线），矩形用于月份显示，虚线可以辅助画折线的点，也用来显示使用，最后要隐藏的：

3、第三步，工具头部找到插入工具选绘画：

这里我们开始绘折线，折线变曲线需要在点上右击鼠标选择：

然后画面，这一步直接复制上一步画的线，然后头尾需要连到横坐标：

4、另一个线和面按重复操作，然后再上点：

最后加上提示框，做一下交互

需要此原型源文件的请搜索VX公众号“招风的黑耳”，回复“Axure面积图”，获取。