基于0%红色- 100%绿色设置图形梯度

Question

我希望我能解释得够清楚，就这样吧。我有一些类似于这个沙箱的代码，你可以看到图是红色和绿色的。它显示出相对于它自己的数字的低点和高点，而不一定是基于消极和积极的，所以.

<stop offset=""控制梯度位置。我已经计算出0% - 100%是完全均匀的梯度红色到绿色，80% - 100%使它与最后的20%绿色和0% - 20%使它主要绿色到20%下半红色。(见下图)

因此，正如您所看到的，0 - 20%图在示例中工作得最好，但是如果有人从0美元急剧下降到-100美元，它将无法工作。

我可以返回图中的最高值($72)和最低值(-$10)，但我不知道如何将其转换为梯度偏移百分比。

上帝，我希望我能正确地解释这一点。

​

​

0 - 100%

​

​

0 - 20%

​

​

80% - 100%

Answer 1

我有很好的东西

首先，通过比较正数来判断大多数是绿色还是红色。然后得到较大数字中较小数字的百分比，并将偏移量设置为这些数字。

var diff = 0
var stopOffsetRed = '0%'
var stopOffsetGreen = '100%'
if (this.state.largestAmountWon > Math.abs(this.state.smallestAmountWon)) {
  diff = (Math.abs(this.state.smallestAmountWon) / this.state.largestAmountWon) * 100
  stopOffsetRed = '0%'
  stopOffsetGreen = diff.toFixed(2) + '100%'
} else {
  diff = 100 - (this.state.largestAmountWon / Math.abs(this.state.smallestAmountWon)) * 100
  stopOffsetRed = diff + '%'
  stopOffsetGreen = '100%'
}

结果

​