Общий смысл:
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.
