Php графика 2 рисунка

Создание графика средствами библиотеки GD

Для создания линейного графика нам следует познакомиться с несколькими полезными функциями библиотеки GD. В первую очередь нам понадобятся инструменты для рисования линий. Для этого существует функция imageline (int im, int x1, int y1, int x2, int y2, int col), которой в качестве параметров нужно передать идентификатор созданной уже области рисования, координаты начальной и конечной точек, а также цвет линии. Для графика, нам понадобятся координатные оси, которые заканчиваются стрелками. Для их отрисовки понадобится еще одна функция, создающая замкнутый многоугольник произвольной формы. Она имеет следующий формат вызова:
imagefilledpolygon(int im, array points, int num_points, int col),
где im — идентификатор области рисования, points — массив,
содержащий координаты точек многоугольника (arr[0]=x0; arr[1]=y0; arr[2]=x1; и т. д.),
num_points — количество точек полигона,
col — цвет заполнения.
Аналогичная функция — imagepolygon -предназначена для создания незакрашенного многоугольника.

Приступим к написанию скрипта. Создадим новый файл и назовем его line_chart.php. Для начала определим функцию отрисовки осей координат, которой будем передавать ширину и высоту области рисования. Так как мы планируем в дальнейшем выводить подписи значений, откладываемых по осям, то необходимо учесть этот фактор и, соответственно, немного сместить относительно центра точку, обозначающую начало координат. Вот как может выглядеть искомая функция:

function draw_axises($im_width,$im_heignt) < global $im,$black,$l_grey,$x0,$y0,$maxX,$maxY; $x0=25.0; //начало оси координат по X $y0=20.0; //начало оси координат по Y $maxX=$im_width-$x0; //максимальное значение оси //координат по X в пикселах $maxY=$im_heignt-$y0; //максимальное значение оси //координат по Y в пикселах //рисуем ось X imageline($im, $x0, $maxY, $maxX, $maxY, $black); //рисуем ось Y imageline($im, $x0, $y0, $x0, $maxY, $black); //рисуем стрелку на оси X $xArrow[0]=$maxX-6; $xArrow[1]=$maxY-2; $xArrow[2]=$maxX; $xArrow[3]=$maxY; $xArrow[4]=$maxX-6; $xArrow[5]=$maxY+2; imagefilledpolygon($im, $xArrow, 3, $black); //рисуем стрелку на оси Y $yArrow[0]=$x0-2; $yArrow[1]=$y0+6; $yArrow[2]=$x0; $yArrow[3]=$y0; $yArrow[4]=$x0+2; $yArrow[5]=$y0+6; imagefilledpolygon($im, $yArrow, 3, $black); >

Еще одним важным атрибутом графика является координатная сетка. Для ее создания напишем еще одну функцию, которой в качестве параметров будем передавать величину шага в пикселах по осям X и Y и расстояние между линиями сетки для каждой из осей:

function draw_grid($xStep,$yStep,$xCoef,$yCoef) //выводим сетку по оси Y for($i=1;$i <$ySteps+1;$i++)< imageline($im, $x0+1, $maxY-$yStep*$i, $maxX, $maxY-$yStep*$i, $l_grey); //при необходимости выводим значения линий сетки по оси Y imagestring($im, 1, 0, ($maxY-$yStep*$i)-3, $i*$yCoef, $black); >>

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

function draw_data($data_x,$data_y,$points_count,$color) >

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

