Простая столбцовая диаграмма на PHP

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

В заметке представлен простейший скрипт для построения горизонтальной гистограммы на основе маленького класса PHP и табличного элемента HTML.

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

Вот скрипт в работе, а вызвал я его здесь таким кодом -

<?php
 $arr = array (
  'Сделанные теги:'=>191,
  'Найденные баги:'=>67,
  'Два весёлых гаги:'=>2
 ); //Массив с парами данных "подпись"=>"значение"
 require_once('SimplePlot.php'); //Подключить скрипт
 $plot = new SimplePlot($arr); //Создать диаграмму
 $plot->show(); //И показать её
?>

Всё предельно просто, не так ли? :)

Дополнительным аргументом конструктора можно задать ширину основной ячейки со столбцами, по умолчанию эта величина равна 100 пикселам (см. в коде). Разумеется, можно сделать больше настроек, но это усложнит класс, который был нужен нам максимально компактным.

Вот полный код скрипта (файл SimplePlot.php):

<?php
 class SimplePlot {
  private $data = array(), $headers=array(), $percent = array(), $pixels = array();
  private $width, $sum, $count;

  function __construct ($data,$width=100) {
   $this->width = $width;
   $this->headers = array_keys($data);
   $this->data = array_values($data);
   $this->count = count($this->data);
   $this->sum = array_sum($data);
   for ($i=0; $i<$this->count; $i++) {
    if ($this->sum) $this->percent[$i] = max(0,round($this->data[$i]/$this->sum*100.,1));
    else $this->percent[$i] = 0;
    $this->pixels[$i] = max(1,min($this->width,round($this->percent[$i]/$this->width*100.,0)));
   }

  }

  function getStyle() {
   return '<style type="text/css">
    .plotTable {
     border: 0;
     margin: 0;
     padding: 2px;
    }
    .plotHeaderCell {
     text-align: right;
    }
    .plotDataCell {
     text-align: left;
     vertical-align: middle;
     width: '.$this->width.'px;
    }
    .plotItemInCell {
     display: inline-block;
     height: 1em;
     vertical-align: middle;
     background-color: blue;
    }
    .plotCountCell {
     text-align: left;
     vertical-align: middle;
    }
   </style>'."\n";
  }

  function get () {
   $string = $this->getStyle().'<table class="plotTable">'."\n";
   for ($i=0; $i<$this->count; $i++) {
    $string .= '<tr><td class="plotHeaderCell">'.$this->headers[$i].'</td>'."\n";
    $string .= '<td class="plotDataCell"><div class="plotItemInCell" style="width: '.
     $this->pixels[$i].'%;"></div></td>'."\n";
    $string .= '<td class="plotCountCell">';
    $string .= $this->data[$i].' ('.$this->percent[$i].'%)';
    $string .= '</td></tr>'."\n";
   }
   $string .= '</table>'."\n";
   return $string;
  }

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

Стиль скрипт тоже получает себе сам методом getStyle. Цвет столбца берётся из стиля и всегда синий, при необходимости это легко поправить. Диаграмма будет работать и при отключённой графике, так как для закрашивания столбца используется пустой элемент <div> с фоновым цветом. Javascript и cookies также не нужны.

Чтобы отображался фоновый цвет в пустом <div>, достаточно задать ему высоту в свойствах CSS, фоновые рисунки размером 1 на 1 пиксел по типу <img src="void.gif" width="1" height="1" alt="">, которыми раньше решали эту проблему, теперь не нужны.

Думаю также, что строить примитивные круговые диаграммы картинками - сегодня тоже излишество :)

14.12.2017, 16:47 [5752 просмотра]