本文将教大家如何在axure用中继器做一个排名图，达到填写中继器数据，自动生成图标的目的。
　　一、效果介绍
　　二、功能介绍
　　简单填写中继器内容即可生成排名图，无需连外网。
　　样式颜色等可以自由变换。
　　鼠标移入时能显示具体数据。
　　三、制作方法
　　（1）中继器里有两列，x和no，x为中坐标，no为具体数值如下图所示：
　　（2）中继器内材料：文本框矩形1，如下图所示放置即可：
　　（3）在中继器外建一个文本框（命名为最大值）并隐藏，只用于逻辑处理。文本框的值填写no里面最大的值，该案例为920。逻辑是找到最长的矩形的值，让比它短的矩形值调低宽度。具体公式〔〔LVAR2。width（Item。noLVAR1）〕〕。
　　LVAR2。width指矩形的宽，LVAR1指no的最大值，Item。no指no的当前值。
　　（4）具体交互
　　中继器每项加载时，是设置中继器内的文本框的文字〔〔Item。x〕〕设置矩形的尺寸〔〔LVAR2。width（Item。noLVAR1）〕〕，锚点在左部。
　　（5）用矩形和标签制作外框并标上刻度，如下图所示：
　　将中继器移动到对应位置上即可。
　　（6）做一个标签，如下图所示，默认隐藏，透明度75。
　　思路，鼠标移入矩形的时候，显示标签，标签跟随鼠标移动，让Item。no的值文本标签2，Item。x的值文本标签1。
　　鼠标移出的时候，隐藏标签即可。
　　这样制作完成了排名图，以后使用方便，仅需简单填写中继器的内容，即可拥有完美的效果，所以强烈推荐给各位使用。
　　需要原型的小伙伴们可以在评论留言哦，谢谢大家！
　　在线演示地址：https：www。pmdaniu。com

Axure教程：数据分页显示上一个教程中，我们讲到了中继器。今天呢，我们继续讲跟中继器有关的。中继器可以显示数据列表，但是当数据列表数据条数较多，如上百上千上万的时候，一个页面显示可能会过于冗长。在……Axure教程：可视化视图本文将教大家如何用中继器做漏斗图，其中包括了功能介绍与制作方法。在线演示地址：http：demo。axureshop。com？urlhttp：cloud。axuresho……Axure教程：获取验证码倒计时的实现本文介绍了如何用Axure获取验证码倒计时的实现的操作步骤，希望对你有所帮助。预览效果（1）获取验证码：（2）倒计时：（3）重新获取：所需元件……Axure教程：进阶版倒计时这个原型是作者根据上一篇文章《Axure教程：获取验证码倒计时的实现》，发散思维想到去做的一个原型案例，在这里分享出来，希望可以帮助到一样刚起步的产品小白。如果该教程较难……Axure教程：用中继器做排名图本文将教大家如何在axure用中继器做一个排名图，达到填写中继器数据，自动生成图标的目的。一、效果介绍二、功能介绍简单填写中继器内容即可生成排名图，无需连外网……Axure教程：首页图片轮播图片轮播是各大网站常常见到的形式，文章带我们学习了如何用Axure实现图片轮播功能，一起来看看双11刚过没多久，大家是否都参加了2000亿的大项目呀？剁手的时候，有没有被……Axure教程：省市级联本文作者带大家一起来看一下Axure中如何实现省市级联的效果，enjoy喜欢网购的小伙伴们可能会发现这样一种现象：当需要添加新的邮寄地址的时候，我们首先是会先选择省份，然……Axure教程：商品列表及排序筛选本文带大家一起来看一下Axure中如何商品列表及排序筛选，enjoy喜欢网购的小伙伴们可能会发现这样一种现象我们在电商平台浏览商品的时候，这些商品会以方块格子的形式展示一……Axure教程：倒计时效果的实现在新注册账号或者等待验证码的过程中，我们常常会见到需要等待几十秒的情况。这种自动倒计时的效果时如何实现的呢？文章讲解了如何用Axure实现倒计时效果，一起来看看我们在使用……Axure教程：中继器的使用之动态模糊搜索文章讲解了如何用Axure实现动态模糊搜索的两种样式，与大家分享。本人产品新人一枚，在学习axure中发现中继器的使用之动态模糊搜索的文章都比较散，想着写一篇自己稍微整合……Axure教程：随机数字键盘文章讲解了如何用Axure实现随时数字键盘效果，一起来看看说到随机数字键盘，我相信大家都不会觉得陌生，因为我们经常会碰到这种情况。比如我们在买买买的时候，下单的最后……Axure教程：页面滚动时导航菜单始终可见如何让页面的导航菜单在滚动时也可见呢？笔者以此为需求，讲解了如何用Axure实现这个需求。不知大家在某东官网买书浏览网页的时候，有没有发现这样一种很有趣的现象：在书籍详细……