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

 У різних сферах діяльності виникає потреба подавати вихідні дані й результати в графічній формі. На прикладі порівняння довжин річок в Україні розглянемо різні типи діаграм:

Проект "Довжина річок в Україні"

1. Створюємо форму з елементами

2. Описуємо глобальні змінні:

const 

cl: array[1..4] of TColor = (clBlue,clGreen,clYellow,clRed); // масив, який містить кольори
D: array[1..4] of Integer = (981, 705, 591, 174); // масив, який містить дожини річок
Nazva: array[1..4] of String = ('Дніпро', 'Дністер', 'Десна', 'Дунай'); // масив, який містить їх назви

var

Form1: TForm1;
sh,sh1: array[1..4] of TShape; // два масиви для об'єктів Shape
lb,lb1: array[1..4] of TLabel; // два масиви для об'єктів Label

3. Процедура створення форми (при старті проекту попередні налаштування)

procedure TForm1.FormCreate(Sender: TObject);
begin
// побудова лінійчатої діаграми
Image1.Canvas.Brush.Color := clWhite;
Image1.Canvas.FillRect(Image1.ClientRect);
sh[1] := Shape1;
sh[2] := Shape2;
sh[3] := Shape3;
sh[4] := Shape4;
lb[1] := Label1;
lb[2] := Label2;
lb[3] := Label3;
lb[4] := Label4;
// побудова стовпчикової діаграми
Label5.Caption := '';
Image2.Canvas.Brush.Color := clWhite;
Image2.Canvas.FillRect(Image2.ClientRect);
{ побудова координатних осей }
Image2.Canvas.Polyline ([Point(5,5),Point(5,150),Point (300,150)]);
Image2.Canvas.Polyline ([Point (2,8), Point (5,5), Point (9,9)]);
Image2.Canvas.Polyline ([Point (295,147), Point (300,150), Point (295,153)]);
// побудова кругової діаграми
Image3.Canvas.Brush.Color := clWhite;
Image3.Canvas.FillRect(Image3.ClientRect);
sh1[1] := Shape5;
sh1[2] := Shape6;
sh1[3] := Shape7;
sh1[4] := Shape8;
lb1[1] := Label6;
lb1[2] := Label7;
lb1[3] := Label8;
lb1[4] := Label9;
// побудова графіка
Image4.Canvas.Brush.Color := clWhite;
Image4.Canvas.FillRect(Image4.ClientRect);
{ побудова координатних осей }
Image4.Canvas.Polyline ([Point(5,5),Point(5,150),Point (300,150)]);
Image4.Canvas.Polyline ([Point (2,8), Point (5,5), Point (9,9)]);
Image4.Canvas.Polyline ([Point (295,147), Point (300,150), Point (295,153)]);
end;

4. Побудова лінійчатої діаграми

procedure TForm1.Button1Click(Sender: TObject);

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 := 30 * i; // розміщення прямокутника відносно верхньої межі

      lb[i].Top := 30 * i; // аналогічно для мітки

      Image1.Canvas.TextOut (D[i] div 5 + 20, 30 * i, IntToStr(D[i])); // підпис (легенда)

end;

end;    

5. Побудова гістограми

procedure TForm1.Button2Click(Sender: TObject);

var i: Integer;

begin

For i := 1 to 4 do begin

With Image2.Canvas do begin

{ задавання кольору і стилю заливки і-го стовпця }

Brush.Color := cl[i];

Brush.Style := bsSolid;

Rectangle (i * 60, 150-D[i] div 10, i* 60 + 50, 150); // побудова стовпчика

Brush.Style := bsClear;

Font.Size := 12;

TextOut (i * 60, 130 - D[i] div 10, IntToStr(D[i])); // підпис числових даних

end; 

Label5.Caption := Label5.Caption + '    ' + Nazva[i]; // підпис категорій

end;

end;    

6. Побудова кругової діаграми

procedure TForm1.Button3Click(Sender: TObject);

var  i: Integer; sum, ps: Real; // градусна міра сектора

     x0, y0: Integer; // координати центра діаграми

     wx, wy: Integer; // координати першої точки

     x,y: Integer; // координати наступних точок

     r: Integer;

begin

    sum := 0;

For i := 1 to 4 do sum := sum + D[i] div 100;

{ обчислення координат центра діаграми }

x0 := Image3.Width div 2; y0 := Image3.Height div 2;

r := Image3.Width div 3; // обчислення радіуса

wx := x0 + r; wy := y0; // перша точка

ps := 0;

For i := 1 to 4 do

With Image3.Canvas do begin

ps := ps + 2 * pi * (D[i] div 100)/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;

sh1[i].Brush.Color := cl[i];

lb1[i].Caption := Nazva[i];

end;

end;     

7. Побудова графіка

procedure TForm1.Button4Click(Sender: TObject);

Var i: Integer;

begin

{ виведення імен категорій }

For i := 1 to 4 do Image4.Canvas.TextOut (50 * i, 160, Nazva[i]);

Image4.Canvas.MoveTo (5,150); // встановлення олівця в початкову позицію

Image4.Canvas.Pen.Width := 3; // товщина олівця

Image4.Canvas.Pen.Color := clBlue; // колір олівця

{ малювання відрізків графіка }

For i := 1 to 4 do Image4.Canvas.LineTo (60 * i, 150 - D[i] div 10);

end;