Как преобразовать массив значений в html свойства?

Question

Есть такой массив arr, в нем несколько значений по возростанию.

Нужно из значений этого массива нарисовать линии в блоке div, где его высота 138px. Тоесть самое минимальное значение 1587 это 0px, а 4870 это 138px

Здесь как я понял нужно какое то математическое уравнение составить

var arr = [1587, 2548, 2987, 3587, 4870];

arr.forEach(function(val){
  $('.items').append('<div class="item"></div>').css('top', val +'px');
});

.items {
  width: 200px;
  height: 138px;
  border: 1px solid #000;
  position: relative;
}
.item {
  height: 1px;
  width: 200px;
  background: #000;
  position: absolute;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='items'></div>

Вообщем нужно сделать рабочим этот код

Answer 1

var arr = [1587, 2548, 2987, 3587, 4870];
var wrapper =   document.getElementById('items');

arr.forEach(function(val){
  let vvv = 138*(val - 1587)/(4870 - 1587);
  let newElem = document.createElement("div");
  newElem.className = "item";
  newElem.style.top = vvv+"px";
  wrapper.appendChild(newElem);
  });

#items {
  width: 200px;
  height: 138px;
  border: 1px solid #000;
  position: relative;
}
.item {
  height: 1px;
  width: 200px;
  background: #000;
  position: absolute;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='items'></div>

БЛОГ НА HUSL

Как преобразовать массив значений в html свойства?

Ответы (1 шт):