axure中继器滚动条(axure如何用中继器画折线图)

编辑导语：对于一般的柱状图，只能看到某年各月的数据，而组合柱状图或堆积柱状图会显得很刺眼。此时，您可以使用动态切换直方图。笔者分享一下如何用repeater做一个可以动态切换的直方图。让我们一起来学习吧。
直方图是数据可视化的常用组件。一般只能看到某年各月的数据。如果使用组合直方图或堆叠直方图，类别太多会显得眼花缭乱。此时，您可以使用动态切换的直方图。
今天笔者就来教大家如何使用repeater制作一个可以在Axure中动态切换的直方图。
成品应具有以下互动效果：
在repeater表中填入具体数据和坐标轴的最大值后，会自动生成相应的直方图。当鼠标移动到相应的列时，将显示该列对应的特定数据的数值。可以点击切换不同的选项卡查看对应的直方图原型地址：https://w56jiw.axshare.com/#g=1.
一、制作标签。我们用几个矩形做标签，选择的样式需要设置性能。案例中，选中的样式填充为灰色，文本颜色为白色，如下图：2021年标签。所有标签都被设置到同一个单选按钮组，默认情况下第一个标签被选中。
当单击鼠标选项卡时，我们使用选定的交互将当前组件选择设置为真。
二。直方图1的制作。填写复读表。我们需要用repeater做直方图，repeater的内部形式是存储具体数据的位置。我们需要添加几列数据：
文字：柱状图对应的横坐标文字年份2017~2021:分别对应以上五个标签年份的数据。朱富：默认为空，只用于后续的逻辑交互。我们可以在excel中填写或复制相应的数据。
2.直放站内部组件直方图我们用直放站来做。Repeater内部组件包括，蓝色条(矩形)、透明背景(矩形)和横坐标文本(文本标签)，如下图所示放置：
透明矩形主要是用来做高亮效果的，也就是当鼠标移动到对应的列时，会有变色提示。所以我们先将一个选中的样式设置为浅蓝色，然后将列和背景矩形合并。当鼠标移进组合时，我们将背景矩形设置为选中，当鼠标移出组合时，我们将背景矩形设置为未选中。
横坐标上的文本对应于repeater表中文本中的值，因此当加载每个repeater项时，我们使用设置文本的交互来将文本列的值设置为横坐标上的数据文本。
3.坐标轴最大值和设置列的高度。我们在repeater外面加一个文本标签，填入坐标轴的最大值。此处的值应大于或等于中继器表中的最大数据量。在这种情况下，我们填写5000。此文本仅用于计算，因此默认情况下可以隐藏。
当返回到中继器的每个负载时，我们使用根据中继器表中的数据设置大小的交互。宽度保持不变还是原来的宽度，高度其实是栏的原来高度(或者背景的原来高度)*对应的数据值除以最大文本，设置大小时记录的锚点设置在底部位置。
一本简单的书就是我当前的数据值，比如2500除以5000的最大值得到0.5，0.5乘以直方图开始处的高度(这里可以看做是背景矩形的高度)。
这是设定大小的原则。理解了原理之后，我们还需要根据那个标签选择来确定使用哪些数据。例如，我们将使用2021年列中的数据进行2021年的标签选择，使用2020年列中的数据进行2020年的标签选择.
4.坐标和边线，以便直方图可以自动生成。接下来，让我们回到中继器的外部并增加边线和Y坐标值，如下图所示放置它们：
y坐标值由几个文本标签组成，可以手工输入，也可以通过交互自动设置。前面我们填了最大值的文字，通过这个文字可以自动计算出来，比如下面的是0，然后上面的是
都是数学关系，细节也要看你分多少份。我们可以通过设置加载时文本的交互来设置它们，预览时值会自动变化。请注意，如果输入的最大值不是一个整数，或者有可能被无限分割，我们必须用tofixed函数将其四舍五入：
5.显示弹出窗口的标签。我们想让移入相应列的标签显示相应的数据，所以用矩形制作，调整大小和样式后默认隐藏，在repeater中的列组合中编写和添加交互。
鼠标移入时，我们增加显示数据标签的交互；鼠标移出时，我们增加隐藏数据标签的交互；当鼠标移动时，我们添加一个移动事件。我们希望标签跟随鼠标的移动，所以在这里使用cursor函数获取鼠标的X或Y值，移动时选择到达，然后获取鼠标的X值(Cursor.x)和Y值(Cursor.y)。我们必须增加一点距离。
最后，当鼠标移入时，我们需要通过设置文本交互来将数据设置到标签上。这里的大小和上面设置的一样，需要条件，即根据选择的标签设置具体的数据。
如果选择了标签2021，我们将在值repeater表中设置列year2021的值；如果选择了2020标签，我们将在值重复表中设置year2020列的值.
这样，我们就完成了动态切换直方图的原型模板的制作。以后我们使用的时候，只需要填写repeater表，就可以自动生成可以切换查看不同数据的直方图。不方便吗？
以上就是用repeater制作树形的原型模板。感谢您的阅读，我们下次再见。
本文由@Axure Hi-Fi Prototype原创发布。每个人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。