Вычисление процента из массива чисел

Мне нужно изменить непрозрачность li в зависимости от значения (которое установлено в html).

Итак, вот пример html:

<ul>
    <li class="test">3</li>
    <li class="test">23</li>
    <li class="test">6</li>
    <li class="test">9</li>
    <li class="test">11</li>
    <li class="test">16</li>
    <li class="test">19</li>
</ul>

Таким образом, самое высокое значение (23) будет иметь непрозрачность 100%, а следующее самое высокое (19) будет иметь более низкий процент и так далее.

Минимальное значение должно быть 10%.

Я могу сделать весь JavaScript, я просто борюсь с вычислениями. Есть ли у кого-нибудь идеи, как это можно решить?


javascript percentage math
person CharliePrynn    schedule 05.12.2012    source источник
comment
какая непрозрачность будет иметь наименьшее значение? 50%? 20%? 0%? это немного меняет математику.   -  person zzzzBov    schedule 05.12.2012
comment
Хорошая мысль @zzzzBov, думаю, самое низкое значение будет 10%. Так что все равно видно.   -  person CharliePrynn    schedule 05.12.2012
comment
jQuery может помочь упростить...   -  person Sidharth Mudgal    schedule 05.12.2012
comment
@Sidharth Mudgal Проблема не в javascript. Это расчет. Я не вижу, как jQuery мне поможет. Во всяком случае, у меня уже есть jQuery.   -  person CharliePrynn    schedule 05.12.2012
comment
@CharliePrynn: Так что ваши цифры могут отличаться; вы хотите, чтобы наибольшее число в любом наборе давало вам 100%, а самое низкое всегда давало вам 10% и масштабировало оставшиеся числа в этом интервале?   -  person RonaldBarzell    schedule 05.12.2012

Ответы (6)


arrow_upward
6
arrow_downward

Если самая высокая непрозрачность равна 100%, а самая низкая — 10%, то вот что вам нужно:

  1. Определить максимальное значение. Назовите это макс.
  2. Определить минимальное значение. Назовите это мин.
  3. Для каждого значения назначьте непрозрачность (10 + ((value - min) / (max - min)) * 90) процента.

В более общем случае, если самая высокая непрозрачность равна X, а самая низкая — Y, тогда используется формула (Y + ((value - min) / (max - min)) * (X - Y)).

person Patrick87    schedule 05.12.2012

arrow_upward
2
arrow_downward

Это формула:

percentage = 10 + (number - min)/(max - min)*90
person phant0m    schedule 05.12.2012

arrow_upward
1
arrow_downward

Получите минимум и максимум, затем вы можете рассчитать непрозрачность как:

0.1 + 0.9 * (value - min) / (max - min)

Демонстрация: http://jsfiddle.net/Guffa/FBTBw/

person Guffa    schedule 05.12.2012

arrow_upward
1
arrow_downward

У меня была такая же проблема, и я решил ее следующим образом:

Array.prototype.toPercentage = function() {
  var arr = this
  return arr.map(function(d, i) {
    return (100 * d / arr.reduce((a, b) => a + b, 0)) | 0;
})}

Использование: Учитывая массив, вычислить процентное соотношение каждого элемента в массиве.

var nums = [23, 3, 19, 16, 10, 15]
// the percentage
var numsPercent = nums.toPercentage()
person Elesin Olalekan Fuad    schedule 07.10.2017
comment
для расчета общей суммы вы используете reduce - я согласен. но почему внутри map? представьте массив из тысяч элементов - это будет n петель внутри n петель - person voznik; 21.10.2017

arrow_upward
0
arrow_downward

Я могу представить простой способ сделать это. Допустим, вы хотите задать стиль для всего от 20% до 100% непрозрачности (позже вы можете изменить это, чтобы оно определялось аргументами функции, но пока давайте не будем усложнять). Первая цель — получить максимальное и минимальное значение из списка:

var list = document.getElementsByTagName("ul")[0].children;
var min = Infinity, max = -Infinity;

for (var i = 0; i < list.length; i++) {
   var val = parseInt(list[i].innerText, 10);
   min = Math.min(min, val);
   max = Math.max(max, val);
}

Теперь вы должны просто линейно масштабировать значение непрозрачности каждого, например:

var min_opacity = 20, max_opacity = 100;
for (var i = 0; i < list.length; i++) {
  var val = parseInt(list[i].innerText, 10);
  list[i].style.opacity = (min_opacity + ((val - min) / (max - min)) * (max_opacity - min_opacity)  + "%";
}

Чтобы немного расширить математику: большая часть работы здесь заключается в получении числа в интервале [0,1], где 0 представляет наименьшее значение, а 1 — самое высокое. "(val - min) / (max - min)" выполняет это масштабирование: никакое число не будет больше, чем "max - min", после вычитания из него min, и никогда не будет меньше нуля после вычитания из него min.

person Bubbles    schedule 05.12.2012

arrow_upward
-1
arrow_downward

Percentage_value = (значение/наибольшее_значение)*100

В этом случае непрозрачность пропорциональна значению, а не равномерно распределена. Другими словами, если бы ваши значения были 1, 2 и 10, в этом случае 1 и 2 были бы гораздо менее непрозрачными, чем 10.

Если вы можете получить самое высокое значение в списке, вы можете просто перебрать все значения в списке, каждый раз заменяя «значение» и «самое высокое_значение» фактическими числами.

На что следует обратить внимание:

  • Возможно, вам придется форсировать деление с плавающей запятой, умножив наивысшее_значение на 1,0.

  • Вам также может потребоваться преобразовать значения списка из строк в целые числа или числа с плавающей запятой.

person rorold    schedule 05.12.2012