Візуалізація елементів табличної величини за допомогою графічних примітивів

Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки і санітарно-гігієнічних норм.

Види навчальної діяльності

Обговорюємо

1. Опишіть порядок створення масиву автофігур типу TShape.
2. Який графічний метод використовують для побудови гістограми; кругової діаграми?
3. Опишіть алгоритм побудови кругової діаграми.

Діємо разом

• Вправа 1. Побудова лінійчатої діаграми.
• Створення проекту з використанням мови Object Pascal

1. Відкрийте середовище Lazarus, створіть новий проект, у якому відображатимуться у вигляді лінійчатої діаграми дані з таблиці.
   
2. Розробіть інтерфейс програми згідно скріншота.
   
3. На форму додайте компонент Panel як контейнер для компонентів Image і Shape. Розмістіть на панелі компонент Image і 4 компоненти Shape (за кількістю елементів у масиві). Для створення легенди діаграми на форму додамо 4 компоненти Label. 
4. Об'єкти TShape належать до типу даних TShape. У розділі опису глобальних змінних опишемо наступним чином.
   

   var
     Form1: TForm1;
     sh: array[1..4] of TShape; // масив типу TShape
   
   implementation

   Тепер можна працювати з автофігурами, звертаючись до них, як до елементів масиву sh[i]. Аналогічно створимо масив типу TLabel для об'єктів Label.
   

   var
     Form1: TForm1;
     sh: array[1..4] of TShape; // масив типу TShape
     lb: array[1..4] of TLabel; // масив типу TLabel
   
   implementation

5. Заповнення масивів відбуватиметься під час створення форми.

