Axure教程——用中继器制作动态柱状图

今天作者就教大家在Axure里面如何用中继器做一个可以动态的柱状图。
制作完成之应具备以下交互效果：
1.在中继器表格中填写具体数据和坐标轴后，自动生成对应的柱状图
2.鼠标移动到每项，显示其数据

预览地址：https://tj4v11.axshare.com
原型下载地址：https://download.csdn.net/download/weixin_43516258/87761566

柱状图的制作

1. 中继器表格的填写
   柱状图我们需要用中继器制作，中继器内部表格是存放具体数据的位置。我们需要增加一下几列数据：
   d：对应柱状图的横坐标文字
   y：分别数据对应

2. 中继器内部元件
   柱状图我们用中继器来制作，中继器内部元件包括、蓝色条形（矩形）、透明背景(矩形)、横坐标文字（文本标签），如下图所示摆放
   
   3.矩形
   我们用矩形来显示具体的数据，矩形背景为#333333，设置为隐藏状态
   

3. 坐标和边线
   这样柱状图就可以自动生成了，接下来我们回到中继器外面，增加边线和y坐标值，如下图所示摆放：
   

交互设置
1、中继器内部
点击进入中继器，鼠标移入该组合时

鼠标移出该组合时

2、中继器
点击中继器，每项加载时

3、矩形
点击矩形，鼠标移出时

这样我们就完成动态柱状图原型模板的制作了，以后使用时只需要在中继器表格里填写内容，就可自动生成能切换查看不同数据的柱状图，是不是很方便呢。