本文将教大家如何用AXURE中的中继器制作多色折线图
一、效果介绍
如图:
预览地址:https://xpdm3g.axshare.com
下载地址:https://download.csdn.net/download/weixin_43516258/87814320
二、功能介绍
- 简单填写中继器内容即可动态显示值
- 样式颜色等可以自由变换。
- 鼠标移入时能显示具体数据。
三、制作方法
(1)中继器
中继器里有两列,d、y1和y2,d为横坐标,y1和y2为具体数值,如下图所示:
(2)中继器内材料:
拖入一个矩形,大小为:85300,用于连个数据的间距,在矩形中间放置一个垂直线,其大小为1300,颜色可以自由设置,本案例颜色设置为#777777,设置为隐藏状态,间距矩形和垂直线组合
拖入另两个矩形,大小为66;设置形状为圆,边框颜色#FEA213和#0000FF; 按颜色顺序叠放一起
拖入一个矩形,设置大小为8540,用于显示横坐标,
如下图所示放置即可:
3)折线图表
制作折线图表,两个折线的颜色分别为如图:#0000FF 和#FEA213,并组合一起,设置为隐藏状态,如图:
4)中继器外文本
在中继器外建一个矩形命名为文本并设置隐藏状态,只用于显示其具体数值,如图:
最终设计,如图:
四、交互设置
(1)中继器
中继器每项加载时
2)中继器内组合
组合鼠标移动和鼠标移出时
(3)中继器外文本
鼠标移出时
(4)折线组合
折线组合载入时
这样我们就完成原型制作了.