Axure设计之动态图表——排名图（中继器）

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

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

一、效果演示

1. 自动轮播效果(快速)

   

   排名图1.gif

2. 自动轮播效果(慢速)

   

   排名图2.gif

3. 自动轮播效果(慢速且系数固定)

   

   排名图3.gif

4. 手动切换效果

   

   排名图4.gif

二、设计思路

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

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

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

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

三、重要步骤

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

1. 先画数据项，我这里列表画了10个数据项，分别用不同颜色设置，如下排列：

   

   排名图表制作1.png

2. 再拖入一个中继器，命名为中继器B，定义好中继器的列名和数据，作为数据源。注意这里"no=0"第一行的数据作为年份选择下拉框选项数据column1~column10：

   

   排名图表制作2.png

3. 再拖入一个中继器，命名为中继器A，定义好中继器的列名（注意：中继器A不用添加数据，他的数据是通过交互根据中继器B中来添加的），作为图表的数据实体：

   

   排名图表制作3.png

4. 制作年份下拉选择框，并绑定事件：

   

   排名图表制作4.png

5. 设置中继器A的交互"每项加载"，绑定数据到各个数据项：

   

   排名图表制作5.png

排名图表制作51.png

6. 补充：考虑后期可直接作为元件使用，这里没用使用全局变量，而是再页面拖入了两个矩形分别记录变量数据，这里命名为"变量值column"和"变量值coefficient"。变量值column：用来记录选择的年份；变量值coefficient：用来记录计算得到的系数（用作设置条形的尺寸，条形宽度=中继器A列column的数值*系数，系数=条形最大宽度/中继器A列column的最大值）

   

   排名图表制作6.png

排名图表制作7.png

本期的分享内容到此告一段落，如果大家对这款原型感兴趣或者有疑问，欢迎在评论区留言。

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