Oleh Putu Swastawa
Mungkin, anda seorang programer pemula, memperoleh teknik memprogram secukupnya, dan saat ini perlu memprogram grafis, misalnya untuk grafik garis perkembangan rekam medik pasien per satuan waktu tertentu. Berikut saya berikan tutorial atau panduannya untuk membuat grafik garis. Dasar ini sangat penting untuk membuat diagram lainnya dengan kode program delphi.
Perhatikan peta area grafis diagram berikut:
Peta area grafis diagram
Istilah berikut harus dikenal:
- Area kanvas atau area kertas gambar, diberi garis batas warna hitam.
- Area Gambar atau area graph diberi tanda garis merah.
- Axis atau sumbu koordinat X diberi tanda garis ungu
- Ordinat atau sumbu koordinat Y diberi tanda garis biru
- m.leff adalah batas kiri
- m.top adalah batas atas
- m.bott adalah batas bawah
- m.right adalah batas kanan
Misalnya, kita menginput beberapa pasang axis,ordinat sebagai berikut:
(0,6);
(1,3);
(2,6);
(3,4);
(4,5);
(5,3);
(6,6);
(7,1);
(8,2);
Kita harus merepresentasikannya menjadi grafis di layar komputer.
Grafis di layar komputer dinyatakan dalam satuan pixel, 1 pixel = 0,24 mm. Karena terlalu pendek, maka diperlebarlah menggambarnya. Maka, dikenal dengan pen-skala-an, baik untuk posisi mendatar ( axis ) maupun berdiri ( ordinat ).
Misalkan, kita set satuan berikut:
ScaleX := 20;
ScaleY := 30;
MarginLeft := 50;
MarginTOp := 50;
MarginBottom := 50;
MarginRight := 50
Maka, batas-batas daerah area gambar:
MostLeft := MarginLeft;
MostTop  := MarginTop;
MostRight := Im.Width – MarginRight;
MostBottom:= Im.Height – MarginBottom;
Saya mendefinisikan array:
TPoints = array of TPOint;
TPoint adalah pasangan nilai X,Y.
kemudian, ada deklarasi variabel private:
RealPoints: TPoints;
UserPoints: TPoints;
GraphPoints: TPoints;
bersama variabel private lainnya:
ScaleX: integer;
ScaleY: integer;
MarginTop: integer;
MarginRight: integer;
MarginBottom: integer;
MarginLeft: integer;
Dengan prosedur ini, saya menginput pasangan ordinat-axis asli:
procedure adu(n,x,y:integer);
var idx:integer;
begin
idx:= length(userPoints);
if n+1 > idx then
begin
SetLength(UserPoints,n+1);
end;
UserPoints[n].x :=x;
UserPOints[n].Y := y;
end;
adu(0,0,6);
adu(1,1,3);
adu(2,2,6);
adu(3,3,4);
adu(4,4,5);
adu(5,5,3);
adu(6,6,6);
adu(7,7,1);
adu(8,8,2);
Pasangan koordinat ini disesuaikan dengan skala X dan Y:
procedure adr(n,x,y:integer);
begin
RealPoints[n].x :=x;
RealPOints[n].Y := y;
end;
SetLength(RealPoints,length(UserPoints));
for i:= 0 to length(RealPoints)-1 do
begin
adr(i,UserPoints[i].X * ScaleX,ScaleY*UserPoints[i].Y);
end;
Pasangan axis ordinat ini kemudian disesuaikan dengan batas area grafis:
procedure adg(n,x,y:integer);
begin
GraphPoints[n].x :=x;
GraphPOints[n].Y := y;
end;
SetLength(GraphPoints,Length(RealPoints));
For i:= 0 to length(GraphPoints)-1 do
begin
adg(i,MostLeft+RealPoints[i].X,MostBottom – RealPoints[i].Y);
end;
Kemudian, saya menggambar grafik garisnya sebagai berikut:
Cv.MoveTo(GraphPoints[0].x,GraphPoints[0].Y);
for i:= 1 to length(GraphPoints)-1 do
begin
Cv.LineTo(GraphPoints[i].X,GraphPoints[i].Y );
Cv.MoveTo(GraphPoints[i].x,GraphPoints[i].Y);
end;
Dilengkapi dengan prosedur membuat batas area gambar dan sumbu koordinat berikut:
procedure DrawGraphAreaBorder;
begin
Cv.MoveTo(MostLeft,MostTop);
Cv.LineTo(MostRight,MostTop);
Cv.MoveTo(MostRight,MostTop);
Cv.LineTo(MostRight,MostBottom);
Cv.MoveTo(MostRight,MostBottom);
Cv.LineTo(MostLeft,MostBottom);
Cv.MoveTo(MostLeft,MostBottom);
Cv.LineTo(MostLeft,MostTop);
end;
procedure DrawAxisOrdinat(user_x,user_y:integer);
var x,y:integer;
begin
x := user_x * scaleX;
y := user_y * ScaleY;
Cv.MoveTo(MostLeft + x,MostTop);
Cv.LineTo(MostLeft + X,MostBottom);
Cv.MoveTo(MostLeft,MostBottom- Y);
Cv.LineTo(MostRight,MostBottom – Y);
end;
Dalam contoh ini, digunakan kanvas dari turunan TImage, prosedurnya adalah:
procedure TForm1.draw_line_graph(Im:TImage);
var
i:integer;
MostLeft,MostBottom,MostRight,MostTop:integer;
cv : TCanvas;
procedure adu(n,x,y:integer);
var idx:integer;
begin
idx:= length(userPoints);
if n+1 > idx then
begin
SetLength(UserPoints,n+1);
end;
UserPoints[n].x :=x;
UserPOints[n].Y := y;
end;
procedure adr(n,x,y:integer);
begin
RealPoints[n].x :=x;
RealPOints[n].Y := y;
end;
procedure adg(n,x,y:integer);
begin
GraphPoints[n].x :=x;
GraphPOints[n].Y := y;
end;
procedure DrawGraphAreaBorder;
begin
Cv.MoveTo(MostLeft,MostTop);
Cv.LineTo(MostRight,MostTop);
Cv.MoveTo(MostRight,MostTop);
Cv.LineTo(MostRight,MostBottom);
Cv.MoveTo(MostRight,MostBottom);
Cv.LineTo(MostLeft,MostBottom);
Cv.MoveTo(MostLeft,MostBottom);
Cv.LineTo(MostLeft,MostTop);
end;
procedure DrawAxisOrdinat(user_x,user_y:integer);
var x,y:integer;
begin
x := user_x * scaleX;
y := user_y * ScaleY;
Cv.MoveTo(MostLeft + x,MostTop);
Cv.LineTo(MostLeft + X,MostBottom);
Cv.MoveTo(MostLeft,MostBottom- Y);
Cv.LineTo(MostRight,MostBottom – Y);
end;
begin
Cv := Im.Canvas;
MostLeft := MarginLeft;
MostTop  := MarginTop;
MostRight := Im.Width – MarginRight;
MostBottom:= Im.Height – MarginBottom;
adu(0,0,6);
adu(1,1,3);
adu(2,2,6);
adu(3,3,4);
adu(4,4,5);
adu(5,5,3);
adu(6,6,6);
adu(7,7,1);
adu(8,8,2);
SetLength(RealPoints,length(UserPoints));
for i:= 0 to length(RealPoints)-1 do
begin
adr(i,UserPoints[i].X * ScaleX,ScaleY*UserPoints[i].Y);
end;
SetLength(GraphPoints,Length(RealPoints));
For i:= 0 to length(GraphPoints)-1 do
begin
adg(i,MostLeft+RealPoints[i].X,MostBottom – RealPoints[i].Y);
end;
//draw margin-border
DrawGraphAreaBorder;
DrawAxisOrdinat(1,1);
Cv.MoveTo(GraphPoints[0].x,GraphPoints[0].Y);
for i:= 1 to length(GraphPoints)-1 do
begin
Cv.LineTo(GraphPoints[i].X,GraphPoints[i].Y );
Cv.MoveTo(GraphPoints[i].x,GraphPoints[i].Y);
end;
end;
procedure TForm1.SpeedButton1Click(Sender: TObject);
begin
draw_line_graph(Image1);
end;
Tombol SpeedBUtton1 adalah turunan dari TSpeedButton.
Saat ini saya menggunakan properties Image1: height = 400, width = 500
maka diperoleh diagram garis:
Hasil grafik garis delphi
Contohnya dapat anda download di Contoh program grafik atau diagram garis.
Selamat mencoba, salam bahagia.
