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十大常用函数教程

相关文章
|
5月前
|
数据可视化 大数据
Axure制作可视化大屏动态滚动列表教程
本文详细介绍了如何使用Axure制作动态滚动列表展示模块。首先,通过创建新项目和设置中继器列来准备数据;接着,设计列表项样式并添加示例数据。然后,利用动态面板实现列表的滚动效果,包括设置内部和外部面板交互逻辑。最后,预览调试以确保效果满意。此模块适用于可视化大屏,可根据需求调整样式与参数,达到理想展示效果。文中还提供了相关教程链接,助力Axure原型设计。
1244 137
|
3月前
WEB端交互元件库:Axure设计师的高效利器
EQL UI是一款功能强大、组件丰富的Axure元件库,涵盖500+设计组件与完整后台模板,助力设计师高效搭建高保真原型,提升产品设计效率与质量。
708 128
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
334 6
Axure中继器教程及案例详解
|
10月前
|
存储 监控 数据处理
【STM32】详细讲述 USART_IRQHandler() 的工作流程和原理
- UART5_IRQHandler的主要任务是响应各种UART中断事件并执行相应的处理。 - 典型的处理中断步骤包括检查中断类型、读取或写入数据寄存器、处理数据或错误、清除中断标志等。 - 实际的中断处理逻辑会根据具体应用的需求进行调整。
427 1
|
11月前
Axure设计之文本编辑器制作教程
本文介绍如何在Axure中模拟Web端富文本编辑器,实现基本的文本编辑功能,包括自定义字体样式、大小、颜色及对齐方式等。通过拖入矩形、文本域等元件,添加单选框和图标,并设置相应的交互,完成文本编辑器的制作。
365 2
|
7月前
|
小程序 搜索推荐 Android开发
Axure原型模板与元件库APP交互设计素材(附资料)
Axure是一款强大的原型设计工具,广泛应用于APP和小程序的设计与开发。本文详细介绍Axure的常用界面组件元件库、交互设计素材,涵盖电商、社区服务、娱乐休闲、农业农村、教育等领域的多套交互案例。通过手机模型、矢量图标、通用组件等资源,设计师可高效构建原型并模拟用户操作,评估界面效果。Axure支持导出和分享,助力团队协作,推动更多优秀应用的诞生。
846 6
|
11月前
|
存储 JavaScript 前端开发
Axure设计之日期时间范围选择器
在产品设计和原型制作中,日期时间范围选择器是常见需求。本文介绍如何使用Axure的动态面板、中继器、文本框、按钮及时间函数,快速制作一个功能完备的日期时间范围选择器。详细步骤包括创建基本框架、设置时间函数、载入时获取当前时间、添加时间选择功能、更新文本框值和验证格式化。通过这些步骤,你可以在Axure中轻松实现这一功能。
1169 0
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
592 2
|
10月前
|
机器学习/深度学习 数据采集 数据挖掘
使用Python实现智能食品消费市场分析的深度学习模型
使用Python实现智能食品消费市场分析的深度学习模型
291 36
|
10月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
420 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条