У різних сферах діяльності виникає потреба подавати вихідні дані й
результати в графічній формі.
Побудова лінійчатої
діаграми з використанням автофігур
Алгоритм
побудови лінійчатої діаграми:
1)
створити масив автофігур Shape, розмірність якого дорівнює кількості значень
даних у таблиці;
2)
задати елементам масиву автофігур значення властивості Width, пропорційні
значенням табличної величини.
Відобразити у вигляді лінійчатої
діаграми дані таблиці.
На
форму додамо компонент Panel як контейнер для компонентів Image і Shape (рис.
37.1). Розмістимо на панелі компонент Image і 4 компоненти Shape (за кількістю
елементів у масиві). Для створення легенди діаграми на форму додамо 4
компоненти Label.
Об’єкти Shape
належать до типу даних TShape. У розділі опису глобальних змінних опишемо:
var sh: array[1..4] of TShape; // масив типу TShape
Тепер можна
працювати з автофігурами, звертаючись до них, як до елементів масиву sh[і].
Аналогічно
створимо масив типу TLabel для об’єктів Label.
lb: array[1..N] of TLabel;
Заповнення масивів
відбуватиметься під час створення форми:
begin
{ заповнення масиву типу TShape }
sh[1] := Shape1;
// 1-й елемент масиву sh — фігура з
іменем Shape1
sh[2] := Shape2;
sh[3] := Shape3; sh[4] := Shape4;
{ заповнення масиву типу TLabel }
lb[1] := Label1;
lb[2] := Label2; lb[3] := Label3; lb[4] := Label4;
end;
У
процедурі обробки події OnClick для кнопки Побудувати діаграму створимо
масиви-константи назв річок і довжин річок. Числові значення досить великі,
тому значенням властивості Width елементів масиву автофігур присвоїмо значення
елементів масиву довжин річок D[i], зменшені в 5 разів:
sh[i].Width := D[i] div 5;
Код процедури
обробки події OnClick для кнопки Побудувати діаграму може бути таким:
const D: array[1..4] of Integer = (981, 705, 591,
174);
Nazva: array[1..4] of String = (ꞋДніпроꞋ, ꞋДністерꞋ,
ꞋДеснаꞋ, ꞋДунайꞋ);
var i: Integer;
begin
For i := 1 to 4 do
begin
sh[i].Width :=
D[i] div 5;
lb[i].Caption :=
Nazva[i];
sh[i].Top := 20 *
i; lb[i].Top := 20 * i;
Image1.Canvas.TextOut
(D[i] div 5 + 20, 20 * i, IntToStr(D[i]));
end;
end;
Виведення
тексту на полотно здійснюється за допомогою методу TextOut(x,y,Text). Вікно
програми з діаграмою, побудованою за даними таблиці довжин річок в Україні.
Побудова гістограми з
використанням графічних методів
Діаграми
можна створювати, програмуючи креслення графічних примітивів (лінія,
прямокутник, сектор) графічними методами полотна Canvas. Для побудови стовпців
гістограми (стовпчастої діаграми) використаємо графічний метод
Canvas.Rectangle(x1,y1,x2,y2).
Алгоритм побудови
гістограми за значеннями елементів масиву Mas[1..N]:
1) побудувати
координатні осі;
2) побудувати N
прямокутників, розраховуючи координати і-го прямокутника за
формулами
x1 = i * S1, y1 = H – Round(Mas[i]),
x2 = i * S1 + dS, y2 = yox,
де і — номер, S1 —
координата x1 першого прямокутника, Н — висота полотна, dS — ширина
прямокутника, уох — відстань від верхнього краю полотна до осі Оx.
Побудувати
гістограму прибутку підприємства за 4 квартали року на полотні елемента Image1,
яке має розміри 250×150 пікселів.
Код
процедури побудови гістограми може бути таким:
const Pr: array [1..4] of Integer = (100, 40, 80, 70);
Nazva: array [1..4] of String = (ꞋІ кв.Ꞌ,ꞋІI кв.Ꞌ,ꞋІII
кв.Ꞌ,ꞋІV кв.Ꞌ);
var i: Integer;
begin
Label1.Caption :=
ꞋꞋ;
{ встановлюємо колір області побудови
гістограми }
Image1.Canvas.Brush.Color
:= clWhite;
Image1.Canvas.FillRect(Image1.ClientRect);
{ побудова координатних осей }
Image1.Canvas.Polyline
([Point(5,5),Point(5,140),Point (240,140)]);
Image1.Canvas.Polyline
([Point (2,8), Point (5,5), Point (9,9)]);
Image1.Canvas.Polyline
([Point (235,137), Point (240,140), Point (235,143)]);
Нижні
сторони прямокутників (стовпців гістограми) розташовані на одному рівні (на осі
Оу), тому координата y2 для
нижнього кута стовпців дорівнює 140. Визначимо координати для побудови першого стовпця.
Нехай координата х1 дорівнює 40 пікселів. Висота полотна елемента керування
Image1 дорівнює 150 пікселів, висота першого стовпця становить Pr[1]. Отже,
координата y1 верхнього кута першого стовпця дорівнює 150 – Pr[1]. Нехай ширина
стовпця діаграми дорівнює 30 пікселів, тоді координата х2 першого стовпця
становить (40 + 30) пікселів. Для і-го
стовпця х1 = i * 40, х2 = i * 40 + 30.
{
побудова прямокутників — стовпців
гістограми }
For i := 1 to 4 do
begin
With
Image1.Canvas1 do begin
{ задавання кольору і стилю заливки і-го
стовпця }
Brush.Color :=
RGBToColor (i * 50, 150, 150);
Brush.Style :=
bsSolid;
Rectangle (i * 40,
150 – Pr[i], i * 40 + 30, 140);
Brush.Style :=
bsClear;
Font.Size := 12;
{ виведення підписів даних на 20 пікселів вище
за верхній край прямокутника }
TextOut (i * 40,
130 – Pr[i], IntToStr(Pr[i])); end;
{ додавання елементів масиву Nazva як імен
категорій до заголовка елемента Label1 }
Label1.Caption :=
Label1.Caption + Ꞌ Ꞌ + Nazva[i]; end;
end;
Оператор
With використовується для скорочення запису під час звернення до властивостей елемента
керування. Застосування оператора With у цьому прикладі дозволяє уникнути
повторних посилань на елемент Image1.Canvas у наступних операторах.
Побудова кругової діаграми
У круговій
діаграмі кожному елементу масиву відповідає сектор, градусна міра якого
пропорційна величині елемента.
Алгоритм побудови кругової
діаграми за значеннями елементів масиву:
1) обчислити суму
елементів масиву: а1 + а2 + ... +аn ;
2) знайти градусну
міру сектора, що відповідає кожному значенню елемента
масиву:
3) побудувати всі
сектори діаграми (у результаті сектори утворять повний круг).
У
9-А класі навчається 30 учнів. Виконавши тест з інформатики, 7 учнів отримали
10–12 балів, 15 учнів — 7–9 балів, 6 учнів — 4–6 балів, решта — 1–3 бали.
Побудувати кругову діаграму успішності учнів за рівнями навчальних досягнень.
Значення
кількості учнів, які отримали оцінки за чотирма рівнями, занесені до масиву
K[1..4] of Integer. Областю побудови діаграми є полотно елемента керування
Image1.
const K: array[1..4] of Integer = (2, 6, 15, 7);
cl: array[1..4] of TColor = (clBlue,clGreen,clYellow,clRed);
// масив кольорів
var
i: Integer; sum,
ps: Real; // градусна міра сектора
(рис. 37.6)
x0, y0: Integer;
// координати центра діаграми
wx, wy: Integer;
// координати першої точки
x,y: Integer; // координати наступних точок
r: Integer; // радіус
begin
Image1.Canvas.Brush.Color
:= clWhite;
Image1.Canvas.FillRect(Image1.ClientRect);
sum := 0;
For i := 1 to 4 do
sum := sum + K[i];
{ обчислення
координат центра діаграми }
x0 := Image1.Width
div 2; y0 := Image1.Height div 2;
r := Image1.Width
div 2; // обчислення радіуса
wx := x0 + r; wy
:= y0; // перша точка
ps := 0;
For i := 1 to 4 do
With Image1.Canvas
do begin
ps := ps + 2 * pi
* K[i]/sum; // кут сектора
x := Round(x0 + r
* cos(ps)); y := Round(y0 + r * sin(ps));
Brush.Color :=
cl[i];
Pie(x0 – r, y0 –
r, x0 + r, y0 + r, x, y, wx, wy);
wx := x; wy := y;
end;
end;
Побудова графіка
Необхідність у
побудові графіка виникає, коли треба показати залежність однієї величини від
іншої (графік функції, графік температур).
Алгоритм побудови
графіка змінення табличної величини:
1) побудувати
координатні осі;
2) вивести імена
категорій;
3) побудувати
відрізки від точки (і – 1, f(i – 1)) до точки (і, f(i)),
де і — номер, f(i) — значення і-го елемента в
масиві даних.
Користуючись
даними прикладу 2, побудувати графік змінення прибутку підприємства за 4
квартали на полотні елемента Image1, ширина і довжина якого по 160 пікселів.
const pr: array[1..4] of Integer = (100, 40, 80, 70);
nom: array[1..4]
of String = (ꞋIꞋ, ꞋIIꞋ, ꞋIIIꞋ, ꞋIVꞋ);
{ масив імен категорій }
var i: Integer;
begin
Image1.Canvas.Brush.Color
:= clWhite;
Image1.Canvas.FillRect(Image1.ClientRect);
{ побудова координатних осей }
Image1.Canvas.Polyline
([Point (5,5), Point (5,150), Point (155,150)]);
Image1.Canvas.Polyline
([Point (2,8), Point (5,5), Point (9,9)]);
Image1.Canvas.Polyline
([Point (150,147), Point (155,150), Point (151,154)]);
{ виведення імен категорій }
For i := 1 to 4 do
Image1.Canvas.TextOut (30 * i, 152, nom[i]);
Image1.Canvas.MoveTo
(5,150); // встановлення олівця в
початкову позицію
Image1.Canvas.Pen.Width
:= 3; // товщина олівця
Image1.Canvas.Pen.Color
:= clBlue; // колір олівця
{ малювання відрізків графіка }
For i := 1 to 4 do
Image1.Canvas.LineTo (30 * i, 150 – pr[i]);
end;
Комментариев нет:
Отправить комментарий