//создаем рисунок шириной 500 и высотой 400 пикселов $im = @ImageCreate(500, 400); $white = ImageColorAllocate ($im, 255, 255, 255); $black = ImageColorAllocate ($im, 0, 0, 0); $red = ImageColorAllocate ($im, 255, 0, 0); $green = ImageColorAllocate ($im, 0, 255, 0); $blue = ImageColorAllocate ($im, 0, 0, 255); $yellow = ImageColorAllocate ($im, 255, 255, 0); $magenta = ImageColorAllocate ($im, 255, 0, 255); $cyan = ImageColorAllocate ($im, 0, 255, 255); $l_grey = ImageColorAllocate ($im, 221, 221, 221); //рисуем оси координат draw_axises(500,400); //задаем массивы данных графиков $x1[0]=1; $y1[0]=1; $x1[1]=2; $y1[1]=4; $x1[2]=3; $y1[2]=8; $x1[3]=4; $y1[3]=16; $x2[0]=1.5; $y2[0]=1; $x2[1]=2.5; $y2[1]=4; $x2[2]=3.5; $y2[2]=8; $x2[3]=4.5; $y2[3]=16; //объединяем данные из массивов данных //для вычисления масштаба $x=array_merge($x1,$x2); $y=array_merge($y1,$y2); //получаем максимальные значения //элементов для каждого массива $maxXVal=max($x); $maxYVal=max($y); //вычисляем масштаб преобразования данных //в координаты рабочей области $scaleX=($maxX-$x0)/$maxXVal; $scaleY=($maxY-$y0)/$maxYVal; //задаем шаг для координатной сетки в пикселах $xStep=30; $yStep=30; //рисуем координатную сетку draw_grid($xStep,$yStep, round($xStep/$scaleX,1), round($yStep/$scaleY,1), true); //рисуем первый график draw_data($x1,$y1,4,$red); //рисуем второй график draw_data($x2,$y2,4,$blue); //выводим рисунок Header("Content-Type: image/png"); ImagePNG($im); //освобождаем занимаемую рисунком память imagedestroy($im);

Отображение графика в браузере:

Всего за 250 рублей (~3$) Вы можете приобрести представленный здесь пример построения графика. Код скрипта реализован на PHP, полностью открытый и не использует никаких дополнительных библиотек.

Соглашение по использованию платной версии:
• Вы можете использовать полученный код в любых своих разработках, вы не обязаны указывать ссылку на источник.
• Вы НЕ имеете права перепродавать её, размещать в свободном или ограниченном доступе, а также публиковать в любом виде.
• Все остальные права сохраняются за автором.

Источник

pChart — строим графики и диаграммы на PHP. Практика

Всем привет!
По наводке из статьи «pChart — строим графики и диаграммы на PHP» реализовал у себя построение графиков. Вот так выглядит:

Примеры это, конечно, хорошо, но практическая реализация может помочь в понимании. Моё применение под катом.

Фреймвоков для построения графиков много. Есть платные хорошие, есть бесплатные неплохие. Мне pChart показался достаточно удобным и функциональным. Итак к реализации.
pChart работает следующим образом. Заносит данные в свой массив, рисует картинку с графиком, сохраняет её на диск. Затем надо эту картинку отобразить в документе.

addPoints($sum,"Total"); $myData->addPoints($dt,"Labels"); >; $unique = date("Y.m.d_H.i"); $gsFilename_Traffic = "traffic_".$unique.".png"; $myData->setSerieDescription("Labels","Days"); $myData->setAbscissa("Labels"); $myData->setAxisUnit(0," KB"); $serieSettings = array("R"=>229,"G"=>11,"B"=>11,"Alpha"=>100); $myData->setPalette("Total",$serieSettings); $myPicture = new pImage(1250,400,$myData); // setFontProperties(array("FontName"=>"fonts/tahoma.ttf","FontSize"=>8)); $myPicture->setGraphArea(50,20,1230,380); // drawScale(); $myPicture->drawBestFit(array("Alpha"=>40)); // drawLineChart(); $myPicture->drawPlotChart(array("DisplayValues"=>FALSE,"PlotBorder"=>TRUE,"BorderSize"=>0,"Surrounding"=>-60,"BorderAlpha"=>50)); // drawLegend(700,10,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));// Render("pChartPic\\".$gsFilename_Traffic); ?>

Надеюсь, мой пример поможет новичкам (а, может, и не только). Пример простенький, ничего лишнего. Часто большего и не нужно. Дальше, при желании, можно наворачивать красивости.

Источник

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

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

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

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

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

/* Подключаем классы */
require_once «pChart/pData.class»;
require_once «pChart/pChart.class»;
$DataSet = new pData(); // Создаём объект pData
$DataSet->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.

Создано 30.05.2012 13:56:43

Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. 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-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник