Делать "подобный бар", используя соотношение, а не отдельные входы?

Question

Итак, вы знаете, как на YouTube есть бар нравится и не нравится? Но он изменяется в зависимости от пропорции (то есть, полоса всегда имеет одинаковый размер, зеленая и красная части занимают разное количество в зависимости от соотношения "нравится / не нравится".

у меня есть около 200x5 места для заполнения на странице опроса, и я знаю, как назначить, скажем, 1 пиксель за нажатие кнопки, но это было бы бесполезно, если бы я получил только 1 клик или 1 000 000 кликов, как это выглядело бы смешно на моей странице. так что мне нужно, чтобы он был "на основе отношения", а не "на основе числа".
Кто-нибудь может мне помочь и сказать мне, как это сделать?

Answer 1

Почему бы просто не рассчитать соотношение и умножить его на количество пикселей?

В PHP:

// inputs: $n_likes, $n_dislikes 

$bar_width = 200; 
$bar_height = 5; 

$ratio = $n_likes/($n_likes + $n_dislikes); 

$n_green_pixels = round($bar_width * $ratio); 
// not even needed: $n_red_pixels = $bar_width - $n_green_pixels; 

// create a bar-image: 
$bar = imagecreatetruecolor($bar_width, $bar_height); 

// fill the whole image with red color: 
$red = imagecolorallocate($bar, 255, 0, 0);
imagefilledrectangle($bar, 0, 0, $bar_width-1, $bar_height-1, $red); 

if($n_green_pixels > 0)
{
  // draw a green line over the red background: 
  $green = imagecolorallocate($bar, 0, 255, 0);
  imagefilledrectangle($bar, 0, 0, $n_green_pixels-1, $bar_height-1, $green); 
}

// output the image and perform cleanup: 
imagepng($bar); // here: output directly to the browser, include filename as 2nd argument to write to a file 
imagedestroy($bar); 

Answer 2

Предполагая, что у вас есть $ лайки (всего лайков), $ голосов (всего лайков + дислайков) и $barWidth (общая ширина бара в пикселях...

Сначала получите отношения:

$likesRatio = $likes/$votes;

Так что если у вас есть 1 лайк из 3 голосов, это даст 0,33.

Затем умножьте на количество пикселей:

$likesPixels = $likesRatio * $barWidth;
$dislikesPixels = $barWidth - $likesPixels;

Таким образом, 0,33 * 200 = 66 пикселей, красный будет 134 пикселей (200 - 66).

Затем назначьте пиксели.