procedure TForm1.FormCreate(Sender: TObject);
begin
  Image1.Canvas.Brush.Color := clWhite; // встановлюємо колір області
  Image1.Canvas.FillRect(Image1.ClientRect); // побудови діаграми
  { заповнення масиву типу 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;

6. У процедурі обробки події OnClick для кнопки Побудувати діаграму створимо масиви-константи назв річок і довжин річок. Числові значення досить великі, тому значенням властивості Width елементів масиву автофігур присвоїмо значення елементів масиву довжин річок D[i], зменшені в 5 разів.
   

   sh[i].Width := D[i] div 5;

7. Код процедури обробки події OnClick для кнопки Побудувати діаграму може бути таким.

procedure TForm1.Button1Click(Sender: TObject);
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];
        { вирівнювання об'єкта Shape і відповідного об'єкта Label}
        sh[i].Top := 20*i;   lb[i].Top := 20*i;
        { виведення тексту на полотно здійснюється за допомогою методу TextOut(x,y,Text); підписи даних виводяться з відступом 20 пікселів від правого краю об'єкта Shape }
        Image1.Canvas.TextOut (D[i] div 5+20, 20*i, IntToStr(D[i]));
      end;
end;

8. Вікно програми з діаграмою, побудованою за даними таблиці довжин річок в Україні, може мати наступний вигляд.
   

• Вправа 2. Побудова гістограми з використанням графічних методів.
• Створення проекту з використанням мови Object Pascal

1. Відкрийте середовище Lazarus, створіть новий проект, у якому за допомогою гістограми буде показана успішність учнів з кількох начальних предметів. Розмістіть на формі такі елементи інтерфейсу, як на скріншоті.
   
2. Код процедури побудови гістограми може бути таким.

procedure TForm1.Button1Click(Sender: TObject);
const Ndu: array[1..4] of Real = (9.8, 8.5, 9.1, 7.4);
Nazva: array[1..4] of String = ('Інформатика', 'Алгебра', 'Геометрія', 'Фізика');
var i, k: Integer;
 begin
   Label1.Caption :='';
   Image1.Canvas.Brush.Color := clWhite; // встановлюємо колір області
   Image1.Canvas.FillRect(Image1.ClientRect);  // побудови діаграми
   { побудова координатних осей }
   Image1.Canvas.Polyline ([Point(5,5),Point(5,190),Point (295,190)]);
   Image1.Canvas.Polyline ([Point (2,8), Point (5,5), Point (9,9)]);
   Image1.Canvas.Polyline ([Point (292,187), Point (295,190), Point (292,193)]);
   { побудова прямокутників — стовпців гістограми }
   For i := 1 to 4 do begin
        With Image1.Canvas do begin
             { колір і стиль заливки і-го стовпця }
             Brush.Color := RGBToColor (i*60, 150, 150);
             Brush.Style := bsSolid;
             Rectangle (i*60, 200-Round(Ndu [i]*15), i*60+40, 190);
             Brush.Style := bsClear;
             Font.Size := 14; { підписи даних виводяться на 20 пікселів вище за верхній край прямокутника }
 TextOut (i*60, 180-Round(Ndu[i]*15), FloatToStr(Ndu[i]));
        end;
   { елементи масиву Nazva виконують роль імен категорій і додаються до заголовка об'єкта Label1 }
   Label1.Caption := Label1.Caption + ' ' + Nazva[i];
end;
end;

3. Проаналізуйте програмний код і виконайте проект.
   
   Виправте помилки, якщо такі з'являться. Збережіть проект.

• Вправа 3. Побудова кругової діаграми.
• Створення проекту з використанням мови Object Pascal

1. Відкрийте середовище Lazarus, створіть новий проект, у якому за допомогою кругової діаграми буде показана прибутковість підприємства за 4 квартали року.
2. Створіть інтерфейс програми як на скріншоті.
   
3. Код процедури побудови кругової діаграми може бути таким.

procedure TForm1.Button1Click(Sender: TObject);
const   pr: array[1..4] of Integer = (100, 40, 80, 70);
cl: array[1..4] of TColor = (clBlue, clGreen, clYellow,
clRed);  // масив кольорів
var i, sum: Integer; ps: Real; // градусна міра сектора
x0, y0: Integer; // координати центра діаграми
wx, wy: Integer; // координати першої точки
x, y: Integer;  // координати наступних точок
r: Integer;       // радіус
begin
  sum := 0;
  For i := 1 to 4 do sum := sum+pr[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*pr[i]/sum; // кут сектора
  { обчислення координат х, у кінця дуги, що обмежує і-1 сектор}
              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;
  For i := 1 to 4 do //виведення прямокутників легенди
 With Form1.Canvas do   begin
  Brush.Color := cl[i];
  Rectangle(170,32+(i-1)*16,185,47+(i-1)*16);
end;
end;

4. Проаналізуйте програмний код і виконайте проект.
   
   Виправте помилки, якщо такі з'являться, збережіть проект.

• Вправа 4. Побудова графіка.
• Створення проекту з використанням мови Object Pascal

1. Відкрийте середовище Lazarus, створіть новий проект, у якому необхідно побудувати графік зміни прибутку підприємства за 4 квартали.
2. Сформуйте інтерфейс проекту як на скріншоті.
   
3. Проаналізуйте наступний програмний код і використайте його у процедурі для події OnClick кнопки Побудувати графік.

procedure TForm1.Button1Click(Sender: TObject);
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 := RGBToColor(255,255,255);
   Image1.Canvas.FloodFill(100,100,0,fsSurFace);
   { побудова координатних осей }
   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;

4. Виконайте проект, виправте помилки, якщо такі з'являться, збережіть проект.
   

Виконуємо самостійно

• Завдання. У таблиці наведено дані про обсяг продаж книжкового магазину за місяцями у період із січня по червень.
  
  Визначити сумарний обсяг продаж за півріччя, побудувати гістограму і кругову діаграму обсягів продажу за місяцями.

• Cтворення проекту з використанням мови Object Pascal

1. Створіть новий проект в середовищі Lazarus. Розробіть інтерфейс програми згідно зразка.
   
2. Опишіть глобальні масиви для збереження значень, назв категорій, кольорів.

var
  Form1: TForm1;
const sales: array[1..6] of real = (11, 17, 18, 32.5, 18.5, 15.5);
      category: array[1..6] of string = ('Січ', 'Лют', 'Бер', 'Квт', 'Трв', 'Чрв');
      color_name: array[1..6] of TColor = (clBlue, clGreen, clYellow, clRed, clNavy, clAqua);

implementation

3. У процедурі обробки події OnCreate для форми запрограмуйте зафарбовування прямокутників легенди.

// зафарбовування прямокутників легенди
procedure TForm1.FormCreate(Sender: TObject);
var i: integer;
    sh: array[1..6] of TShape;
begin
   sh[1] := Shape1;
   sh[2] := Shape2;
   sh[3] := Shape3;
   sh[4] := Shape4;
   sh[5] := Shape5;
   sh[6] := Shape6;

   for i := 1 to 6 do
       sh[i].Brush.Color := color_name[i];
end;

4. Створіть процедуру обробки події OnClick для командної кнопки Знайти сумарний обсяг і запрограмуйте знаходження суми елементів масиву sales і виведення значення в поле Edit1.

procedure TForm1.Button1Click(Sender: TObject);
var i: integer;
    sum: real;
begin
   sum := 0;
   for i := 1 to 6 do
       sum := sum + sales[i];
   Edit1.Text := FloatToStr(sum);
end;

5. Створіть процедуру обробки події OnClick для командної кнопки Побудувати гістограму і запрограмуйте побудову гістограми за значеннями елементів масиву sales.

procedure TForm1.Button2Click(Sender: TObject);
var i: integer;
begin
  // мітка для підписів під гістограмою
  Label9.Caption := '';
  // встановлення кольору побудови - white
  Image1.Canvas.Brush.Color := clWhite;
  // побудова тла - зафарбованого прямокутника попередньо встановленим кольором - white
  Image1.Canvas.Fillrect(Image1.ClientRect);
  // побудова координатних осей
  Image1.Canvas.Polyline([Point(5,5), Point(5,300), Point(420,300)]);
  Image1.Canvas.Polyline([Point(2,8), Point(5,5), Point(9,9)]);
  Image1.Canvas.Polyline([Point(415,296), Point(420,300), Point(415,304)]);
  // побудова прямокутників гістограми
  for i := 1 to 6 do
      begin
        with Image1.Canvas do
             begin
               Brush.Color := color_name[i];
               Brush.Style := bsSolid;
               Rectangle(i * 55, 250 - Round(sales[i]), i * 55 + 45, 300);
               Brush.Style := bsClear;
               Font.Size := 12;
               // виведення підписів над стовпцями гістограми
               TextOut(i * 55, 230 - Round(sales[i]), FloatToStr(sales[i]));
             end;
        // додавання елементів масиву category як імен категорій під гістограмою
        Label9.Caption := Label9.Caption + '       ' + category[i];
      end;
end;

6. Створіть процедуру обробки події OnClick для командної кнопки Побудувати кругову діаграму і запрограмуйте побудову кругової діаграми за значеннями елементів масиву sales.

procedure TForm1.Button3Click(Sender: TObject);
var i: integer;
    sum, ps: real;      // сума продажів і градусна міра сектора
    x0, y0: integer;    // координати центра діаграми
    wx, wy: integer;    // координати першої точки
    x, y: integer;      // координати наступних точок
    r: integer;         // радіус
begin
  // встановлення кольору побудови - white
  Image2.Canvas.Brush.Color := clWhite;
  // побудова тла - зафарбованого прямокутника попередньо встановленим кольором - white
  Image2.Canvas.Fillrect(Image1.ClientRect);
  sum := 0;
  for i := 1 to 6 do
       sum := sum + sales[i];
  // обчислення координат центра діаграми
  x0 := Image2.Width div 2;
  y0 := Image2.Height div 2;
  r := Image2.Width div 2; // обчислення радіуса
  wx := x0 + r; wy := y0;  // перша точка
  ps := 0;
  for i := 1 to 6 do
      with Image2.Canvas do
           begin
             ps := ps + 2 * pi * sales[i]/sum; // кут сектора
             x := Round(x0 + r * cos(ps));
             y := Round(y0 + r * sin(ps));
             Brush.Color := color_name[i];
             Pie(x0 - r, y0 - r, x0 + r, y0 + r, x, y, wx, wy);
             // виведення підписів над стовпцями гістограми
             Brush.Style := bsClear;
             TextOut(wx-15, wy, FloatToStr(sales[i]));
             wx := x;
             wy := y;
           end;
end;

7. Перевірте роботу програми. Виправте помилки, якщо такі з'являться, збережіть зміни.
8. Зробіть висновок: Яку з побудованих діаграм доцільно використовувати для аналізу обсягів продажу за півріччя?

• Додаткове завдання. Cтворіть проект для побудови графіків функцій: y=x*x, y=sin(x), використовуючи графічні методи.

• Cтворення проекту з використанням мови Object Pascal

1. Створіть новий проект в середовищі Lazarus. Розмістіть на формі компоненти і налаштуйте їхні властивості згідно із скріншотом.
   
2. Опишіть в розділі глобальних описів змінні, константу і масив.

const scale = 100; // масштаю побудови графіків
var
  Form1: TForm1;
  xmas: array[1..100] of Real; // значення x
  x0, y0: integer; // координати центра площини координат
implementation

3. Створіть процедуру події OnCreate і запрограмуйте побудову площини координат. 

procedure TForm1.FormCreate(Sender: TObject);
begin
  // центр площини координат
  x0 := Image1.Width div 2;
  y0 := Image1.Height div 2;

  with Image1.Canvas do
       begin
          // малюємо осі координат
          // суцільна заливка полотна кольором (білим)
          Image1.Canvas.Brush.Color := RGBToColor(255,255,255);
          Image1.Canvas.FloodFill(100,100,0,fsSurFace);

          Image1.Canvas.Pen.Color := RGBToColor(163,73,164);
          Image1.Canvas.MoveTo(x0,0);
          Image1.Canvas.LineTo(x0,Image1.Height);
          Image1.Canvas.MoveTo(0,y0);
          Image1.Canvas.LineTo(Image1.Width,y0);
       end;
end;

4. Проаналізуйте програмний код, поданий нижче, і реалізуйте процедуру обробки події натиснення кнопки y=x*x і малювання графіка функції y=x*x.

// функція y=x*x
procedure TForm1.Button1Click(Sender: TObject);
var f1: array[1..100] of Real;
    x, y1, h: real;
    i: integer;
begin
  Memo1.Clear;

  // табулюємо функцію і малюємо графік
  // нижня межа діапазона
  x := -2;
  // крок
  h := 0.1;
  i := 1;
  Memo1.Lines.Add('x           y=x*x');
  Image1.Canvas.MoveTo(-2,4);
  repeat
        begin
          // Обчислення функції y=x*x
          y1 := -x * x;
          // Заносимо обчислені значення у масив
          f1[i] := y1*(-1);
          xmas[i] := x;
          // виводимо значення у моле Мемо
          Memo1.Lines.Add(FormatFloat('0.###', xmas[i]) + '          ' +
          FormatFloat('0.###', f1[i]));
          // малювання графіку y=x*x
          Image1.Canvas.Pen.Color := RGBToColor(255,127,39);
          Image1.Canvas.LineTo(Trunc(x * scale) + x0, Trunc(y1 * scale) + y0);
          // Обчислення положення наступної точки
          x := x + h;
          i := i + 1;
        end;
  until x >= 2;
end;

5. Проаналізуйте програмний код, поданий нижче, і реалізуйте процедуру обробки події натиснення кнопки y=sin(x) і малювання графіка функції y=sin(x).

// функція y=sin(x)
procedure TForm1.Button2Click(Sender: TObject);
var f2: array[1..100] of Real;
    x, y2, h: real;
    i: integer;
begin
  Memo1.Clear;
  // табулюємо функцію і малюємо графік
  // нижня межа діапазона
  x := -3;
  // крок
  h := 0.1;
  i := 1;
  Memo1.Lines.Add('x           y=sin(x)');
  Image1.Canvas.MoveTo(-2,-1);
  repeat
        begin
            // Обчислення функції y=sin(x)
            y2 := sin(x);
            // Заносимо обчислені значення у масив
            f2[i] := y2;
            xmas[i] := x;
            // виводимо значення у моле Мемо
            Memo1.Lines.Add(FormatFloat('0.###', xmas[i]) + '          ' +
            FormatFloat('0.###', f2[i]));
            // малювання графіку y=sin(x)
            Image1.Canvas.Pen.Color := RGBToColor(0,162,232);
            Image1.Canvas.LineTo(Trunc(x * scale) + x0, Trunc(y2 * scale) + y0);
            // Обчислення положення наступної точки
            x := x + h;
            i := i + 1;
        end;
  until x >= 3;
end;

6. Перевірте роботу програми.
   
   Виправте помилки, якщо такі з'являться, збережіть зміни.

Домашнє завдання

• Опрацювати підручник: §37, с. 205-211 (Інформатика, 9 клас, автори: Бондаренко О. О., Ластовецький В. В., Пилипчук О. П., Шестопалов Є. А.)