Axure设计之动态图表——排名图(中继器)

简介: 本文介绍了如何使用Axure制作自动增长的排名图表。通过中继器控制数据展示,实现动态更新的条形图。包括自动轮播和手动切换效果,具备高复用性,便于后期调整。示例展示了具体的设计思路和实现步骤,适合初学者学习参考。


粉丝问我可不可以用中继器做条形图,而且是要做成自动增长的排名图表。所以现在教大家怎么用axure来制作制作排名图。

这个原型制作完成之后,后期有类似的功能,直接拿过去使用也比较简单,基本只需要修改中继器数据就可以了。喜欢、想要该原型的小伙伴或者有很多问题的小朋友都可以在评论给我留言哦。

一、效果演示

  1. 自动轮播效果(快速)

排名图1.gif

  1. 自动轮播效果(慢速)

排名图2.gif

  1. 自动轮播效果(慢速且系数固定)

排名图3.gif

  1. 手动切换效果

排名图4.gif

二、设计思路
考虑到元件应具有强复用性,选择使用中继器制作,后期其他地方使用只需改改数据和样式不用大费周折。

  1. 通过中继器控制图表的数据显示,这里命名为中继器A;

  2. 由于图表数据是动态的,我想的是再通过一个元件(这里是中继器B)来控制中继器A的数据源;

  3. 数据解决了,再来处理数据显示问题。由于事件中无"设置颜色"交互,而我这里数据项又使用了不同的颜色表示,所以数据项得单独设置,在通过中继器A绑定数据;

三、重要步骤
我们可以按照思路从后往前实现:

  1. 先画数据项,我这里列表画了10个数据项,分别用不同颜色设置,如下排列:

排名图表制作1.png

  1. 再拖入一个中继器,命名为中继器B,定义好中继器的列名和数据,作为数据源。注意这里"no=0"第一行的数据作为年份选择下拉框选项数据column1~column10:

排名图表制作2.png

  1. 再拖入一个中继器,命名为中继器A,定义好中继器的列名(注意:中继器A不用添加数据,他的数据是通过交互根据中继器B中来添加的),作为图表的数据实体:

排名图表制作3.png

  1. 制作年份下拉选择框,并绑定事件:

排名图表制作4.png

  1. 设置中继器A的交互"每项加载",绑定数据到各个数据项:

排名图表制作5.png

排名图表制作51.png

  1. 补充:考虑后期可直接作为元件使用,这里没用使用全局变量,而是再页面拖入了两个矩形分别记录变量数据,这里命名为"变量值column"和"变量值coefficient"。变量值column:用来记录选择的年份;变量值coefficient:用来记录计算得到的系数(用作设置条形的尺寸,条形宽度=中继器A列column的数值*系数,系数=条形最大宽度/中继器A列column的最大值)

排名图表制作6.png

排名图表制作7.png

本期的分享内容到此告一段落,如果大家对这款原型感兴趣或者有疑问,欢迎在评论区留言,如果想直接拿来用,请关注文章头部查看资源下载哦。

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

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

End·往期推荐

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

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

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

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

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

Axure十大常用函数教程

相关文章
|
4月前
|
机器学习/深度学习 监控 算法
驾驶员行为数据集(14000张高清标注)| YOLO训练实战 危险驾驶行为识别
本项目开源高质量驾驶员危险行为数据集,含14000张高清标注图像,覆盖饮食、玩手机、睡觉三类行为,严格按YOLO格式划分训练/验证/测试集,支持YOLOv5/v8/v11直接训练,兼顾精度与泛化性,助力DMS研发与智能座舱落地。
1017 12
|
数据可视化 大数据
Axure制作可视化大屏动态滚动列表教程
本文详细介绍了如何使用Axure制作动态滚动列表展示模块。首先,通过创建新项目和设置中继器列来准备数据;接着,设计列表项样式并添加示例数据。然后,利用动态面板实现列表的滚动效果,包括设置内部和外部面板交互逻辑。最后,预览调试以确保效果满意。此模块适用于可视化大屏,可根据需求调整样式与参数,达到理想展示效果。文中还提供了相关教程链接,助力Axure原型设计。
1909 137
|
存储 数据可视化 UED
Axure中继器动态数据图表制作
在Axure RP中,中继器(Repeater)是一个非常强大的工具,它允许设计者动态地展示和交互数据,进而创建各种复杂的数据可视化图表,如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设计这些图表。
433 16
Axure中继器动态数据图表制作
|
11月前
|
存储 前端开发 BI
如何开发一套考勤管理系统?(附架构图+流程图+代码参考)
本文介绍如何设计和开发一套高效的考勤管理系统,涵盖考勤打卡、补卡申请、请假/加班、调休/出差、考勤确认等核心模块,帮助企业实现数字化、自动化的员工考勤管理,提升管理效率与准确性。
|
存储 jenkins 测试技术
Apipost自动化测试:零代码!3步搞定!
传统手动测试耗时低效且易遗漏,全球Top 10科技公司中90%已转向自动化测试。Apipost无需代码,三步实现全流程自动化测试,支持小白快速上手。功能涵盖接口测试、性能压测与数据驱动,并提供动态数据提取、CICD集成等优势,助力高效测试全场景覆盖。通过拖拽编排、一键CLI生成,无缝对接Jenkins、GitHub Actions,提升测试效率与准确性。
1223 11
|
前端开发 JavaScript C++
Marp 教程:实现幻灯片的交互性
Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作过程更加高效和专业。本教程详细介绍了如何在 Marp 中嵌入 HTML 和 JavaScript,实现幻灯片的交互性,包括基本的按钮点击、动态内容、表单交互、幻灯片导航、动画效果和交互式图表等。通过这些技巧,你可以制作出更加生动、互动性强的演示文稿。
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
1243 2
|
消息中间件
RabbitMQ如何支持事务性消息的发送和接收
RabbitMQ消息的发送和接收
633 0
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着,实现后端 API 以提供菜单数据。在前端部分,使用 Ant Design Pro Vue 脚手架创建项目,并配置动态路由和菜单。最后,启动前后端服务,实现高效、美观且功能强大的应用框架。
524 2
|
数据可视化
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格

热门文章

最新文章