Php для рисования графиков

Рисование графиков

Построение графиков на PHP возможно двумя способами. Можно нарисовать самостоятельно или использовать какую-нибудь библиотеку. Я предлагаю научиться создавать графики самим. Во-первых, потому что хорошие библиотеки являются платными. Во-вторых, используя любую библиотеку, вы ограничены её функционалом. Лучше рисовать графики самостоятельно.

Для начала рассмотрим самый простой вариант. Есть массив, содержащий количество пользователей, которые зарегистрировались на сайте за 5 дней.

Выведем этот массив на страницу в виде графика. Сначала нарисуем оси координат.

3 — создаём изображение

9-13 — засечки на оси x

14-18 — цифры на оси x

19, 20 — засечки на оси y

21, 22 — цифры на оси y

Рисунок должен выглядеть так:

Чтобы нарисовать линию на графике, нужно найти на нём точки, по которым линия будет строиться. На практике можно сразу находить точку и рисовать по ней линию. Но чтобы пример был более понятным, мы разделим задачу на две части. Сначала найдём все точки, потом нарисуем по ним график. Для этого создадим двухмерный массив, в котором будут координаты x и y каждой точки. Для поиска координат нам нужна точка отсчёта. Это та точка, в которой пересекаются оси координат. В нашем рисунке она имеет координаты

Для определения положения каждой точки нужно использовать масштаб графика. В примере мы задали масштаб сами. По оси x для каждого дня создано 100 пикселей. Первый день находится на расстоянии 100 пикселей от начала отсчёта, второй на расстоянии 200 пикселей и так далее. Значит координата x

для первого дня: 50 + 100 = 150

для второго: 50 + 200 = 250.

По оси Y для каждых 10 пользователей выделено 100 пикселей. Значит для одного пользователя — 10 пикселей. Нужно учитывать, что у изображения ось Y направлена вниз, значит нужно не прибавлять значение к точке отсчёта, а вычитать. В первый день на сайте зарегистрировались 2 посетителя.

Координата для этого значения равна: 250 — (2 * 10) = 230

Для второго дня: 250 — (7 * 10) = 180

Таким образом, массив с координатами точек получается такой:

Теперь по ним построим график. Для этого запустим цикл, в котором будем рисовать линии по соседним точкам:

График выглядит так:

Мы рассмотрели самый простой вариант построения графика. Я заранее знал количество дней и максимальное число пользователей. Поэтому я сам выбрал масштаб графика. Но обычно эти данные могут быть разными и масштаб нужно расчитывать. И сам график выглядит немного иначе. Нам привычно, что оси координат начинаются с нуля. Но для удобства отображения это правило иногда не соблюдается. Ось X начинается не с 0, а с 1, чтобы слева от линии не было пустого пространства. А ось Y показывается так, чтобы на график поместились все значения. Например, если минимальное значение: 60, а максимальное: 70, то ось Y содержит именно такой диапазон. Рассмотрим создание такого графика. Создадим для этого новый скрипт.

В примере ось X имеет длину 520 пикселей. Её нужно разделить на одинаковые сегменты для каждого дня. Ось X начинаться не с 0, а с 1. Поэтому сегмента между 0 и 1 не будет и количество сегментов становится на 1 меньше. Если дней 5, то получится 4 сегмента. Формула расчёта такая:

длина сегмента = длина оси / (число дней — 1)

Число может получится дробное, поэтому результат нужно округлить в меньшую сторону.

570 — 50 это длина оси X . Она зависит от размеров изображения.

Ось Y делаем такой, чтобы поместились все значения. Нужно получить минимальное и максимальное значения. Они должны занять всю высоту графика. Зная диапазон, мы сможем рассчитать, сколько пикселей должно соответствовать одному пользователю на графике.

диапазон = максимальное — минимальное

длина сегмента = длина оси / диапазон

Полученное число также нужно округлить.

Сами оси рисуем, как в предыдущем примере:

Поставим засечки и напишем числа:

15 — цикл для каждого дня. Нулевого значения не будет

17 — координата X для засечки. 50 — это точка отсчёта

18 — для первого дня засечки не нужно, он находится в начале оси X

19 — рисуем засечку

20 — пишем цифру

На оси Y не будем ставить засечки для каждого сегмента. Поставим на максимуме и в середине:

