Гистограмма (от греч. 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 на выходе будет выглядеть примерно так:

    <table class="graph" cellspacing="0px">
    <tr>
        <td class="graph_col"><div style="height: 50px">50</div></td>
        <td class="graph_col"><div style="height: 180px">180</div></td>
        <td class="graph_col"><div style="height: 100px">100</div></td>
    </tr>
    <tr class="graph_legend">
        <td>Плюшки</td>
        <td>Ватрушки</td>
        <td>Пряники</td>
    </tr>
    </table>

Как видно, этой разметки вполне достаточно, чтобы управлять видом гистограммы через 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 позволяет строить диаграммы, в виде изображений, не прилагая усилий. Очень много возможностей и удобный интерфейс.

Построение диаграмм с помощью GD::Graph - интересная статья об альтернативном представлении диаграмм.

Статья о генерации гистограмм с помощью JavaScript. Довольно интересная и удобная библиотечка. Конечно, не без недостатков.

Кто еще знает какие библиотеки или способы строить диаграммы? Поделитесь ссылочками на материалы.