математика - динамическая диаграмма, поддерживающая ограниченные пропорции

Question

Я создаю очень простую динамическую гистограмму (CSS / PHP), где в основном мне нужно отобразить общее количество контактов пользователя, где каждая ширина полосы - это количество контактов в пикселях (каждый контакт = 1 пиксель) очень тривиально нет?

 _______.____________________600px
|       |                        |
| mario | ===== (54) px          |
| julie | ========= (65) px      |
| john  | === (40) px            |
| mary  | ============= (70) px  |
|_______|________________________|
        0%   30%   50%   80%   100%

Теперь моя проблема в том, что граф-контейнер должен иметь фиксированную ширину, скажем, 600 пикселей, так что произойдет, если у одного из них будет более 600 контактов? да, я знаю, это напортачить. ; -)

Итак, как конвертировать в проценты таким образом, чтобы каждый общий масштаб соответствовал и никогда не достигал конца графика?

Спасибо заранее.

Answer 1

Суммируйте все свои значения (54 + 65 + 40 +70 = 229), рассчитайте процент каждого значения (54/229 = 23,58%), а затем примените этот процент к 600px (600 * .2358 = 141,48) , Затем вы можете установить это значение как ширину вашего бара (таким образом, первый бар будет 141px).

В коде это может выглядеть примерно так (хотя вы, вероятно, вычислите эти значения в цикле):

$total = 229;
$bar1 = 54;
$bar1Length = round(600 * ($bar1/$total)); // 141

Answer 2

Если ширина, доступная для столбцов, равна totalWidth, вы делаете что-то вроде этого (в псевдокоде C, я не знаю PHP):

int maxContacts = 0;

for (int i = 0; i < numberOfUsers; i++)
{
    if (users[i].numberOfContacts > maxContacts)
        maxContacts = users[i].numberOfContacts;
}

// now you have the max number of contacts

for (int i = 0; i < numberOfUsers; i++)
{
    widthPercent = users[i].numberOfContacts / maxContacts; // this is the percentage
    display_width_for_this_user = totalWidth * widthPercent; // gives the relative width
}

Answer 3

Что-то вроде

current_width = current_value * (max_width / max_value)

Где max_width = 600px.

Обратите внимание, что это просто псевдокод,Я не могу записать что-то конкретное, потому что ваш вопрос не содержит подробностей.