Главная > php> Создание графиков с помощью pChart. Продолжение

Создание графиков с помощью pChart. Продолжение

В предыдущей статье по созданию графиков с помощью pChart были рассмотрены основные моменты, достаточные для построения примитивного графика. Сегодня продолжим рассмотрение этой библиотеки. Примеры из этой статьи, также можно отнести к разряду «основополагающих», поскольку в прошлый раз они не поместились в статью.

Данные
Все данные будут такими же, как и в прошлой статье. Настоятельно рекомендую ознакомиться, прежде чем приступать к запуску примеров из этой статьи.

Маркеры
Для того чтобы ориентироваться в точках графика очень удобно ставить маркеры на каждой точке графика. Маркеры ставятся с помощью метода класса pChart:

1
2
3

void $pChartObj::drawPlotGraph(array $Data, array $DataDescription, 
int $BigRadius=5, int $SmallRadius=2, int $R2=-1, 
int $G2=-1, int $B2=-1, bool $Shadow=false)

Аргументы:

  • array $Data – массив с данными графиков. Можно получить из объекта класса pData следующим образом $pDataObj->GetData();
  • array $DataDescription – массив с описаниями данных графиков. Можно получить из объекта класса pData посредством вызова метод $pDataObj->GetDataDescription();
  • int $BigRadius – внешний радиус круга маркера (он всегда круглый). По умолчанию имеет значение 5;
  • int $SmallRadius – внутренний радиус круга маркера. Дублирование радиусов сделано для расчета ширины линии маркера. Она рассчитывается по формуле Ширина=ВнешнийРадиус-ВнутреннийРадиус. Поэтому чем больше разрыв между внешним и внутренним радиусом, тем толще линия маркера. Этот аргумент не обязателен. По умолчанию имеет значение 2;
  • int $R2 – число красной цветовой составляющей в модели RGB. Здесь цвет используется для определения заполнения маркера. Если не указан или имеет значение -1, то используется цвет линии графика. По умолчанию имеет значение -1;
  • int $G2 – число зеленой составляющей в модели RGB. По умолчанию установлено в -1;
  • int B2 – число синей составляющей в модели RGB. По умолчанию установлено в -1;
  • bool $Shadow – если установлена в true, то у маркера прорисовывается тень. По умолчанию установлено в false.

