Axure高保真教程:区间条形图(甘特图)

0 评论 7325 浏览 5 收藏 7 分钟

编辑导语:在进行项目管理以及BI可视化案例中,我们经常会用到的一种分析图——区间条形图,也就是甘特图。但是Axure自带的元件库里并没有我们想要的高保真甘特图,这时我们该如何解决呢?

区间条形图(甘特图)是项目管理中常用的工具,也是BI可视化案例中常用的分析图。

由于Axure自带的元件库里并没有高保真甘特图,所以本期教程主要介绍如果制作高保真甘特图,方便我们日后的使用。

一、制作完成后的评甘特图控件应具备以下效果:

  • 填写坐标轴最大值后,生成坐标。
  • 在中继器表格内填写开始值、结束值,系统自动生成条形图,并移动到对应位置。
  • 鼠标移入时可以查看每一项的具体数据。

原型演示地址:https://k88jd4.axshare.com

二、制作材料

制作材料全部都是用Axure原生的的材料,具体包括以下材料:

1. 中继器

用中继器制作可以实现修改数值就能自动生成交互,中继器表格内容如下:

  • text:填写图标的中坐标名称
  • start:初始值
  • end:结束值

中继器内原型:

  • 纵坐标文本:图表的纵坐标,对应text列。
  • 蓝色条形:后面根据start和end的差值设置尺寸和位置的交互,案例中默认设置宽400,高6。
  • 透明背景矩形:用于鼠标移入时显示数据的交互,案例中默认设置为宽400,高40,元件选中样式为浅蓝色。

将蓝色条形和透明矩形组合,中继器内部3元件如下图所示摆放:

2. 外框线

用垂直线制作外框线,外面最左侧和最右侧为实线,中间的为虚线,根据条形摆放

3. 横坐标文本

有多少根垂线就增加多少个横坐标,第一个默认填写0,其余的可以不用填写,后续根据交互自动计算坐标值。制作完成后如下图所示:

4. 最大值逻辑文本

新建一个文本,填写end列的最大值,后续会用于自动计算,默认隐藏。

5. 数据标签矩形

显示具体数值,增加外部隐藏,默认隐藏元件。

三、制作交互

1. 中继器每项载入时事件

  • 设置文本:将中继器item.text列的值设置到纵坐标文本。
  • 移动事件:将蓝色条形移动到对应位置,具体问start列的值乘以条形的宽度(案例中为400),再除以最大值逻辑文本,得出蓝色条初始的位置。
  • 设置尺寸:设置蓝色条形的尺寸,宽度为end列-start列数值之差,乘以条形的宽度(案例中为400),再除以最大值逻辑文本;高度不变,保持原来的高度。

2. 鼠标移入条形组合时

  • 选中:设置透明背景矩形为真,选中后矩形会变成蓝色。
  • 显示:显示数据标签,将隐藏了的数据标签显示出来。
  • 设置文本:设置数据标签的文本值为中继器表格start列~end列。

3. 鼠标移出条形组合时

这里和鼠标移入时的操作刚好相反。

  • 取消选中:将透明背景取消选中,这样就可以从蓝色变回透明的。
  • 隐藏:隐藏数据标签,将数据标签隐藏。

4. 鼠标在条形组合内移动时

  • 移动:将数据标签移动到鼠标所在的位置,cursor.x函数是获取鼠标的x坐标值,cursor.y是获取鼠标的纵坐标值;加10是为了不会刚好挡住鼠标,导致触发鼠标移出时隐藏标签的时间。

5. 横坐标载入时事件

案例中默认有6个横坐标,出去第一个横坐标为0外,剩下5个横坐标平分最大值逻辑文本。

  • 第一个横坐标:默认填写0,不需要交互事件;
  • 第二个横坐标:最大值逻辑文本/5;
  • 第三个横坐标:最大值逻辑文本/5*2;
  • 第四个横坐标:最大值逻辑文本/5*3;
  • 第五个横坐标:最大值逻辑文本/5*4;
  • 第六个横坐标:最大值逻辑文本/5*5。

需要注意如果最大值除不尽的情况,如果除不尽,需要用fixed函数行四舍五入。

以上就是高保真区间条形图的制作方法了,感兴趣的同学们可以动手试试,谢谢您的阅读。

 

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

题图来自 Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!