本文将教大家如何用AXURE制作堆积面积图
一、效果介绍
如图：

预览地址：https://d4nsae.axshare.com

下载地址：https://download.csdn.net/download/weixin_43516258/87838160
二、功能介绍

• 简单填写中继器内容即可动态显示值

• 样式颜色等可以自由变换

• 鼠标移入时显示相应的数据

三、制作方法
（1）中继器
中继器里有五列，d、y1、y2、y3和y4，d为横坐标、y1、y2、y3和y4为具体数值如下图所示：

(2）中继器内材料组合：
拖入一个矩形，大小为：85×300，用于连个数据的间距；
在矩形中间放置一条垂直线，其大小为1300，颜色可以自由设置，本案例颜色设置为#797979，设置为隐藏状态，间距矩形和垂直线组合
拖入另一个矩形，用于显示横坐标，
如下图所示放置即可：

（3）中继器外文本
在中继器外建一个矩形，大小设置为100×50，颜色设置为#333333，透明度为50，设置隐藏状态，只用于显示其具体数值，如图

4）制作图表
制作四个面积图的颜色分别为如图：##FEA213、#54CD72 、#0000FF、#00FFFF和#FF0000，其命名分别为：橙色、绿色、蓝色、青绿色和红色，并组合一起，如图：

最终设计如图：

四、交互设置

（1）中继器
中继器每项加载时

(2）中继器内组合
鼠标移动时和鼠标移出时

（3）中继器外文本
鼠标移出时

（4）面积图
四个面面积图的载入时

• 橙色面积图
  

• 绿色面积图
  

• 蓝色面积图
  

• 青绿色面积图
  

• 红色面积图
  

这样我们就完成原型制作了