22 — координата Y для засечки. 250 — это точка отсчёта. У изображений ось Y направлена вниз, поэтому не прибавляем к точке отсчёта, а вычитаем. При расчёте координаты Y всегда будем отнимать минимальное значение в массиве. Тогда график опуститься вниз, и минимальное значение на графике совпадёт с точкой отсчёта

23 — рисуем засечку

24 — число, которое нужно написать

25 — пишем число

Остальные цифры ставятся таким же способом.

Строим график. Координаты точек, по которым будем рисовать линии, определяются так:

x = точка отсчёта + номер дня * длина сегмента

y = точка отсчёта — (количество пользователей — минимальное значение) * длина сегмента

Запустим цикл, в котором соединим соседние точки:

Результат должен выглядеть так:

Коприрование материалов сайта возможно только с согласия администрации

Источник

Рисование графиков в PHP

Очень часто при создании каких-нибудь сервисов приходится рисовать различные графики. Например, если Вы делаете рекламную сеть, то можно построить зависимости количества переходов по рекламным материалам по дням. Если это какой-нибудь Интернет-магазин, то можно строить графики доходов магазина. Как рисовать графики в PHP, я разберу ниже.

Во-первых, можно всё делать самостоятельно, написав свою библиотеку. Здесь надо учитывать, что координаты в PHP идут на увеличение вправо и вниз, тогда как в математике они идут вправо и вверх. В остальном, ничего особо сложного.

Однако, если писать особо не хочется, то есть просто замечательнейшая библиотека, позволяющая строить самые разнообразные графики, диаграммы, гистограммы и прочее. Целая куча различных возможностей (подписывание осей, рисование нескольких графиков на одной оси, рисование порогов, отображение легенды и прочего) делают данную библиотеку по-настоящему универсальной.

Предлагаю Вашему вниманию пример:

AddPoint(array(0, 1, 4, 9, 16, 25, 36, 49, 64, 81, 100), «Serie1»); // Загружаем данные графика 1
$DataSet->AddPoint(array(0, 1, 8, 27, 64, 125, 216, 343, 512, 729, 1000), «Serie2»); // Загружаем данные графика 2
$DataSet->AddAllSeries(); // Добавить все данные для построения
$Test = new pChart(700, 230); // Рисуем графическую плоскость
$Test->setFontProperties(«Fonts/tahoma.ttf», 8); // Установка шрифта
$Test->setGraphArea(50, 30, 585, 200); // Установка области графика
$Test->drawFilledRoundedRectangle(7, 7, 693, 223, 5, 240, 240, 240); // Выделяем плоскость прямоугольником
$Test->drawRoundedRectangle(5, 5, 695, 225, 5, 230, 230, 230); // Делаем контур графической плоскости
$Test->drawGraphArea(255, 255, 255, true); // Рисуем графическую плоскость
$Test->drawScale($DataSet->GetData(), $DataSet->GetDataDescription(), SCALE_NORMAL, 150, 150, 150, true, 0, 2); // Рисуем оси и график
$Test->drawGrid(4, true, 230, 230, 230, 50); // Рисуем сетку
$Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription()); // Соединяем точки графика линиями
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(), 3, 2, 255, 255, 255); // Рисуем точки
$Test->drawTitle(50, 22, «MyRusakov.ru», 50, 50, 50, 585); // Выводим заголовок графика
$Test->Stroke(); // Выводим график в окно браузера;
?>

В данном примере мы строим параболу и кубическую параболу, а затем выводим этот график в браузер. Также можно сохранять график в файл, для этого вместо Stroke() надо использовать метод Render(«filename.png»).

Возможностей у библиотеки масса, я лишь показал самые-самые базовые. Поэтому если Вам нужно построение графиков на сайте через PHP, то обязательно ознакомьтесь с документацией pChart.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 4 ):

здравствуйте вот хочу попробовать запустить Ваш пример, создаю новый документ, копирую в него код, создаю 2 папки с классами и шрифтами, запускаю в браузере — пустое белое окно.

Причин может быть миллиард, гадать тут бесполезно. Учитесь искать ошибки самостоятельно: http://myrusakov.ru/php-finderror.html Это действительно очень важно!

Привет! подскажи пожалуйста, у меня есть 2 массива со значениями по оси х и по y. Скажем arr1(10, 20, 40, 80, 160, 320) и arr2(-100, -10, 80, 1000, 5000, 20000) Как сделать что бы мои значения были и по оси х и по y, и все в масштабе, + отображались значения точек. Спасибо.

