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

相关推荐
梓贤Vigo13 小时前
【Axure高保真原型】动态打字输入效果
交互·产品经理·axure·原型
梓贤Vigo16 小时前
【Axure视频教程】大小图轮播
交互·产品经理·axure·原型·中继器
PMEcho2 天前
墨刀监听变量实战:1个案例搞定高保真交互原型(附教程)
axure·变量·函数·交互设计·墨刀·原型设计·条件判断·高保真原型·监听·高级交互·高保真交互原型
PM大明同学13 天前
Axure PR 9 搜索 百度引擎 设计&交互
交互·axure
昕冉14 天前
Axure9中继器内部实现批量操作
设计模式·axure·设计
昕冉14 天前
Axure9中继器多数据实现分页
设计模式·axure·设计
昕冉14 天前
Axure9中继器实现数据排序
设计模式·axure·设计
冯浩(grow up)1 个月前
Axure Rp 11 安装、汉化、授权
axure
梓贤Vigo1 个月前
【Axure高保真原型】图片列表添加和删除图片
axure
害羞的白菜1 个月前
基于Axure+墨刀设计的电梯管理系统云台ERP的中保真原型图
数据分析·产品经理·axure·项目经理·墨刀