Как нарисовать линии по длине в зависимости от процентного соотношения?

Question

[Mirrrta]

Есть 3 линии, одна имеет weight 5, вторая 5, третья 0. Соответственно первые две будут отрисованы на 50% ширины, а третья на 0, как так сделать?

Answer 1

[FinGanapre]

Общий смысл:
1. Нужно получить проценты. Проценты - величина относительная. В моём случае - относительно максимального веса.
2. Становиться ясно, что нужно найти максимальный вес и высчитать относительно него остальные
3. За ширину отвечает width, значит её мы и будем задавать динамически
4. Погнали:) Это только пример. Не нужно реализовывать всё точно так, особенно рендер.

.line {
  height: 10px;
  background-color: #333;
}

// полагаю, вы получаете с сервера нечно такое:
const data = [
  {
    weight: '76'
  },
  {
    weight: '54'
  },
  {
    weight: '30'
  }
]

// находим максимум
const maxWeight = Math.max.apply(null, data.map( item => +item.weight ))

// относительно максимума высчитываем проценты
const percents = data.map( item => {
  return +item.weight / maxWeight * 100
})

// генерируем линии
const generateLine = percents => {
  return percents.map( percent => {
    return `
      <div style="width:${percent}%" class="line"></div>
    `
  }).join('')
}

// делаем функцию для рендеринга
const render = html => {
  document.body.innerHTML = html
}

// рендерим
render( generateLine( percents ) )

Если у вас максимум всегда 10, присваиваем maxWeight 10 и в объекте меняем значения на числа в диапазоне от 0 до 10.

Answer 2

[WapSter]

Использовать формулу вычисления процентов

B/A * 100
A = C * 100 / P

где B искомое число в процентах, A число составляющее 100%, С число составляющее P процентов
Твой случай

A = 5 * 100% / 50% = 10
0 / 10 * 100% = 0 // Так как деления 0 на любое число будет 0

Используешь эти формулы и вставляешь в width. Школьная математика ё-моё