В своей работе использую библиотеку FusionCharts. Мне нравиться простая установка диаграмм и графиков по шаблону. 1. Подключаю Java Script библиотеку FusionCharts. 2. Создаю DIV для вывода графика (id=»chart_container»). 3. Вставляю данные графика в массив chartData. 4. Редактирую массив chartConfig. Это дизайн и параметры диаграммы. 5. Вызываю функцию FusionCharts.ready(function()< var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); >); Подробный код и демонстрация примера: http://profi.spage.me/jquery/creation-of-graphs-chart-and-diagrams-on-java-script

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Создание графиков на PHP с помощью JPGraph

Время чтения: 6 минут

Отправим вам статью на:

Иногда в рамках интернет проекта возникает потребность в визуализации данных. Представление данных в виде графиков и диаграмм дает возможность наглядно убедиться, например, в увеличении/уменьшении объёмов продаж в текущем году по сравнению с прошлым годом, количества посетителей и пр., вариантов великое множество.

Специально для этих целей, ребята из Asial Corporation, разработали библиотеку JPGraph. Это объектно-ориентированная библиотека для создания графики профессионального качестве при использовании минимум кода, написанная на PHP.

Используя JPGraph, можно создавать графики, диаграммы, captcha картинки и даже географические карты. В бесплатной версии библиотеки доступно большинство возможностей, но имеется также и профессиональная версия, позволяющая разработчику получить доступ к дополнительным функциям JPGraph.

Для работы с JPGraph вам понадобится PHP версии 4.3.1 и выше, а также установленная библиотека GD. Поддерживается как первая, так и вторая версия GD.

Для установки библиотеки вам нужно скачать архив http://jpgraph.net/download/
и распаковать из него директорию src (должна содержать файл jpgraph.php) в свой проект или в директорию, где у вас хранятся общие библиотеки, если вы планируете использовать JPGraph в нескольких проектах на одном сервере.

Разработчики библиотеки настоятельно рекомендуют не располагать библиотеку в директориях доступных извне, и я с ними полностью согласен.

Последнее, что нужно сделать, это убедиться, что GD библиотека подключена и работает. Это можно проверить, заглянув в вывод функции phpinfo().

Итак, библиотека установлена, попробуем создать простенький график.

Данный код при выполнении сгенерирует такое изображение:

Рассмотрим ещё неcколько типов графиков, которые предоставляет JPGraph (здесь я не буду приводить полный код примеров, а только новые строки).

Столбчатая диаграмма

JPGraph также предоставляет возможность генерировать 3D проекции.
Отобразим статистику использования браузеров на 1 сенября 2012 года в виде круговой диаграммы.

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

JPGraph предоставляет ещё очень много инструментов для создания всевозможных графиков, например, комбинирование графиков или использование своих изображений для фонов или контрольных точек. Описание всех возможностей JPGraph потребовало бы написания целого ряда статей.

• Поделиться в Facebook
• Share on Linkedin
• Запостить в Twitter
• Сохранить в Pocket
• 0 Репосты

—>

Подпишитесь

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

Источник

Интерполяция: рисуем гладкие графики средствами PHP и GD

Распространенной задачей для программиста является рисование графиков. Входными данными является массив точек (x_i;y_i). Как правило, мы знаем только некоторые значения — в определенных точках графика. Чтобы построить непрерывный график кривой необходимо прибегнуть к интерполяции или аппроксимации.

Интерполяция — построение кривой, проходящей через заданные точки.
Аппроксимация — приближение кривой к исходной, но не обязательно проходящей через заданные точки.

В этом топике я хочу продемонстрировать свою библиотеку для PHP, которая производит интерполяцию с помощью многочлена Лагранжа, C-сплайна и сплайна Акимы, а также аппроксимацию кривой Безье. Дополнительно в ней реализована отрисовка отрезка со сглаживанием (антиалиасингом).

Кратко рассмотрим методы интерполяция и аппроксимации.

Кусочно-линейная интерполяция

Первое, что приходит в голову — соединить точки отрезками:

Самое лучшее решение по быстродействию, однако полученный график получается ломанный — это не то, что нам нужно.

Интерполяционный многочлен Лагранжа

Многочлен степени n для n+1 точек. Формула его весьма проста:

