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

一、开篇

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

二、效果预览

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

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

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

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

三、设计思路

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

四、详细步骤

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

五、总结

通过本教程，我们学习了如何使用Axure的中继器组件来创建一个动态的排名图。该图表不仅支持自动轮播和手动切换，还可以通过修改中继器B中的数据来适应不同的数据场景。此原型设计具有较高的复用性，只需简单调整数据和样式即可应用于其他类似的项目中。

如果你对这款原型感兴趣或有任何疑问，欢迎在评论区留言。如果想直接获取原型文件以便学习和使用，请关注文章头部的资源下载链接。

原型预览：https://qwqpls.axshare.com

创作不易，感谢您的支持与理解。

 --- End·往期推荐 ---

大屏可视化：舞动数据与美观的“设计秘籍”

Axure科技感大屏系统设计：智慧农场管理平台

智慧水务：解锁供水行业的未来密码，引领数字化转型新篇章

Axure原型设计秘籍：解锁高效设计与开发的宝藏工具

Axure Web端交互元件库：从Quick UI到700+组件的飞跃

Axure十大常用函数教程