Axure教程—堆积面积图

本文将教大家如何用AXURE制作堆积面积图，如果你想了解如何使用AXURE中的中继器来创建这种图形，建议你可以仔细阅读本文。

一、效果介绍
如图：

![](https://img.huzhan.com/blog/20230602/20231685676010171.png)
预览及下载地址：https://d4nsae.axshare.com

二、功能介绍

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

样式颜色等可以自由变换

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

三、制作方法
（1）中继器
中继器里有五列，d、y1、y2、y3和y4，d为横坐标、y1、y2、y3和y4为具体数值如下图所示：
![](https://img.huzhan.com/blog/20230602/20231685676027282.png)

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

（3）中继器外文本
在中继器外建一个矩形，大小设置为100×50，颜色设置为#333333，透明度为50，设置隐藏状态，只用于显示其具体数值，如图
![](https://img.huzhan.com/blog/20230602/20231685676065628.png)

4）制作图表
制作四个面积图的颜色分别为如图：##FEA213、#54CD72 、#0000FF、#00FFFF和#FF0000，其命名分别为：橙色、绿色、蓝色、青绿色和红色，并组合一起，如图：
![](https://img.huzhan.com/blog/20230602/20231685676081500.png)

最终设计如图：
![](https://img.huzhan.com/blog/20230602/20231685676096408.png)

四、交互设置

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

![](https://img.huzhan.com/blog/20230602/20231685676106256.png)
(2）中继器内组合
鼠标移动时和鼠标移出时
![](https://img.huzhan.com/blog/20230602/20231685676120262.png)

（3）中继器外文本
鼠标移出时
![](https://img.huzhan.com/blog/20230602/20231685676138748.png)

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

橙色面积图
![](https://img.huzhan.com/blog/20230602/20231685676150695.png)

绿色面积图
![](https://img.huzhan.com/blog/20230602/20231685676167913.png)

蓝色面积图
![](https://img.huzhan.com/blog/20230602/20231685676188512.png)

青绿色面积图
![](https://img.huzhan.com/blog/20230602/20231685676210725.png)

红色面积图
![](https://img.huzhan.com/blog/20230602/20231685676219415.png)

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

已有 0 条评论

Ta的最新文章

标签大全

阅读目录