В номере LXF115 журнала Linuxformat освещается тема использования библиотеки JpGraph для создания графиков в Linux-системах.
О чем говорится в статье?
Статья посвящена внедрению библиотеки JpGraph в проекты, работающие на операционной системе Linux. JpGraph является полнофункциональной библиотекой для создания различных типов графиков и диаграмм на разных языках программирования. Основное внимание уделено использованию JpGraph в Linux-среде с помощью примеров и подробных пошаговых инструкций.
Основные темы статьи
- Введение в JpGraph и его возможности
- Установка JpGraph в Linux
- Настройка окружения для работы с JpGraph
- Создание различных типов графиков с помощью JpGraph
- Интеграция JpGraph с языками программирования (например, PHP, Perl)
- Подробное рассмотрение функций и классов JpGraph
- Примеры использования JpGraph для анализа данных и отображения статистики
Зачем использовать JpGraph?
JpGraph предоставляет разработчикам инструменты для создания профессионально выглядящих графиков и диаграмм в Linux-среде. Библиотека поддерживает различные типы графиков, такие как столбчатые диаграммы, графики линий, круговые диаграммы и другие. Кроме того, JpGraph предлагает широкий набор настраиваемых параметров для каждого элемента графика, что позволяет разработчикам создавать уникальные и интерактивные визуализации данных.
Статья в журнале Linuxformat LXF115 представляет полезное руководство по использованию библиотеки JpGraph для создания графиков в Linux-системах. Она поможет разработчикам овладеть основами работы с JpGraph, настроить его в своем окружении и начать создавать эффективные и профессиональные визуализации данных.
Каждый день мы имеем дело с «большими объемами» визуальной информации. Часть из них — обычный текст, часть — таблицы, часть — графики и диаграммы. И, как оказалось, это лучшие «картинки» для восприятия — хорошо структурированные диаграммы могут сэкономить массу времени и нервов на понимание информации и ее объяснение. Поэтому сегодня мы обсудим графики данных с помощью PHP-библиотеки JpGraph (http://www.aditus.nu/jpgraph/), которая работает на стандартном GD. JpGraph — это мощный инструмент, который позволяет создавать
- Гистограммы
- Круговые диаграммы
- Линейные графики
- Графики цен на акции
- Решетчатые диаграммы
- Диаграмма Ганта
- Изображения для борьбы со спамом (Capthca)
JpGraph — это свободное программное обеспечение, распространяемое по двойной лицензии. Q Public License (QPL) 1.0, которая довольно редко используется в проектах с открытым исходным кодом и в образовании, и традиционная коммерческая лицензия. Однако, в отличие от набора инструментов Qt, который является «производным» от QPL, бесплатная и коммерческая версии имеют разную функциональность. Последняя называется JpGraph Professional и, в дополнение к вышеперечисленному, может рисовать линейные и квадратные штрих-коды, обычно используемые в ветряных турбинах и транзакциях.
Первая диаграмма
Сначала необходимо загрузить библиотеку или получить ее с LXFDVD. Обратите внимание, что в настоящее время доступны два форка: JpGraph 1.x для PHP4 и JpGraph 2.x для PHP 5.1 и выше. Используется последний вариант. Как и большинство библиотек PHP, для установки просто поместите JpGraph в корень вашего сайта и ссылайтесь на него из любого скрипта. Однако это простое действие выполняется в два этапа
1 Подключение сердечника :
2 Подключение дополнительной функциональности (например, если требуется линейный график, необходим скрипт jpgraph_line.php):
Давайте перейдем от слов к действиям и создадим наш первый график. Возьмите среднее количество посетителей в день и постройте график годовой динамики. Создайте файл visits.php и добавьте следующий код (номера строк, конечно, добавлены для удобства чтения).
Диаграммы и графики обычно состоят из ряда данных, представленных в языках программирования в виде массива, который объявляется в строке 5. Конечно, этот пример немного шуточный. Чтобы изменить диаграмму, необходимо отредактировать исходный код. В реальной ситуации информация может быть получена из базы данных или считана из файла. Строка 6 создает объект класса Graph, передавая два параметра (ширина и высота изображения). Следующая строка отвечает за масштабирование. В строке 8 создается линия графика путем передачи данных массива в конструктор класса, а в строке 9 задается ее цвет. Наконец, строка 10 добавляет график к изображению, а строка 11 создает (рисует) непосредственно график.
Рисунок 1. «Первый блин»: все хорошо, но чего-то не хватает.
Итак, первая диаграмма готова (рис. 1), но для тех, кто не готов, она не имеет смысла и не содержит никакой полезной информации. Добавим следующий код после строки 7: ‘Первый блин готов’.
В результате у графика появится заголовок.
А теперь и на русском языке.
Вместо читаемого текста при обновлении страницы отображается «Любимые лающие персонажи». В настоящее время наша библиотека не настроена для работы с кириллическими символами, но это может быть исправлено. В файле jpg-config.inc.php установите константу TTF_DIR, чтобы она включала путь к каталогу шрифтов TTF.
Здесь вы также определяете кодировку и указываете системе использовать UTF-8 в скрипте.
Последнее, что вы должны сделать, это указать в теме графика, какой заголовок вы хотите использовать. Поскольку нас интересует название графика, мы можем добавить что-то вроде
Шрифт Verdana.tf здесь.
Добавьте больше информации в таблицу и продолжайте ее совершенствовать.
Строка 1 определяет внутреннюю вогнутость изображения и задает дополнительные параметры для координатных осей. Таким образом, строки 2 и 5 определяют расстояние между надписью оси и самой осью. 7 Определите шрифт. Обратите внимание, что вы должны установить шрифт для каждого объекта в графике. В противном случае появятся те же «странные» символы.
То, что мы только что сделали, относится ко всему изображению и к осям. Обогатите свой полигон информацией.
На переднем плане определите индикаторы для точек графика (квадраты), определите цвет и шрифт надписи для каждой точки и определите формат выходных значений (числа) в строке 5.
Мы дарим вам два!
Во многих случаях нас и наших потенциальных рекламодателей интересует не только количество уникальных хостов, но и количество показанных страниц (хитов), поэтому добавление еще одного графика может немного расширить картину.
Как и в предыдущем случае, мы создаем объект lot линейного графа. Новым параметром здесь является толщина линии, которая размещается по две на четвертой строке. Не забудьте добавить график к изображению — это делается в строке 5.
При взгляде на диаграмму трудно понять, что означает каждая линия, поэтому добавьте примечание.
Рисунок 2.После нескольких тонких настроек график уже выглядит очень профессионально.
Обратите внимание, что строка 4 изменяет внутреннее поле изображения, определенное в примере выше. Это делается для того, чтобы заметки не закрывали график. Кроме того, замените безличное количество месяцев их именами.
В строке 4 задайте угол, на который будет повернута надпись. Теперь вы можете удалить строку
чтобы имя Луны говорило само за себя. Наконец, мы завершили наши усилия, добавив и раскрасив координатную сетку.
Окончательный результат показан на рисунке 2.
Небольшая помощь для математиков
Помимо проектирования полигонов для определенного набора значений, вы можете проектировать различные математические функции. Создайте новый файл и добавьте следующий код.
Поймите, что происходит в этих строках. Прежде всего, включите библиотеку jpgraph_utils.inc.php, которая содержит вспомогательные средства, в том числе классы (обычный и параметрический) для создания функций, и создайте объект этого класса в строке 5. Обратите внимание, что сама функция представлена строкой, содержащей конфигурацию PHP, включая переменную $ x. Это необходимо для обеспечения безопасности приложения. В строке 6 значение функции вычисляется как пара (x, y = f(x)) с набором точек от 0 до 10.
Рисунок 3. Плавные кривые в JPGraph также полезны.
Строки с 7 по 15, создайте разделения. Особое внимание здесь следует уделить конструкции symchar :: get (‘pi’) — вызову статической функции GET класса Symchar, которая возвращает букву греческого алфавита, в данном случае ‘pi’. В строке 24 вызывается метод setmajtickpositions (), который размещает метки (знаки) в соответствии с рассчитанной позицией.
Возвращаясь еще немного назад, обратите внимание на использование ‘linlin’ вместо ‘textlin’ в качестве первого параметра метода SetScale() в строке 20. Фактически, первый параметр отвечает сразу за два значения, т.е. масштабируемость по осям x и y. Таким образом, в случае textlin масштабирование по x было текстовым, а масштабирование по y — линейным. В случае с linlin они оба линейны и больше подходят для математических графиков. В дополнение к изменению первого параметра, есть четыре параметра, отвечающие за минимальные и максимальные значения x и y.
Строки 22, 25 и 26 определяют шрифт. Единственной новой особенностью здесь является явное отображение размеров: 12, 10 и 10. Все остальные параметры и функции объяснены в примере выше, поэтому теперь давайте посмотрим на результаты (Рисунок 3).
Гистограмма.
Графики готовы — они ясны и информативны, но на этом не заканчиваются. Дайте себе и своим посетителям больше информации о вашем сайте, создав гистограмму количества посетителей в разное время суток.
Модуль гистограммы можно найти в файле jpgraph_bar.php. Добавьте эту библиотеку в свои скрипты.
Работа с гистограммами очень похожа на работу с графиками. Здесь также нужны таблицы для исходных данных, имен и шрифтов, но есть несколько незначительных деталей. Создадим новую гистограмму изображения:
Основным отличием этого кода от предыдущего является строка 8, в которой используется класс BarPlot вместо LinePlot. При отсутствии надписи или легенды трудно получить какие-либо полезные данные из сгенерированной гистограммы. Начните с установки ширины столбцов.
Рисунок 4. Обратите внимание — пик посещаемости приходится на середину рабочего дня. Почему
Максимально возможное значение — 1,0, немного меньше (0,9). Затем добавим значение присутствия в центр столбца.
Если удалить три нижние строки, значения появятся над столбцами, а самый верхний столбец будет иметь значения вне области графика. Чтобы избежать этого, добавьте следующий ряд.
Затем завершите и украсьте фигуру (рис. 4).
Первый ряд добавляет объем колоннам. Мы уже знакомы с остальной частью фигуры.
Часто посещаемость в выходные дни отличается от посещаемости в будние дни, когда люди работают. Здесь может помочь кластеризованная гистограмма. Подготовьте вторую гистограмму, имитирующую трафик на вымышленном сайте в нерабочее время.
Рисунок 5. Гистограммы можно отображать вместе — так легче заметить различия между ними.
Похож на первый, но с другими колоннами и оранжевым цветом. Создайте объект сгруппированной гистограммы и добавьте его к изображению.
Не забудьте прокомментировать строку
Добавлена «Свободная» гистограмма. Наконец, измените угол наклона меток и добавьте легенду.
Меры по борьбе со спамом
Рисунок 6: Меры по борьбе со спамом
В мире существует множество спамеров, флудеров и просто «хороших людей». Более того, многие из них являются программами. Одним из способов защиты от таких «посетителей» является ввод секретного кода пользователя с изображений (так называемых «капч»), отображаемых на сайте. Программам трудно распознавать нестандартные изогнутые символы, но люди могут, и, как вы можете себе представить, JpGraph может их создавать. Достаточно пяти строк, чтобы объяснить, как это работает.
На передней линии подключите дополнительные секции, как обычно. Обратите внимание, что базовая библиотека здесь не требуется. Далее создайте объект антиспама и создайте пять символов в строке 3. Затем вставьте их в изображение и выведите. Все максимально просто и эффективно. LXF
Другие особенности.
Если вам кажется, что вашему графику чего-то не хватает, посмотрите на следующую функцию.
- Эта функция создает график, так как точки соединяются в два участка (горизонтальный и вертикальный). Чтобы активировать его, вызовите метод setStepStyle::
- Метод setFillColour () используется для заливки области под графиком.
- Важно соблюдать очередность. Если график находится выше другого графика, но построен последним, его завершение автоматически обходит все остальные графики. Двигайтесь сверху вниз.
- Изображение первого графика указано в квадратных точках, но если этого кажется недостаточно, можно задать собственный индекс с помощью метода SetType ().
- Первый параметр использует изображение, второй параметр определяет его положение, а третий — местоположение. Например, можно использовать одно из построенных изображений.
Технические аспекты.
Поскольку все скрипты создают изображения вместо HTML-файлов, в заголовке ответа будет написано «Тип содержимого: изображение/PNG», а при попытке экспортировать текст в программу появится сообщение об ошибке. Так как же вводить картинки для своего сайта? Все очень просто: функция SRC определяет URL скрипта, создает файл «на лету» и добавляет метку в HTML-Wrong, который передается в HTML-Document без сохранения на жестком диске. Однако временное хранение имеет смысл для нечастых уведомлений о графиках. Откройте файл jpg-config.inc.php и увеличьте строку.
Затем включите систему временного хранения.
Когда вы создаете объект изображения, вы задаете ему ширину и высоту. Два других параметра проверяют процесс временного хранения.
Значение ‘automatic’ определяет имя файла кэша. В этом случае оно совпадает с именем сценария. Число 60 определяет время жизни, измеряемое в минутах.
