快好知 kuaihz

Axure教程 | 如何制作圆形百分比数据?

数据分析是后台产品经理接触比较多的一个版块,也是很重要的一个功能模块。本文将详细讲解根据输入数值实时显示圆形百分比。

先来看下实际效果:

图片分析设计思路

利用四个半圆,蓝色代表应付款、黄色代表已付款,各个半圆的上下顺序已经很清楚了。

当输入已付款的数值小于应付款的一半时,黄2和黄3根据输入数值的比例旋转角度。

当输入已付款的数值大于应付款的一半时,黄2的位置应该置顶,黄3则固定在右边的位置。

详细教程

(1)元件准备:两个输入框(分别取名:收款、已收款);四个半圆(两个为蓝色,连个为黄色,分别取名为蓝1、黄2、黄3、蓝4,元件图层位置如上图)。

注意: 半圆的制作只能用点击元件右上角小黑点里面的开口圆形来制作,避免用一个圆一个矩形切出来的半圆。

(2)交互设置:当已收款文本改变时设置用例

条件1:已收款的数值小于等于收款的一半时设置交互用例

旋转黄2-绝对位置-角度函数:已收款/收款*360

旋转黄3-绝对位置-角度函数:已收款/收款*360

置顶绿1:

条件2:已收款的数值大于收款的一半且小于收款时设置交互用例

设置黄2为置顶:

旋转黄2-绝对位置-角度函数:已收款/收款*360

旋转黄3-绝对位置-角度:180

设置到这里基本就结束了!如果你还想添加其他的一些效果比如实时显示百分比,可以自己动手做做哦!

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:百分比  百分比词条  圆形  圆形词条  制作  制作词条  教程  教程词条  数据  数据词条  
原型

 产品人必会的Axure RP 9...

产品新人可能会被原型制作给难住,作为产品人的必备技能,可以先从几个方面开始实践,本文作者介绍了一些必要的案例。入职产品经理,或转行产品经理岗位时,遇到的第一个难...(展开)

原型

 Axure:电商网站图片放大镜效...

本文是关于电商网站图片放大镜的实现效果,一起来文中看看~为了加深对动态面板的理解,所以尝试了图片放大镜实现效果,中间也遇到一些小问题。该练习主要用到元件跟随鼠标...(展开)