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

相关文章
|
2月前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
|
3月前
|
存储 数据可视化 UED
Axure中继器动态数据图表制作
在Axure RP中,中继器(Repeater)是一个非常强大的工具,它允许设计者动态地展示和交互数据,进而创建各种复杂的数据可视化图表,如柱状图、条形图、堆叠图、散点图和对比图。以下将详细介绍如何使用中继器来设计这些图表。
64 16
Axure中继器动态数据图表制作
|
4月前
Axure 中继器 实现选取表格行、列交互
Axure 中继器 实现选取表格行、列交互
54 5
|
5月前
uniapp实战 —— 竖排多级分类展示
uniapp实战 —— 竖排多级分类展示
66 0
|
7月前
|
数据可视化
Tableau可视化设计案例-03基本表、树形图、气泡图、词云
Tableau可视化设计案例-03基本表、树形图、气泡图、词云
【Axure教程】中继器表格寻找和标记数据
【Axure教程】中继器表格寻找和标记数据
【Axure教程】中继器图片列表(放大效果)
【Axure教程】中继器图片列表(放大效果)
【Axure教程】中继器图片列表(放大效果)