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

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

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

一、效果演示

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

二、设计思路

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

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

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

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

三、重要步骤

我们可以按照思路从后往前实现:

  1. 先画数据项,我这里列表画了10个数据项,分别用不同颜色设置,如下排列:
  1. 再拖入一个中继器,命名为中继器B,定义好中继器的列名和数据,作为数据源。注意这里"no=0"第一行的数据作为年份选择下拉框选项数据column1~column10:
  1. 再拖入一个中继器,命名为中继器A,定义好中继器的列名(注意:中继器A不用添加数据,他的数据是通过交互根据中继器B中来添加的),作为图表的数据实体:
  1. 制作年份下拉选择框,并绑定事件:
  1. 设置中继器A的交互"每项加载",绑定数据到各个数据项:
  1. 补充:考虑后期可直接作为元件使用,这里没用使用全局变量,而是再页面拖入了两个矩形分别记录变量数据,这里命名为"变量值column"和"变量值coefficient"。变量值column:用来记录选择的年份;变量值coefficient:用来记录计算得到的系数(用作设置条形的尺寸,条形宽度=中继器A列column的数值*系数,系数=条形最大宽度/中继器A列column的最大值)

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

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

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

End·往期推荐

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

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

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

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

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

Axure十大常用函数教程

相关推荐
全宇宙最最帅气的哆啦A梦小怪兽4 天前
【Axure绘制原型】图片切割、交互动效、热区、动态面板、元件显示隐藏、表单元件、表格、内联框架
产品经理·axure
招风的黑耳5 天前
可拖动的关系图谱原型案例
知识图谱·axure·中继器·动态交互·关系图谱
梓贤Vigo6 天前
【Axure视频教程】标准金额格式转换
交互·产品经理·axure·原型
孤蓬&听雨6 天前
Axure高保真AI算法训练平台
人工智能·算法·ai·产品经理·axure·原型设计
招风的黑耳9 天前
智慧社区数据可视化中枢平台——Axure全场景交互式大屏解决方案
axure
梓贤Vigo9 天前
【Axure视频教程】中继器表格轮播含暂停效果
交互·产品经理·axure·原型·教程
产品设计大观9 天前
APP动态交互原型实例|墨刀变量控制+条件判断教程
交互·产品经理·axure·墨刀·原型设计·高保真交互原型·动态交互原型
小宁学技术18 天前
Axure RP 9 详细图文安装流程(附安装包)教程包含下载、安装、汉化、授权
axure·photoshop
结构化知识课堂19 天前
Axure疑难杂症:完美解决中继器数据互通、增删改查(玩转中继器)
axure·增删改查·中继器·中继器筛选·数据互通
结构化知识课堂20 天前
Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)
axure·中继器筛选·时间筛选·多条件筛选