PHP: простой progress bar для отображения процентов

Маленький класс, который мне понадобился сегодня, показывает, сколько целых процентов составляет величина $n от интервала [$min;$max], принятого за 100%, например, значение -2 для интервала [-5;5] - это 30%. Написать такой скрипт ещё проще, чем столбцовую диаграмму для нескольких величин.

Если величина по какой-то причине вышла за свои пределы, элемент будет пустым или заполненным на 100%, а надпись всё равно покажет значение в процентах, меньшее 0 или большее 100.

Для каждого вызова класса формируется собственный список из трёх стилей, с именами, зависящими от отображаемого количества процентов, например, для 30% получатся стили progress30 для обрамления, bar30 для вложенного элемента, показывающего прогресс в процентах и percent30 для надписи. Это уменьшит шансы на конфликт стилей. Впрочем, всё это легко поменять в исходнике.

Индикатор прогресса показывается в блочном (занимающем отдельное место по вертикали) разделе <div>. Возиться с чем-то вроде <span style="display: inline-block;"> не хотелось, из-за того, чтобы не бороться потом с лишними отступами во вложенном элементе.

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

Ниже показан скриншот вызова скрипта + исходник вместе с этим вызовом.

скриншот

<?php
 class Bar {
  private $header, $n, $min, $max;

  function __construct ($header, $n, $min, $max) {
   $this->header = $header;
   $this->n = round ($n,2);
   $this->min = $min;
   $this->max = $max;
  }

  function getStyle ($m) {
   return '<style type="text/css">
   .progress'.$m.' {
    position: relative;
    width: 500px;
    border: 1px dotted black;
    padding: 0px;
   }
   .bar'.$m.' {
    height: 20px;
    background-color: green;
    width: '.$m.'%;
   }
   .percent'.$m.' {
    position: absolute;   
    left: 50%;
   }
   </style>'."\n";
  }

  function get () {
   $m = round(0 + ($this->n-$this->min) * 100/($this->max - $this->min));
   $rm = $m; //реальные проценты
   if ($m < 0) $m = 0;
   else if ($m>100) $m = 100;
   $string = $this->getStyle($m)."\n";
   $string .= '<p>'.$this->header.': '.$this->n.'</p><div class="progress'.$m.
    '"><span class="percent'.$m.'">'.$rm.'%</span><div class="bar'.$m.'"></div></div>'."\n";
   return $string;
  }

  function show () {
   echo $this->get();
  }
 }

 //Ниже - код для вызова класса
 $n=-2; $min=-5; $max=5;
 $bar = new Bar('Величина 1',$n,$min,$max);
 $bar->show();
 $bar = new Bar('Величина 2',139,0,10);
 $bar->show();
?>

P.S. Если баров становится много, возможно, целесообразней снабдить их идентификаторами, чем пытаться назначать имена стилей по процентам заполненности. Также можно добавить аргумент-цвет, вот что примерно получится (проверено в PHP 8).

Файл bar.php

<?php
 class Bar {
  private $id, $header, $n, $min, $max, $color;

  function __construct ($id, $header, $n, $min, $max, $color='#cfc') {
   $this->id = $id;
   $this->header = $header;
   $this->n = round ($n,2);
   $this->min = $min;
   $this->max = $max;
   $this->color = $color;
  }

  function getStyle ($id,$m,$c='#cfc') {
   return '<style>
   .progress'.$id.' {
    position: relative;
    width: 510px;
    border: 1px dotted black;
    padding: 0px;
    display: inline-block;
   }
   .bar'.$id.' {
    height: 24px;
    background-color: '.$c.';
    width: '.$m.'%;
   }
   .percent'.$id.' {
    position: absolute;   
    font-size: 80%; 
    left: 33%;
   }
   </style>'."\n";
  }

  function get () {
   $m = round(0 + ($this->n-$this->min) * 100/($this->max - $this->min));
   $rm = $m; //реальные проценты
   if ($m < 0) $m = 0;
   if ($m>100) $m = 100;
   $string = $this->getStyle($this->id,$m,$this->color)."\n";
   $string .= '<div class="progress'.$this->id.'"><span class="percent'.$this->id.'">'.
    $this->header.': '.$this->n.' ('.$rm.'%)</span><div class="bar'.$this->id.'"></div></div>'."\n";
   return $string;
  }

  function show () {
   echo $this->get();
  }
 }
?>

Пример вызова (из кода этого блога)

<?php
 //...
require_once('bar.php');
$bar = new Bar(1,'Злописучесть',$notes/$days,0,1,'#fcc'); //Норма - 1 пост в день
$bar->show();
$bar = new Bar(2,'Густопсучесть',$blocks/$notes,0,5); //Норма - 5 блоков на пост
$bar->show();
$bar = new Bar(3,'Дурчитучесть',$visits/$days,0,3000,'#ccf'); //Норма - 3000 визитов в день
$bar->show();
$bar = new Bar(4,'Комментучесть',$comments/$notes,0,1,'#ffc'); //Норма - 1 коммент на пост
$bar->show();
$bar = new Bar(5,'Тегучесть',$clouds/$notes,0,4,'#fcf'); //Норма - 4 тега на пост
$bar->show();
$bar = new Bar(6,'Спамучесть',1-$comments/$comments0,0,1,'#cff'); //Норма - 50% не-спама
$bar->show();
 //...
?>

17.02.2018, 17:26 [4790 просмотров]