Блог

У меня есть одна страница, на которой отображается гистограмма, и значения могут варьироваться от крошечного диапазона (от 0 до 30) до большого диапазона (от 0 до 10000).

Моя проблема заключается в отображении его в div с максимальной высотой, в моем случае столбцы не могут быть больше 90 пикселей.

Один пример:

Зная, что максимальная высота составляет 90 пикселей, я подумал о том, чтобы проверить, какой из них является самым высоким (это означает, что этот показатель равен 100%), а затем остальные — проценты от этого. Таким образом, я могу контролировать высоту (самая большая будет иметь 90 пикселей) каждого и оставаться в пределах высоты.

Мой код до сих пор: (значения в этом коде не связаны с изображением выше)

 $limitedHeight = 90;

$bar1 = 300;
$bar2 = 700;
$bar3 = 150;

$biggestBar = max(array($bar1, $bar2, $bar3));

//knowing this, I will force each bar to the limited height:
//first, for each, get the percentage:
$bar1Percent = intval(($bar1 * 100) / $biggestBar);
$bar2Percent = intval(($bar2 * 100) / $biggestBar);
$bar3Percent = intval(($bar3 * 100) / $biggestBar);

//then, force the new heights:
$bar1Height = intval(($bar1Percent * $limitedHeight) / 100);
$bar2Height = intval(($bar2Percent * $limitedHeight) / 100);
$bar3Height = intval(($bar3Percent * $limitedHeight) / 100);

//place the height into the bars:
echo '<div class="bar1" style="height: ' . $bar1Height . 'px"></div>
<div class="bar2" style="height: ' . $bar2Height . 'px"></div>
<div class="bar3" style="height: ' . $bar3Height . 'px"></div>';
  

Мой вопрос:

Это правильный подход? Или у кого-нибудь есть лучшее решение?

(У этого решения может быть одна проблема: если строка «A» равна всего лишь «10», а строка «B» равна «1000», вычисленная (ограниченная) высота будет иметь огромную разницу, но я полагаю, что так оно и есть, пропорция соблюдается).

Вы можете рассчитать единый масштабный коэффициент, который вы применяете ко всем столбцам:

 $scale = $limitedHeight / $biggestBar;

$bar1Height = intval($bar1 * $scale);
$bar2Height = intval($bar2 * $scale);
$bar3Height = intval($bar3 * $scale);
  

Это просто немного упростит ваши вычисления, но общий подход кажется разумным. И проблема с огромной разницей в высоте неизбежна, когда вы используете линейный масштаб.