【Axure教程】中继器表格中插入进度条

将进度条与表格结合是一种非常有效的数据可视化方法，它结合了两种元素的优点，能极大地提升数据可读性，作者今天就教大家制作在中继器表格里插入进度条的原型模版。

【原型效果】

这个原型模版我们用中继器制作的，制作完成后使用也很方便，只需要在中继器表格里填写表格信息，即可自动生成交互效果，包括根据数据自动生成对应的进度条。具体效果可以打开下方原型地址体验

【原型预览含下载地址】

https://axhub.im/ax9/2bcd864c6573fb02/#g=1&p=表格含进度条案例

【制作教程】

1、表头的制作

我们用矩形制作表头，如下图摆放：

2、表格主题的制作

主要用中继器来制作，在中继器表格里的材料主要是矩形、文本标签，制作而成，每一格对齐上面的表头，状态包括（进行中、已完成和未开始），我们把这三个矩形放在动态面板的三个状态里，进度条用矩形拉满圆角制作，包括、蓝色、绿色和灰色3个进度条，灰色是底部进度条，蓝色是对应进行中，绿色对应已完成，将蓝色和绿色进度条放在动态面板的两个状态里，另外加一个红色的状态（未开始为空即可）。整体如下图所示摆放：

中继器表格需要有5列：column1对应项目编号、column2对应项目名称、column4对应负责人、column5对应项目周期，column7对应进度的百分比数字，状态列不需要有对应的列，可以根据column7的数值来确定状态。

3、交互制作

首先我们要把中继器表格里的值设置到对应的元件里，首先是column1、2、4、5，这里我们分一下版本，如果是Axure10或以上的版本，我们点击中继器表格里连接元件的按钮，选择对应的中继器里对应的元件，就可以将值快速设置上去；如果是Axure9或以下的版本，我们就要在中继器每项加载时（又名项目被载入时），用设置文本的交互，将对应列的值设置到对应的元件里。

Column7这里有些独特，因为中继器表格里只填写数字，后续方便用于计算进度条长度，例如90%我们就填写90，所以我们将90的值传到对应元件上时，还需要加上百分号，所以我们要在中继器每项加载时（又名项目被载入时），用设置文本的交互，将Column7列的值和百分号设置到对应的元件里。

设置完之后，我们要根据Column7的数值，调整进度条的宽，我们可以根据它的占比，例如数据是90，进度条总长是200，那显示的进度条宽度=90/100*200=180。所以在中继器每项加载时（又名项目被载入时），我们用设置尺寸的交互，设置蓝色进度条的宽度为上面公式的变量即可。

最后，我们根据Column7的数值控制显示的进度条和状态面板即可，如果他的值等于0，就是未开始状态，我们用设置面板状态将状态面板设置为未开始，将进度条面板设置为红色状态；如果它的值等于100，就是已完成的状态，我们用设置面板状态将状态面板设置为已完成，将进度条面板设置为绿色状态，如果在0-100之间，那就不需要改变，默认显示蓝色进度条和进行中的状态

这样我们就完成了中继器表格中插入进度条原型模板的制作了。以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。