Прост в реализации, но обладает двумя серьезными недостатками:
1) требует значительного объема вычислений
2) непредсказуемо ведет себя между заданными точками (узлами)

Кубический сплайн (c-spline)

Кубический сплайн лишен недостатков предыдущего метода. Для каждого интервала между узлами задается многочлен степени не выше 3, при этом первая и вторая производная функции должна быть непрерывна. Это с одной стороны, упрощает вычисления, а с другой — позволяет избежать резких скачков кривизны.

Реализацию кубического сплайна я портировал из С#-кода, взятого из Википедии.

Сплайн Акимы

У кубических сплайнов есть недостаток: в районе точки, далеко отстоящей от соседей, такие сплайны могут делать неожиданные «выбросы». Эту проблему можно решить использованием сплайнов, предложенных Хироши Акима. Обратите внимание — сплайн Акимы более устойчив:

Реализацию сплайна Акимы я портировал из C-кода программы для debian aspline Дэвида Фрея.

Аппроксимация кривой Безье

Иногда полезно не проводить кривую через заданные точки, а использовать их как опорные. Поможет нам в этом метод кривых Безье (код я портировал из C# примера Толга Бирдала). Кривая проходит через первую и последнюю точки

Тестирование производительности

Проводилось для графика размером 500х500 без отрисовки на сервере Xeon 5560 2.8ГГц, число экспериментов = 1000. Среднее время выполнения, с:

Кол-во точек:	5	15	50
Многочлен Лагранжа	1.789	5.664	20.446
Кубический сплайн	0.153	0.230	0.313
Сплайн Акимы	0.017	0.024	0.049
Кривая Безье	0.244	0.276	0.304

Из приведенной таблицы можно сделать следующие выводы:
1) Время расчета многочлена Лагранжа быстро растет при возрастании количества точек.
2) Сплайн Акимы работает быстрее кубического.
3) Построение кривой Безье медленнее сплайнов.

Выбор метода

Сначала подумайте: нужно ли вам вообще проводить кривую между точками? Если точек мало, может быть лучше использовать таблицу? Если вы имеете дело со статистическими данными по диапазонам группировки (например, средняя температура по месяцам по многолетним данным), то лучше использовать гистограмму.

Если вам необходимо провести кривую через известные точки — я бы рекомендовал использовать сплайн Акимы. Если сами точки не играют большой роли, то я бы аппроксимировал график кривой Безье.

Антиалиасинг

Построение кривой в библиотеке gd можно осуществлять отрезками. Для этого кривая разбивается на участки с определенным шагом (минимум 1 пиксел) и между началом и концом участка проводим отрезок функцией imageline. Однако такой отрезок PHP отрисует без антиалиасинга. На помощь приходит алгоритм рисования отрезка с экранным сглаживанием — алгоритм Ву. Алгоритм Ву умеет отрисовывать только отрезки под углом ±45°, поэтому в остальных случаях его приходится «поворачивать». На рисунке приведен график функции sin(x) без антиалиасинга, а ниже ничего — с антиалиасингом.

Библиотека

Для каждого метода интерполяции/аппроксимации я написал отдельный класс: LagrangePolynomial, CubicSpline, AkimaSpline, BezierCurve. У каждого класса есть 3 публичных метода:
setCoords(&координаты, шаг, [x_min, [x_max]]) — задает исходные координаты и параметры построения кривой, возвращает false в случае ошибки
process() — возвращает массив координат для построения кривой
getError() — возвращает сообщение об ошибке
Координаты передаются в виде массива array(x1 => y1, x2 => y2… xn => yn)

Для построения графика реализован вспомогательный класс Plot. Его возможности весьма скромные (например, нет масштабирования — график строится 1:1), поэтому вместо него вы можете использовать другой класс или нативные функции PHP. Методы:
В конструктор поступает массив координат.
drawLine(изображение, цвет, [x0, [y0]]) — рисует ломанную линию, изображение — идентификатор ресурса, цвет должен быть задан imagecolorallocate, x0 и y0 — смещение начала координат (по умолчанию — в левом нижнем углу изображения)
drawAALine(изображение, цвет, [x0, [y0]]) — рисует ломанную линию с антиалиасингом отрезков, параметры аналогично drawLine
drawDots(изображение, цвет, [x0, [y0, [размер]]]) — рисует точки без соединения отрезками, параметры аналогично drawLine, размер — диаметр точек
drawAxis(изображение, цвет, [x0, [y0, [1кв]]]) — рисует оси, параметры аналогично drawLine, если 1кв=true (по умолчанию), оси рисуются только для первого квадранта — в положительную сторону

