Axure设计教程:动态排名图(中继器实现)

news/2025/2/8 15:25:17 标签: axure

一、开篇

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

二、效果预览

  • 自动轮播(快速):图表快速切换显示不同数据排名。

  • 自动轮播(慢速):图表以较慢速度切换,便于观察数据变化。

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

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

三、设计思路

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

四、详细步骤

  1. 绘制数据项
    • 在画布上绘制10个数据项(可根据需要调整数量),并为每个数据项设置不同的颜色。
  2. 配置中继器B
    • 拖入一个中继器,命名为“中继器B”。
    • 在中继器B中定义列名和数据,如column1column10,以及一个特殊的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十大常用函数教程 


http://www.niftyadmin.cn/n/5845020.html

相关文章

Macbook ToDesk 无法连接网络

描述 网络连接的是 Wi-Fi,打开浏览器能跟正常浏览内容,说明 Wi-Fi 是正常的。 现象:显示网络连接失败,一直无法登陆! 检查防火墙是没有阻止ToDesk 的任何连接,说明防火墙也是正常的。 解决 检查登录项&a…

idea整合deepseek实现AI辅助编程

1.File->Settings 2.安装插件codegpt 3.注册deepseek开发者账号,DeepSeek开放平台 4.按下图指示创建API KEY 5.回到idea配置api信息,File->Settings->Tools->CodeGPT->Providers->Custom OpenAI API key填写deepseek的api key Chat…

DeepSeek 和 ChatGPT 的商业化发展前景对比

在大语言模型商业化的赛道上,DeepSeek 和 ChatGPT 都展现出了独特的潜力。这两款模型由于技术特点、市场定位和发展策略的不同,在商业化发展前景上各有千秋。 市场定位与应用场景 ChatGPT 定位为通用性的大语言模型,旨在为全球用户提供广泛…

01什么是DevOps

在日常开发中,运维人员主要负责跟生产环境打交道,开发和测试,不去操作生产环境的内容,生产环境由运维人员操作,这里面包含了环境的搭建、系统监控、故障的转移,还有软件的维护等内容。 当一个项目开发完毕&…

【Block总结】PSA,金字塔挤压注意力,解决传统注意力机制在捕获多尺度特征时的局限性

论文信息 标题: EPSANet: An Efficient Pyramid Squeeze Attention Block on Convolutional Neural Network论文链接: arXivGitHub链接: https://github.com/murufeng/EPSANet 创新点 EPSANet提出了一种新颖的金字塔挤压注意力(PSA)模块,旨…

【学习总结|DAY036】Vue工程化+ElementPlus

引言 在前端开发领域,Vue 作为一款流行的 JavaScript 框架,结合 ElementPlus 组件库,为开发者提供了强大的构建用户界面的能力。本文将结合学习内容,详细介绍 Vue 工程化开发流程以及 ElementPlus 的使用,助力开发者快…

Python3+Request+Pytest+Allure+Jenkins 接口自动化测试[手动写的和AI写的对比]

我手动写的参考 总篇:Python3+Request+Pytest+Allure+Jenkins接口自动化框架设计思路_jenkins python3+request-CSDN博客 https://blog.csdn.net/fen_fen/article/details/144269072 下面是AI写的:Python3+Request+Pytest+Allure+Jenkins 接口自动化测试[AI文章框架] 在软…

深度学习01 神经网络

目录 神经网络 ​感知器 感知器的定义 感知器的数学表达 感知器的局限性 多层感知器(MLP, Multi-Layer Perceptron) 多层感知器的定义 多层感知器的结构 多层感知器的优势 偏置 偏置的作用 偏置的数学表达 神经网络的构造 ​神经网络的基本…