Axure交流分享:根据在表格中自定义的数据生成统计柱状图

本文作者主要分享了一个复用性还算高的统计图以及数据表格原型，一起来文中看看~

笔主在一家ToB医疗数据公司做产品，由于公司体制不完善并且每次产品开发周期短，每次做的原型都会被开发喷不保真。

因为经常会涉及到统计图、表格这些东西，一般没有时间做高保真的情况下，会直接用axure拉几个框或者贴张图片简单制作一个。为了不再被开发哥哥喷，这次就用工作之余做了一个复用性还算高的统计图以及数据表格原型。

作为一个经常潜水的产品小白，第一次发文章，如有不足之处，还望指正。

生成不同的柱状图

生成统计图

（1）根据选中表格中不同的数据行生成不同的数据，在这里表格是用中继器来完成，统计图（左）用的是五个长方形来根据不同的数据改变尺寸，统计图（右）是在另一个中继器里放了一个长方形，这里数据的传递用的是全局变量。

统计按钮点击事件

（2）为什么右边的统计图要用中继器呢？

目的是想在后面有空的做一个图表的统计项，也可以增加和筛选的功能。

表格数据的添加与编辑

添加数据行

1. 点击添加行新增一行，点击编辑输入数据，点击保存后即可完成对该行数据的保存。
2. 选中改行，点击统计，即可生成新的数据统计图。
3. 表格中有合计一项，是不可编辑的。在点击保存后自动完成对第二到六列数据的统计。

添加行按钮点击事件

编辑点击事件

表格数据的删除与修改

编辑与删除(原文件过大，压缩后有点糊)

点击编辑对该行数据进行修改，点击删除删除该行数据。因为我是把添加行放在中继器中的，所以当删除到最后一行时，不会真的删除，只会把当前行所有的数据设为0。

删除按钮点击事件

表格中统计项的修改

表头修改

（1）点击表格左上的修改表头，可对表格表头进行修改。图中的示例表头为科目分数统计，可在网页中进行自定义修改。修改完点击保存，在下一次统计时，统计图的每一个统计项也会进行改变，这个过程中数据的传递同样用到的是全局变量。

（2）修改用例与添加时的编辑一致，编辑时的文本框类型笔主设置的只允许数字，可自行更改。

修改表头点击事件-1

修改表头点击事件-2

数据全部删除后新增

全部删除后新增行

这个和上面对编辑与删除行的介绍一致，主要展示了删除后的新增。

表格数据的查找与分页

因为之前在统计图与中继器之间数据的传递费的时间比较多，查找和分页是在写这篇分享的时候顺手做的，没有生成GIF动图。查找与分页应该大家也都比较了解，这里放就先暂且放图片。

对名称的模糊搜索

文本改变时的检索

因为做起来比较繁琐，这里的搜索我是从网上找了两个制作好元件然后自己进行了修改。

搜索结果

分页展示

分页模块可以显示当前的页面与总页面，在输入页面进行目标页面的跳转。

PS：Axure对中文不太友好，如果在对文本框进行输入的时候输不进去建议输入法切换为英文。

文件地址

展示地址：https://q9qpex.axshare.com/index.html

源文件链接：https://pan.baidu.com/s/15BLE0dndNt5fSYdQ153jeg

有任何问题欢迎在下方留言。

本文由 @ Juvenile 原创发布于人人都是产品经理。未经许可，禁止转载

题图作者提供