欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~

导语

相信大家跟我一样,偶尔会疑惑:曾经年少的时候学习过的那么多的复杂的数学函数,牛逼的化学方程式,各种物理原理、公式,到底有什么用?但事实是,我们所学习过的东西,虽然很多不能够准确地记得全部,但已经潜移默化地影响到我们的思维模式,很多时候给我们解决一些工作、甚至是生活中的问题,提供了建模的方案,比如,在实现某个需求的时候需要做动画衰减,可能就能够通过匀减速运动公式去实现,再比如,本文所要介绍这个案例,整个实现过程其实并没有多么难多么复杂,但从实际问题到模型建立的思维推导过程,笔者认为还是很有意思也很有意义的,所以,也希望能够分享给大家。

一、 背景问题

有个需求是要将每日消费数据以柱状图形式呈现,我们有追求的设计师希望柱子高度在超过某个限额(设为valueNormal)时不再正比增长,而是越来越缓慢地增长,目的是使柱子高度不会出现有些特别高,有些特别矮的情况,那么,要怎么才能够实现这个需求呢?下面将介绍对于这个问题的思路梳理及实现过程。

二、 思路梳理

1. 模型建立:

首先,回到最初目标:使柱子在超过valueNormal之后,高度增长速度越来越慢。也就是说,在消费金额小于等于valueNormal时,柱子高度成正比增长;大于valueNormal时,大于valueNormal的部分,所占高度随着值的增加增长速度越来越慢。其次,整个柱状图的高度是一定的(设为heightMax),毋庸置疑,最大的消费金额值(设为valueMax)的柱子高度就是heightMax。然后我们对于valueNormal值的柱子的高度设定为heightNormal。这样,这个问题最终就转换成这样的模型:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

其中rat就是超过valueNormal的部分的高度在heightMax – heightNormal中所占的比例,要求(1)rat值随消费金额值的增加而增加;(2)增加速度逐渐趋缓;(3)rat值的变化区间是0~1;

那么,根据这个模型,我们需要确定的有以下三个值:(1)valueNormal值如何取;(2)heightNormal值如何取;(3)rat值的计算方法如何确定。这里valueNormal和heightNormal值可能需要根据业务不同要求等来具体确定,并且在整个程序的生命周期内,不会发生变化,我们下面主要讨论rat值的计算方法。

2. rat值的函数设计:

根据1中的模型对rat值的要求,最先想到了渐进函数,最简单的渐进函数y = 1/x, 函数图如下:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

在x>0时,y值随x值增加而越来越小,并且减小速度逐渐趋缓,最后无限趋近于0

y = -1/x:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

在x>0时,y值随x增加而越来越大,并且增长速度逐渐趋缓,最后无限趋近于0。这个函数变化趋势已经跟我们所要的效果很像了,区别在于:我们要求从0开始逐渐趋近于1,继续改造:

y = 1 – 1/x:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

y = 1 – 1/(x+1):

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

当x>0时,y从0开始逐渐增加,并且增长速度逐渐趋缓,最终趋近于1,这就是我们要的效果了。

3. 应用于实际场景:

2中所得函数式运用于1中模型,x就是value-valueNormal,y就是rat,那么,也就是说当value-valueNormal=1是,rat = 1/2; value-valueNormal=2时,rat = 2/3。那么在实际该消费数据的场景下,相当于高于valueNormal值1块的消费金额就占了heightMax-heightNormal部分的一半高度,之后随着value值继续增加,其高度的增加范围只是heightMax-heightNormal部分的一半,显然是不合理的,因此这里函数式要进一步加参数调整,调整为:y = 1- 1/(x/a + 1) = x/(x+a),这样,当value-valueNormal = a时,value的高度就是heightNormal + (heightMax-heightNormal)*1/2。

到这里1中模型就变为:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

接着,就剩下确定valueNormal, heightNormal, a的取值如何确定的问题了,通过实验,最终选用了valueNormal是某个月份的消费日均值(设为Average),heightNormal是整个柱状图高度的1/2,a是Average的一半。这样,这个模型就具体化为:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

化解为:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

将一个实际例子套用到该模型中,9月份总消费金额是121669元,该月日均消费金额是4055.63元,假定HeightMax = 5000,整体函数示意图如下所示:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

可以看出这是完全符合我们最初设计要求的:在消费金额小于等于日均消费金额值时,柱子高度随金额值增加成正比增长;之后,随着消费金额值的增加,柱子高度仍然不断增长,但增高幅度越来越缓慢,最终无限趋近于柱状图总高度。

三、 实现效果:

最终实现效果如下:

数学之美?编程之美?数学 + 编程= unbelievable 美!-LMLPHP

完美!

相关阅读

一站式满足电商节云计算需求的秘诀

腾讯爆款游戏收割机的背后,MTA 4 年内覆盖 150 万 APP

Bloom Filter 的基本原理和实现

此文已由作者授权腾讯云技术社区发布,转载请注明文章出处

原文链接:https://cloud.tencent.com/community/article/272925

海量技术实践经验,尽在腾讯云社区

海量技术实践经验,尽在腾讯云社区! https://cloud.tencent.com/community
05-08 08:42