Axure设计之动态条形图教程(中继器)

在Axure RP中,中继器是一个非常强大的工具,它允许我们动态地展示数据,并且可以轻松实现复杂的交互效果。本文将详细介绍如何使用中继器来制作一个动态条形图,并展示其在实际项目中的应用。

一、效果预览

预览地址:https://1zvcwx.axshare.com

在这个动态条形图中,我们可以自由变换样式和颜色,并且当鼠标移入时,能够显示具体的数据值。

二、中继器的基本使用方法

1. 创建中继器

首先,在Axure的画布中拖入一个中继器元件。双击打开中继器后,我们会发现里面默认包含一个矩形,但实际上,我们可以通过设置"每项加载时"的事件来动态生成多个矩形(即条形图的柱子)。

2. 设置中继器数据

中继器的数据是通过"数据集"(Dataset)来管理的。我们可以在中继器的样式面板中找到数据集部分,并添加所需的列(例如,d为中坐标,y1y2y3等为具体数值)。这些列名即为我们后续引用的变量名。

3. 布局与样式设置

中继器默认是垂直布局的,但根据项目需要,我们也可以设置为水平布局。在样式面板中,我们可以设置矩形(即条形图柱子)的尺寸、颜色等样式。例如,我们可以设置三个矩形,分别代表不同的数据系列,每个矩形的尺寸和颜色可以根据需要进行调整。

三、动态条形图的制作方法

1. 放置矩形

在中继器内部,我们需要放置多个矩形来代表条形图的柱子。根据前面的数据设置,我们可以放置三个矩形,并分别设置它们的尺寸和颜色。

2. 设置交互

为了实现鼠标移入时显示具体数据的效果,我们需要为中继器内的矩形设置交互动作。具体来说,我们可以在"每项加载时"的事件中,为每个矩形设置"鼠标移入"时显示文本(即数据值)的交互。这通常涉及到使用"动态面板"或"文本"元件来显示数据,并通过设置"显示/隐藏"的交互动作来实现。

3. 引用数据变量

为了让条形图根据数据动态变化,我们需要在中继器的矩形中引用数据变量。这可以通过在矩形的尺寸或文本属性中使用[[Item.varName]]的语法来实现,其中varName是我们在数据集中定义的变量名。

四、案例分享

中继器在Axure中的应用非常广泛,不仅可以用来制作动态条形图,还可以实现表格合集(增、删、查、分页)、带图列表展示、双向列选择、二级菜单、列表操作(拖动、编辑)、标签分类筛选等多种复杂的交互效果。

例如,我们可以使用中继器来制作一个动态添加和删除"标签"的交互效果,或者实现一个投票系统的原型设计。这些案例都充分展示了中继器在Axure设计中的强大功能。

相关推荐
梓贤Vigo10 天前
【Axure教程】动态统计字数
交互·产品经理·axure·原型
此星光明12 天前
GEE训练教程——ECMWF/ERA5_LAND/DAILY_AGGR数据的地表温度的时序分析
javascript·gee·图表·温度·时序·摄氏度
招风的黑耳12 天前
Axure高保真数据可视化大屏图表组件库
axure·科技感元件·可视化素材·动态图表
星期⑧不早八12 天前
Axure RP全面介绍:功能、应用与中文替代方案
ui·axure
星期⑧不早八12 天前
Axure RP:设计、原型与协作的综合平台
ui·axure
设计芝士波波球12 天前
原型设计规范:Axure RP中的交互和布局
交互·axure·设计规范
招风的黑耳13 天前
Axure设计之动态图表——排名图(中继器)
axure·排名·axure教程·动态图表
梓贤Vigo13 天前
【Axure高保真原型】批量美化滚动条
交互·产品经理·axure·原型
招风的黑耳13 天前
Axure可视化大屏原型设计深度解析:从排版到交互的全面优化
axure·axure教程·可视化素材
招风的黑耳15 天前
Axure原型设计可视化大屏科技感元件
axure·科技感元件·可视化素材