数学之美？编程之美？数学 + 编程= unbelievable 美！

导语

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

一、 背景问题

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

二、 思路梳理

1. 模型建立：

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

其中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, 函数图如下：

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

y = -1/x:

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

y = 1 – 1/x:

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

当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中模型就变为：

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

化解为：

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

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

三、 实现效果：

最终实现效果如下:

完美！