Теперь напишем код, который выведет график с маркерами
pchart_marked.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<?php
error_reporting(0);
//подключаем файлы
include 'pChart/pData.class';
include 'pChart/pChart.class';
//получаем данные из файла
$d = getdata(dirname(__FILE__).DIRECTORY_SEPARATOR.
'rts.txt');
$d['date'] = array_reverse($d['date']);
$d['rts'] = array_reverse($d['rts']);
$d['rts2'] = array_reverse($d['rts2']);
//создаем объект данных
$DataSet = new pData;
//добавлем точки
$DataSet->AddPoint($d['rts'],"Serie1");
$DataSet->AddPoint($d['rts2'],"Serie2");
$DataSet->AddPoint($d['date'],"Serie3");
//устанавливаем точки с датами
//на ось абсцисс
$DataSet->SetAbsciseLabelSerie("Serie3");
//помечаем данные как предназначеные для
//отображения
$DataSet->AddSerie("Serie1");
$DataSet->AddSerie("Serie2");
//устанавливаем имена
$DataSet->SetSerieName(
mb_convert_encoding("Индекс РТС",'utf-8','windows-1251'),
"Serie1");
$DataSet->SetSerieName(
mb_convert_encoding("Индекс РТС2",'utf-8','windows-1251'),
"Serie2");
//создаем график шириной в 1000 и высотой в 500 px
$graph = new pChart(1000,500);
//устанавливаем шрифт и размер шрифта
$graph->setFontProperties("Fonts/tahoma.ttf",10);
//координаты левой верхней вершины и правой нижней
//вершины графика
$graph->setGraphArea(85,30,950,400);
//рисуем заполненный четырехугольник
$graph->drawFilledRoundedRectangle(7,7,993,493,5,240,
240,240);
//теперь незаполненный для эффекта тени
$graph->drawRoundedRectangle(5,5,995,495,5,230,230,
230);
//прорисовываем фон графика
$graph->drawGraphArea(255,255,255,TRUE);
//устанавливаем данные для графиков
$graph->drawScale($DataSet->GetData(),
$DataSet->GetDataDescription(),
SCALE_NORMAL,150,150,150,true,0,2);
//рисуем сетку для графика
$graph->drawGrid(4,TRUE,230,230,230,50);
//прорисовываем линейные графики
$graph->drawLineGraph($DataSet->GetData(),
$DataSet->GetDataDescription());
//рисуем точки на графике
$graph->drawPlotGraph($DataSet->GetData(),
$DataSet->GetDataDescription(),3,2,255,255,255);
// пишем в подвале некоторый текст
$graph->setFontProperties("Fonts/tahoma.ttf",8);
$graph->drawTextBox(870,450,990,460,"Powered By pChart",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
$graph->drawTextBox(805,470,990,480,"http://pchart.sourceforge.net",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
$graph->drawTextBox(15,450,140,460,"Developed By web-junior",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
$graph->drawTextBox(10,470,140,480,"http://www.web-junior.net",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
//Пишем заголовок
$graph->setFontProperties("Fonts/tahoma.ttf",10);
$graph->drawTitle(480,22,
mb_convert_encoding("Индексы РТС",
'utf-8','windows-1251'),
50,50,50,-1,-1,true);
//выводим в браузер
$graph->Stroke();
/**
* @return array
*/
function getdata($file)
{
if (file_exists($file)) {
$lines = file($file);
$data = array('date' => array(), 'rts' => array(),
'rts2' => array());
foreach ($lines as $line) {
$tmp = explode(' ', trim($line));
$data['date'][] = $tmp[0];
$data['rts'][] = trim($tmp[1]);
$data['rts2'][] = trim($tmp[2]);
}
return $data;
} else {
return false;
}
}
 
?>

В результате имеем график

Маркированный график

Внимательный читатель, посмотрев на график, заметит, что он отличается от предыдущего чем-то еще кроме маркеров.
Во-первых, это фоновый четырехугольник, который заполнен определенным цветом и имеет тень. Алгоритм создания фонового заполнения очень прост. С помощью метода

1
2

void pChart::drawFilledRoundedRectangle(int $X1, int $Y1, 
int $X2, int $Y2, int $Radius, int $R, int $G, int $B)

создаем заполненный четырехугольник с закругленными углами (если нужны острые углы, то можно использовать метод drawFilledRectangle()). Аргументы:

  • int $X1 – x-координата левого верхнего угла четырехугольника;
  • int $Y1 – y-координата левого верхнего угла четырехугольника;
  • int $X2 – x-координата правого нижнего угла четырехугольника;
  • int $Y2 – y-координата правого нижнего угла четырехугольника;
  • int $Radius – радиус закругления углов;
  • int $R - число красной цветовой составляющей в модели RGB;
  • int $G - число зеленой цветовой составляющей в модели RGB;
  • int $B - число синей цветовой составляющей в модели RGB;

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

1
2

void pChart::drawRoundedRectangle(int $X1, int Y1, 
int $X2, int $Y2, int Radius, int $R, int $G, int $B)

Все аргументы аналогичны предыдущему. Этот четырехугольник рисуется для создания эффекта объемности. Важно! Чтобы создать эффект объемности, незаполненный четырехугольник нужно нарисовать на расстоянии 2-3 пикселей от заполненного четырехугольника.
Во-вторых, это текст в подвале. Он пишется с помощью метода

1
2
3
4

void pChart::drawTextBox(int $X1, int $Y1, int $X2, 
int $Y2, string $Text, int $Angle, int $R=255, int $G=255, 
int $B=255, int $Align=ALIGN_LEFT, bool $Shadow=true, 
int $BgR=-1, int $BgG=-1, int $BgB=-1, int $Alpha)

Аргументов не счесть:

  • int $X1 – x-координата начала текста;
  • int $Y1 – y-координата начала текста;
  • int $X2 – x-координата конца текста;
  • int $Y2 – y-координата конца текста;
  • string $Text – собственно сам текст, который нужно написать;
  • int $Angle – угол наклона текста;
  • int $R - число красной цветовой составляющей текста в модели RGB. По умолчанию 255;
  • int $G – число зеленой цветовой составляющей текста в модели RGB. По умолчанию 255;
  • int $B – число синей цветовой составляющей текста в модели RGB. По умолчанию 255;
  • int $Align – выравнивание текста. Устанавливается с помощью специальных констант:
    • ALIGN_TOP_LEFT – выравнивание по верхнему левому углу;
    • ALIGN_TOP_CENTER – выравнивание по верху и центру;
    • ALIGN_TOP_RIGHT – выравнивание по верхнему правому углу;
    • ALIGN_LEFT – по левому краю;
    • ALIGN_CENTER – по центру;
    • ALIGN_RIGHT – по правому краю;
    • ALIGN_BOTTOM_LEFT – по нижнему левому углу;
    • ALIGN_BOTTOM_CENTER – по низу и центру;
    • ALIGN_BOTTOM_RIGHT – по нижнему правому углу.
  • bool $Shadow – если установлено в true, то у теста будет тень. По умолчанию установлена в true;
  • int $BgR – число красной составляющей цвета фона в модели RGB. Если установлен в -1, то цвет будет отключен. По умолчанию имеет значение -1;
  • int $BgG - число зеленой составляющей цвета фона в модели RGB. Если установлен в -1, то цвет будет отключен. По умолчанию имеет значение -1;
  • int $BgB - число синей составляющей цвета фона в модели RGB. Если установлен в -1, то цвет будет отключен. По умолчанию имеет значение -1;
  • int $Alpha – значение альфа-канала для фона;

Легенда
Теперь рассмотрим еще один базовый пример, в котором добавим к предыдущему легенду. Легенда в графиках – это текстовое описание, которое поясняет значение используемых обозначений. Чаще всего, в легенде указывается цвет (форма) линий графиков.
Легенда добавляется с помощью метода

1
2
3
4

void pChart::drawLegend(int $XPos, int $YPos, 
array $DataDescription, int $R, int $G, int $B, 
int $Rs=-1, int $Gs=-1, int $Bs=-1, int $Rt=0, 
int $Gt=0, int $Bt=0, bool $Border=false)

Аргументов не мало, но половину можно пропустить:

  • int $XPos – x-координата начала бокса с легендой;
  • int $YPos – y-координата начала бокса с легнедой;
  • array $DataDscription – массив с описаниями данных графиков. Можно получить из объекта класса pData посредством вызова метод $pDataObj->GetDataDescription();
  • int $R - число красной составляющей цвета фона в модели RGB;
  • int $G - число зеленой составляющей цвета фона в модели RGB;
  • int $B - число синей составляющей цвета фона в модели RGB;
  • int $Rs - число красной составляющей цвета тени в модели RGB. По умолчанию установлен в -1;
  • int $Gs – число зеленой составляющей цвета тени в модели RGB. По умолчанию установлен в -1;
  • int $Bs – число синей составляющей цвета тени в модели RGB. По умолчанию установлен в -1;
  • int $Rt - число красной составляющей цвета текста в модели RGB. По умолчанию установлен в 0;
  • int $Gt - число зеленой составляющей цвета текста в модели RGB. По умолчанию установлен в 0;
  • int $Bt - число синей составляющей цвета текста в модели RGB. По умолчанию установлен в 0;
  • bool $Border – если установлен в true, то легенда будет находится в белом боксе. По умолчанию установлен в false.

Вот код с легендой возле оси ординат
pchart_legend.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<?php
error_reporting(0);
//подключаем файлы
include 'pChart/pData.class';
include 'pChart/pChart.class';
//получаем данные из файла
$d = getdata(dirname(__FILE__).DIRECTORY_SEPARATOR.'rts.txt');
$d['date'] = array_reverse($d['date']);
$d['rts'] = array_reverse($d['rts']);
$d['rts2'] = array_reverse($d['rts2']);
//создаем объект данных
$DataSet = new pData;
//добавлем точки
$DataSet->AddPoint($d['rts'],"Serie1");
$DataSet->AddPoint($d['rts2'],"Serie2");
$DataSet->AddPoint($d['date'],"Serie3");
//устанавливаем точки с датами
//на ось абсцисс
$DataSet->SetAbsciseLabelSerie("Serie3");
//помечаем данные как предназначеные для
//отображения
$DataSet->AddSerie("Serie1");
$DataSet->AddSerie("Serie2");
//устанавливаем имена
$DataSet->SetSerieName(
mb_convert_encoding("Индекс РТС",'utf-8','windows-1251'),
"Serie1");
$DataSet->SetSerieName(
mb_convert_encoding("Индекс РТС2",'utf-8','windows-1251'),
"Serie2");
//создаем график шириной в 1000 и высотой в 500 px
$graph = new pChart(1000,500);
//устанавливаем шрифт и размер шрифта
$graph->setFontProperties("Fonts/tahoma.ttf",10);
//координаты левой верхней вершины и правой нижней
//вершины графика
$graph->setGraphArea(85,30,950,400);
//рисуем заполненный четырехугольник
$graph->drawFilledRoundedRectangle(7,7,993,493,5,240,
240,240);
//теперь незаполненный для эффекта тени
$graph->drawRoundedRectangle(5,5,995,495,5,230,
230,230);
//прорисовываем фон графика
$graph->drawGraphArea(255,255,255,TRUE);
//устанавливаем данные для графиков
$graph->drawScale($DataSet->GetData(),
$DataSet->GetDataDescription(),
SCALE_NORMAL,150,150,150,true,0,2);
//рисуем сетку для графика
$graph->drawGrid(4,TRUE,230,230,230,50);
//прорисовываем линейные графики
$graph->drawLineGraph($DataSet->GetData(),
$DataSet->GetDataDescription());
// рисуем точки на графике
$graph->drawPlotGraph($DataSet->GetData(),
$DataSet->GetDataDescription(),3,2,255,255,255);
// пишем в подвале некоторый текст
$graph->setFontProperties("Fonts/tahoma.ttf",8);
$graph->drawTextBox(870,450,990,460,"Powered By pChart",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
$graph->drawTextBox(805,470,990,480,"http://pchart.sourceforge.net",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
$graph->drawTextBox(15,450,140,460,"Developed By web-junior",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
$graph->drawTextBox(10,470,140,480,"http://www.web-junior.net",
0,250,250,250,ALIGN_CENTER,TRUE,-1,-1,-1,30);
//ложим легенду
$graph->drawLegend(90,35,$DataSet->GetDataDescription(),255,255,255);
//Пишем заголовок
$graph->setFontProperties("Fonts/tahoma.ttf",10);
$graph->drawTitle(480,22,
mb_convert_encoding("Индексы РТС",
'utf-8','windows-1251'),
50,50,50,-1,-1,true);
//выводим в браузер
$graph->Stroke();
/**
* @return array
*/
function getdata($file)
{
if (file_exists($file)) {
$lines = file($file);
$data = array('date' => array(), 'rts' => array(),
'rts2' => array());
foreach ($lines as $line) {
$tmp = explode(' ', trim($line));
$data['date'][] = $tmp[0];
$data['rts'][] = trim($tmp[1]);
$data['rts2'][] = trim($tmp[2]);
}
return $data;
} else {
return false;
}
}
?>

В результате

С легендой наш график стал еще понятнее

Читайте все статьи цикла

Популярность: 9%


Интересное из других блогов:

2leep.com

И не забывайте комментировать статью.

Метки: , , ,

categories php, Графика, Технологии | 23 Апреля 2010 года

Добавляйся в группу во вконтакте, чтобы самым первым узнавать все новости сайта

Отзывов: 6 на «Создание графиков с помощью pChart. Продолжение»

  1. Автор: Пашко, 27 апреля 2010 в 16:27

    использует Firefox 3.6.3 Firefox 3.6.3 на Windows XP Windows XP

    Графики с js были бы более интерактивными, а так просто картинка :-/

    Ответить

  2. Автор: spyer, 27 декабря 2010 в 08:58

    использует Opera 10.63 Opera 10.63 на GNU/Linux GNU/Linux

    Спасибо за подробную инструкцию, я думал, побольше проблем с кодировками будет.

    Ответить

  3. Автор: Вадим, 19 октября 2011 в 22:42

    использует Firefox 7.0.1 Firefox 7.0.1 на Windows 7 Windows 7

    Спасибо за Ваш труд! Я уже 10 лет в разработке, но подобных мануалов не создаю, все времени не хватает. Вы делаете большое дело!

    Ответить

    • Автор: web-junior, 21 октября 2011 в 07:46

      использует Firefox 7.0.1 Firefox 7.0.1 на GNU/Linux x64 GNU/Linux x64

      Спасибо за ваши теплые слова! Редко бывает, когда кто-то вот так прямо благодарит.
      А у вас за 10 лет разработки, наверное, накопилось не мало экзотических примеров по различным технологиям?

      Ответить

      • Автор: Вадим, 21 октября 2011 в 11:12

        использует Firefox 7.0.1 Firefox 7.0.1 на Windows 7 Windows 7

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

        Таким образом, я постоянно использую чужой опыт и труд, но сам при этом, не отдаю ничего взамен. Я потребитель чужого опыта :(

        Самое малое что я могу сделать – это отблагодарить, хоть на словах. Нужно же как-то компенсировать дефицит социальной полезности!

        Ответить

      • Автор: Вадим, 21 октября 2011 в 11:26

        использует Firefox 7.0.1 Firefox 7.0.1 на Windows 7 Windows 7

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

        Ответить

RSS-лента комментариев. Адрес для трекбека

Ваш отзыв

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Нажимая на кнопку "Добавить" вы принимаете правила комментирования