【Axure教程】能增删数据的柱状图

柱状图是可视化视图里一个非常重要的工具，在画原型图时，我们也经常用到柱状图。今天作者就教大家如果在Axure里制作一个能增删输入的柱状图模板，效果包括：

1. 查看具体数据——鼠标移入柱状图时，改柱状图的背景高亮显示，显示提示里可以查看具体数据
2. 添加新柱状——输入人名和数值后，点击添加按钮可以自动生成对应的柱状图
3. 坐标自动调整——如果新增的柱状的数值大于坐标轴最大值，坐标轴会自动更新，并且前面的柱状图也会自动适应新的坐标轴
4. 删除柱状——鼠标移入对应柱状后，点击delete键可以删除当前柱状图
5. 复用效果——用中继器制作，在中继器表格里填写数据和坐标轴最大值，即可自动生成柱状图

【原型地址】

https://axhub.im/ax9/9a27399d9b2d17a5/#g=1

一、材料准备

1. 柱状图

柱状图我们用主要用中继器制作，中继器内我们需要以下元件：

1、柱状——用矩形制作即可

2、文本标签——对应柱状的文字

3、背景矩形——用于制作移入变色的效果，这里要设置选中样式的填充颜色

中继器表格里我们需要两列：

1、text——对应柱状的文字

2、count——对应柱状图的数据

2. 坐标和边框线

我们用几个文本标签和水平线制作纵坐标和柱状图的边框线，如下图所示摆放

3.添加数据组

添加数据组，由两个文本框，两个文本标签和一个按钮组成，数值文本框的输入类型设置为number，这样就只能输入数字了。

4.数据弹窗

我们用矩形制作即可，添加阴影，默认隐藏即可。

二、交互制作

1.制作自动生成的柱状图

中继器每项加载时，我用设置文本的交互，将text列的值，设置到中继器了对应柱状文字的文本标签里。

然后用设置尺寸的交互，设置柱状矩形的尺寸，这里涉及数学的计算，他的宽是不变的，关键是高的设置，其实高的设置就是一个比例的关系，例如柱状的高=200px，坐标最大值是5000，柱状的数据是2500，其实就是坐标轴的一般，所以柱状调整后的高应该为100px。设置尺寸的时候锚点在底部

这里默认的柱状图就完成了

2.添加新柱状

鼠标单击添加按钮时，如果两个输入框的值都不为空，我们用添加行的交互，将两个输入框的值，添加到text列和count列，这里就会自动生成柱状图了

如果其中的有输入框为空，后续你们也可以设置弹出提示文字，这里就不详细展开了

但是这样设置会遇到一个问题，就是如果新增的数值大于大于坐标轴的最大值，那么就会出现柱状图超出预定位置的尴尬。所以上面的交互前应该再增加一个条件，就是数据输入框里的文本值如果大于坐标轴的最大值，那我们就要先更新坐标轴。

那么怎么做更新坐标轴呢，我们要先设置自动坐标

3.自动生成坐标轴

在坐标轴载入时，我们设置每个坐标根据最大值来自动获取，案例中是6个坐标，分别为0、1000、2000、3000、4000、5000，5000就是最大值的坐标，0坐标不需要改变，1000的坐标我们可以通过最大值来获取，其实就是最大值乘以五分之一，2000的坐标就是5000乘以五分之二……

所以我们在载入时，用设置文本的交互，根据最大值和对应比例，就可以把其他坐标对应设置好

设置完成之后我们回答添加数据的交互

4.添加新柱状（新增数据大于坐标轴最大值）

如果新增的数据大于坐标轴最大值，这里我们要用设置文本的交互，将输入框里的值设置到坐标最大值里，然后用触发事件，触发每个坐标载入时的交互，这样新的坐标就设置好了。

5.移入高亮效果和显示具体数据

在鼠标移入时，我们用设置选中的交互，将背景矩形设置为真，这样背景矩形就会选中变色了；

然后我们用显示的事件，将数据弹出标签显示出来，用设置文本的交互，将count列的值设置到标签里，这样就可以看到详细的数据了

在鼠标移动时我们用移动的交互，让数据弹出标签跟随鼠标移动，这里需要用到cursor的函数，获取鼠标指针的位置。

鼠标移出时，我们将背景矩形还原，设置为假，就会恢复原来的原色，然后用隐藏的交互将数据标签隐藏起来

6.删除对应柱状图的操作

键盘按键按下时，如果按的是delete键，那我我们就用删除行把鼠标指针所在的当前行删除。

那怎么判断哪一行是鼠标指针所在的行呢？前面我们鼠标移入的时候会选中背景矩形，那我们只需要判断哪个背景矩形被选中了，哪个就是需要被删除的行。

7.框线尺寸自适应

最后，我们还要根据中继器里的数据设置框线的尺寸，宽线的尺寸。

框线组的高是不变的，只有宽度在变，其实就是中继器的宽度，所以我们可以用函数获取中继器的宽度，然后在中继器最后加载完成之后，用设置尺寸的交互，将宽线的宽度设置为和中继器宽度一致。

这样我们就完成了能增删数据的中继器柱状图的原型模板了，下次使用时，只需要在中继器表格中填写数据和坐标轴最大值，即可自动生成交互效果，是不是很方便呢？

那以上就是Axure教程——能增删数据的柱状图的全部内容了，感谢您的阅读，我们下期见~~~

本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载