Пример (функция sin(x)):

//Для удобства зададим размеры заранее
define ( ‘GRAPH_WIDTH’ , 490 ) ;
define ( ‘GRAPH_HEIGHT’ , 150 ) ;

//Общий абстрактный класс SmoothCurve
include_once ( ‘SmoothCurve.class.php’ ) ;

//Класс кубического сплайна
include_once ( ‘CubicSpline.class.php’ ) ;

//Можно также использовать
//include_once (‘AkimaSpline.class.php’);
//include_once (‘BezierCurve.class.php’);

//Вспомогательный класс для рисования графиков
//Вместо него можно использовать свой или родные функции PHP
include_once ( ‘Plot.class.php’ ) ;

//Задаем координаты в массиве array(x1 => y1, x2 => y2 . xn => yn)
$testCoords [ — 215 ] = — 24.2705098312 ;
$testCoords [ — 180 ] = 28.5316954889 ;
$testCoords [ — 145 ] = — 9.27050983125 ;
$testCoords [ — 110 ] = — 17.6335575688 ;
$testCoords [ — 75 ] = 30 ;
$testCoords [ — 40 ] = — 17.6335575688 ;
$testCoords [ — 5 ] = — 9.27050983125 ;
$testCoords [ 30 ] = 28.5316954889 ;
$testCoords [ 65 ] = — 24.2705098312 ;
$testCoords [ 100 ] = 0 ;
$testCoords [ 135 ] = 24.2705098312 ;
$testCoords [ 170 ] = — 28.5316954889 ;
$testCoords [ 205 ] = 9.27050983125 ;
$testCoords [ 240 ] = 17.6335575688 ;
$testCoords [ 275 ] = — 30 ;

//Создаем truecolor изображение (для антиалисинга)
$im = imagecreatetruecolor ( GRAPH_WIDTH , GRAPH_HEIGHT ) ;

//Задаем цвета
$bgColor = imagecolorallocate ( $im , 224 , 223 , 223 ) ;
$textColor = imagecolorallocate ( $im , 0 , 0 , 0 ) ;
$axisColor = imagecolorallocate ( $im , 64 , 64 , 64 ) ;
$dotColor = imagecolorallocate ( $im , 192 , 64 , 64 ) ;
$graphColor = imagecolorallocate ( $im , 64 , 64 , 192 ) ;

//Фон
imagefill ( $im , 0 , 0 , $bgColor ) ;

//Создаем объект графика
$testGraph = new Plot ( $testCoords ) ;
//Опционально: рисуем известные точки
//Передавая GRAPH_WIDTH / 2 и GRAPH_HEIGHT / 2 мы смещаем начало координат в центр изображения
$testGraph -> drawDots ( $im , $dotColor , GRAPH_WIDTH / 2 , GRAPH_HEIGHT / 2 , 5 ) ;

//Создаем объект сплайна
$curve = new CubicSpline ( ) ;
//Передаем ему координаты, шаг просчета = 5
$curve -> setCoords ( $testCoords , 5 ) ;
if ( ! $curve -> getError ( ) )
<
//Расчет координат кривой
$curveCoords = $curve -> process ( ) ;
if ( $r )
<
//Еще один объект графика
$curveGraph = new Plot ( $curveCoords ) ;
//Отрисовываем кривую
$curveGraph -> drawLine ( $im , $graphColor , GRAPH_WIDTH / 2 , GRAPH_HEIGHT / 2 ) ;
>
>

//Отдаем пользователю
header ( «Content-type: image/png» ) ;
imagepng ( $im ) ;
imagedestroy ( $im ) ;
?>

• Можно объединить setCoords и process() в один метод — в их разделении нет никакой пользы.
• Улучшить обработку ошибок.
• Антиалиасинг иногда работает не очень хорошо — на вертикальных линиях с малым шагом видна «лесенка».
• Разрешить несколько значений Y для одного X для кривой Безье.
• Объект Plot нужно сделать многоразовым — не передавать координаты в конструктор, как сейчас.
• Добавить комментарии в коде и документацию

Источник