Гістограма (від грец. Histos, тут - стовп і. Грама). столбчатая діаграма, один з видів графічного зображення статистичного розподілу будь-яких величин за кількісною ознакою. ("Велика Радянська Енциклопедія").
Сьогодні захотів написати бібліотечку для побудови гістограм, або стовпчастих діаграм. Ось таких ось:
Отже, нам потрібно створити Perl-клас для формування html-коду, для побудови гістограм. Зовнішній вигляд діаграм задавати будемо через CSS.
На вхід подаються дані, у вигляді посилання на хеш-масив. Ключі хеша йдуть в нижньому рядку, як підписів. Значення - числа.
Після обробки, ми повинні отримувати html-код, який можна привести в порядок за допомогою CSS. Цей html-код повинен зображувати діаграму, у вигляді вертикальних стовпців.
use BarChart;
my $ g = new BarChart;
$ G-> setData (
'Плюшки' => '20',
'Ватрушки' => '45',
'Пряники' => '30'
>
);
$ G-> height (200);
my $ graph = $ g-> generate;
print $ graph;
Повний код не буду приводити. Можете скачати цей клас і розібратися самостійно. Він зовсім не складний.
Як з цим працювати
- Створюємо об'єкт класу BarChart
- Передаємо об'єкту посилання на хеш, що містить пари "назва - число"
- Встановлюємо виосту майбутньої діаграми (за замовчуванням 300px)
- При необхідності, відключаємо висновок значень на шпальтах ($ g-> showValues (0))
- Генеруємо html ($ g-> generate)
- Виводимо готову гистограмму
- Налаштовуємо зовнішній вигляд, за допомогою CSS
HTML на виході буде виглядати приблизно так:
50 | 180 | 100 |
| плюшки | ватрушки | пряники |
Як видно, цієї розмітки цілком достатньо, щоб управляти видом гістограми через CSS. Пропоную свій варіант:
.graph. graph tr. graph td border: 0px;
padding: 0px;
margin: 0px;
vertical-align: bottom;
text-align: center;
>
.graph border: 1px solid silver;
>
.graph_col text-align: center;
>
.graph_col div width: 30px;
background-color: blue;
color: white;
margin: 10px 3px;
>
.graph_legend td background-color: Green;
color: White;
padding: 5px;
>
Спробуйте зробити щось оригінальне.
Гідності й недоліки
Недоліки: Не можна перевернути гистограмму на бік. Не можна робити стовпчики різного кольору, так як вони належать одному CSS-класу. Крім того, не можна задати порядок виводу стовпчиків, так як вони спочатку передаються в хеше, який невпорядковані. Однак, при нескладної доробки, цей недолік можна усунути.
До переваг можна зарахувати простоту використання і зміни зовнішнього вигляду.
Ви можете завантажити цей клас і використовувати як захочете.
Посилання в тему
Google chart API дозволяє будувати діаграми, у вигляді зображень, не докладаючи зусиль. Дуже багато можливостей і зручний інтерфейс.
Хто ще знає які бібліотеки або способи будувати діаграми? Поділіться ссилочку на матеріали.