当前位置：首页 > article >正文

Axure设计教程：动态排名图（中继器实现）

article 2025/2/8 15:27:18

一、开篇

在Axure原型设计中，动态图表是展示数据和交互效果的重要元素。今天，我们将学习如何使用中继器来创建一个动态的排名图，该图表不仅支持自动轮播，还可以手动切换，极大地增强了用户交互体验。此教程旨在提供一个可复用性强的原型设计，只需简单修改数据即可适应不同场景。

二、效果预览

自动轮播（快速）：图表快速切换显示不同数据排名。

自动轮播（慢速）：图表以较慢速度切换，便于观察数据变化。

自动轮播（慢速且系数固定）：在慢速切换的基础上，条形图的宽度系数保持不变，便于对比数据大小。

手动切换：用户可以通过点击或选择特定选项来手动切换图表数据。

三、设计思路

中继器A：作为图表的数据展示层，负责动态呈现数据。
中继器B：作为数据源控制器，存储并管理图表所需的数据。
数据项设置：每个数据项单独设置颜色，以区分不同的数据条。
交互逻辑：通过事件交互，将中继器B的数据绑定到中继器A，并控制图表的显示和切换。

四、详细步骤

绘制数据项：
- 在画布上绘制10个数据项（可根据需要调整数量），并为每个数据项设置不同的颜色。
配置中继器B：
- 拖入一个中继器，命名为“中继器B”。
- 在中继器B中定义列名和数据，如column1至column10，以及一个特殊的no=0行，用于存储年份选择下拉框选项数据（此步骤可根据实际需求调整）。
配置中继器A：
- 拖入另一个中继器，命名为“中继器A”。
- 定义中继器A的列名，但无需添加数据。中继器A的数据将通过交互从中继器B中获取。
制作年份下拉选择框：
- 创建一个下拉选择框，用于选择年份（或其他分类维度）。
- 将下拉选择框的选项与中继器B中的no=0行数据绑定。
设置中继器A的交互：
- 在中继器A的“每项加载”事件中，设置数据绑定逻辑。根据下拉选择框选中的年份（或其他分类维度），从中继器B中获取对应的数据行，并绑定到中继器A的各个数据项上。
- 为了实现条形图的宽度动态调整，可以设置一个系数变量（如“变量值coefficient”），该变量根据中继器A中列的最大值和中继器A列的值来计算。条形图的宽度 = 中继器A列的值 * 系数。
记录变量数据：
- 在页面上拖入两个矩形，分别命名为“变量值column”和“变量值coefficient”，用于记录下拉选择框选中的年份和计算得到的系数。这些变量可以通过文本标签或其他形式展示给用户，以便用户了解当前图表的状态。
实现自动轮播和手动切换：
- 使用Axure的定时器组件或循环逻辑来实现自动轮播效果。
- 为下拉选择框或其他触发元素设置点击事件，以实现手动切换图表数据的功能。