Axure制作图表教程:表格中自定义数据生成统计柱状图

2018-07-0309:52:36原型设计1 7,208 views1字数 1167阅读模式

在一家ToB医疗数据公司做产品,由于公司体制不完善并且每次产品开发周期短,每次做的原型都会被开发喷不保真。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

因为经常会涉及到统计图、表格这些东西,一般没有时间做高保真的情况下,会直接用axure拉几个框或者贴张图片简单制作一个。为了不再被开发哥哥喷,这次就用工作之余做了一个复用性还算高的统计图以及数据表格原型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

作为一个经常潜水的产品小白,第一次发文章,如有不足之处,还望指正。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

生成不同的柱状图

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

生成统计图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

(1)根据选中表格中不同的数据行生成不同的数据,在这里表格是用中继器来完成,统计图(左)用的是五个长方形来根据不同的数据改变尺寸,统计图(右)是在另一个中继器里放了一个长方形,这里数据的传递用的是全局变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

统计按钮点击事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

(2)为什么右边的统计图要用中继器呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

目的是想在后面有空的做一个图表的统计项,也可以增加和筛选的功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

表格数据的添加与编辑

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

添加数据行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

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

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

添加行按钮点击事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

编辑点击事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

表格数据的删除与修改

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

编辑与删除(原文件过大,压缩后有点糊)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

点击编辑对该行数据进行修改,点击删除删除该行数据。因为我是把添加行放在中继器中的,所以当删除到最后一行时,不会真的删除,只会把当前行所有的数据设为0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

删除按钮点击事件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

表格中统计项的修改

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

表头修改文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

(1)点击表格左上的修改表头,可对表格表头进行修改。图中的示例表头为科目分数统计,可在网页中进行自定义修改。修改完点击保存,在下一次统计时,统计图的每一个统计项也会进行改变,这个过程中数据的传递同样用到的是全局变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

(2)修改用例与添加时的编辑一致,编辑时的文本框类型笔主设置的只允许数字,可自行更改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

修改表头点击事件-1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

修改表头点击事件-2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

数据全部删除后新增

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

全部删除后新增行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

这个和上面对编辑与删除行的介绍一致,主要展示了删除后的新增。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

表格数据的查找与分页

因为之前在统计图与中继器之间数据的传递费的时间比较多,查找和分页是在写这篇分享的时候顺手做的,没有生成GIF动图。查找与分页应该大家也都比较了解,这里放就先暂且放图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

对名称的模糊搜索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

文本改变时的检索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

因为做起来比较繁琐,这里的搜索我是从网上找了两个制作好元件然后自己进行了修改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

搜索结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

分页展示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

Axure制作图表教程:表格中自定义数据生成统计柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

分页模块可以显示当前的页面与总页面,在输入页面进行目标页面的跳转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

PS:Axure对中文不太友好,如果在对文本框进行输入的时候输不进去建议输入法切换为英文。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

文件地址

展示地址:https://q9qpex.axshare.com/index.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

源文件链接:https://pan.baidu.com/s/15BLE0dndNt5fSYdQ153jeg文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4029.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/4029.html
Comments  1  访客  1
    • 阿刚 0

      大神,可否告知下源文件的提取密码呢 :razz: 学习下

    Comment

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定