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

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

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();
?>

теги: php числа html графика css

17.02.2018, 17:26; рейтинг: 418

  свежие записипоиск по блогукомментариистатистикао "вирусах" в архивах .zip

Наверх Яндекс.Метрика
© PerS
вход