Представьте число с цветом, разница не достаточно для RGB на основе процента - PullRequest
Новая
       17

Представьте число с цветом, разница не достаточно для RGB на основе процента

0 голосов
/ 06 июня 2019

У меня есть массив (1200 значений) чисел

[123, 145, 158, 133...]

Я хотел бы иметь div для каждого значения с цветом фона от красного до зеленого, красный -самое маленькое число и зеленое самое большое.

Базовая настройка выглядит следующим образом: (шаблонизируется с помощью vuejs, но не имеет отношения к проблеме) 

const values = [123, 145, 158, 133...]; // 1200 values inside
const total = values.length;

<div
  v-for="(val, i) in values"
  :key="i"
  :style="{backgroundColor: `rgb(${(100 - (val*100/total)) * 256}, ${(val*100/total) * 256}, 0)`}">
  {{val}}
</div>

Я не специалист по математике, но, поскольку всемои числа около 100, сгенерированный RGB одинаков.(около 12% желтоватого цвета)

Как я могу придать больший вес разнице между 137 и 147?

РЕДАКТИРОВАТЬ: окончательная формула: 

:style="{backgroundColor: `rgb(${(256/(maxValue-minValue) * (boule-maxValue) - 255)}, ${(256/20 * (boule-maxValue) + 255)}, 0)`}"

result

Ответы [ 3 ]

2 голосов
/ 06 июня 2019

Оформить заказ: https://stats.stackexchange.com/questions/70801/how-to-normalize-data-to-0-1-range.

По сути, вы хотите линейно изменить масштаб ваших значений на другой интервал.Вам нужны текущие значения min и max из массива.Затем определите новые min' и max', которые являются пределами нового интервала.В вашем случае это будет [0, 255].

Чтобы выполнить преобразование, используйте формулу: newvalue= (max'-min')/(max-min)*(value-max)+max'

Например: если ваше значение min равно 127 и значение max равно147, и вы хотите отобразить 137. Затем: 256/20 * (137-147) + 255, что приводит к 127.

Если вы хотите отобразить 130. Затем: 256/20 * (130-147) + 255 = 37.4.

1 голос
/ 06 июня 2019

Вы можете взять своего рода лупу для диапазона данных. В этом примере значения между 20 и 30 отображаются в два раза больший диапазон, чем внешние значения внутри интервала 0 ... 100. 

function magnifier(value, start, end, factor) {
    var middle = (start + end) / 2,
        size = (end - start) * factor / 2,
        left = middle - size,
        right = middle + size;

    if (value <= start) return value * left / start;
    if (value <= end) return (value - start) * factor + left;
    return (value - end) * (100 - right) / (100 - end) + right;
}

var i;

for (i = 0; i <= 100; i += 5) {
    console.log(i, magnifier(i, 20, 30, 2));
}
.as-console-wrapper { max-height: 100% !important; top: 0; }
1 голос
/ 06 июня 2019

Это действительно зависит от значения этих значений

Однако вы можете попробовать это: если ваши значения всегда больше 100 и всегда меньше 150 (вы можете выбрать эти числа, конечно), вы можете«растянуть» ваши значения, используя значения как минимальные и максимальные.Давайте возьмем 137 и 147 в качестве примеров: 

(val-min) : (max-min) = x : 255

(137-100):(150-100) = x:255  ->  37:50 = x:255  ->  188

(147-100):(150-100) = x:255  ->  47:50 = x:255  ->  239

Это для математики.В конце концов, это расчет: 

newValue = (val-min)*255/(max-min)

, где min и max - выбранные вами значения.

...