Настройка градиента графика на основе 0% красного - 100% зеленого

#reactjs #math

Вопрос:

Я надеюсь, что смогу объяснить это достаточно хорошо, так что продолжим. У меня есть такой код, как эта песочница, вы можете видеть, что график красный и зеленый. Он показывает минимумы и максимумы относительно своих собственных чисел и не обязательно основан на отрицательных и положительных, так что…

<stop offset="" Управление положением градиента. Я выяснил, что 0% — 100% идеально ровный градиент от красного до зеленого, 80% — 100% делает его красным с последними 20% зеленого и 0% — 20% делает его в основном зеленым до 20% нижней половины красного. (Смотрите изображения ниже)

Таким образом, как вы можете видеть 0 - 20% , график лучше всего работает в примерах, но не будет работать, если кто — то совершит крутое погружение с 0 до-100 долларов.

Я могу вернуть самые высокие (72 доллара) и самые низкие (- 10 долларов) значения на графике, но я не знаю, как перевести это в проценты смещения градиента.

Боже, я надеюсь, что объяснил это правильно.

0 - 100%

0 - 20%

80% - 100%

Ответ №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%'
}

Результаты