TAChart Tutorial: Getting started/de: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		## Einführung
2	2
3	3		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
4	4
5	5		Wenn du einen Plot oder Chart in einem Lazarus-Formular benötigst, solltest du einmal einen Blick auf [[TAChart]] werfen. Das ist das von Lazarus standardmäßig dafür zur Verfügung gestellte Package.
6	6
7	7		In diesem Tutorial werden wir einige elementare mathematische Funktionen mit TAChart zeichnen. Wir werden ein Diagramm mit drei Liniendatenreihen ("Series") erzeugen für die Funktionen
8	8
9	9		- y=cos(x),
10	10		- y=sin(x), und
11	11		- y=cos(x)*sin(x).
12	12
13	13		Vielleicht sollte ich noch die hier immer wieder auftauchenden Begriffe "Series" und "Chart" erläutern: das gesamte Diagramm wird auch als "Chart" bezeichnet (- ist "Chart" im Deutschen ein männliches oder sächliches Substantiv? Ich werde lt. Duden immer von "das Chart" reden). Jede Funktion wird als Kurve dargestellt, und diese wird als "Series", oder eingedeutscht als "Datenreihe" bezeichnet. Die Datenpunkte der Kurve werden durch Linienabschnitte verbunden, deshalb spricht man auch von "Line series" bzw. Liniendatenreihe. Mit TAChart kann man natürlich auch andere Arten von Datenreihen erzeugen, z.b. Balkendatenreihen (Bar series), Flächendatenreihen (Area series) oder aber auch fortgeschrittene Datenreihen für Fit- oder Spline-Kurven.
14	14
15	15		## Was brauchen wir?
16	16
17	17		Diese Anleitung wird sehr elementar gehalten sein. Natürlich benötigst du grundlegende Kenntnisse der Programmiersprache Object Pascal und musst mit der Lazarus-Entwicklungsumgebung umgehen können.
18	18
19	19		TAChart ist in Lazarus enthalten. Daher musst du dieses Package nicht irgendwo im Internet suchen und musst auch nichts separat installieren. Allerdings, achte darauf, dass deine Lazarus-Version nicht zu alt ist, denn TAChart wird aktiv weiterentwickelt und kann sich von Version zu Version ändern.
20	20
21	21		Am besten folgst du diesem Tutorial Schritt für Schritt. Du kannst aber auch den Quellcode des fertigen Projekts am Ende dieses Artikels verwenden.
22	22
23	23		## Ein neues Projekt
24	24
25	25		![](/wiki-images/9/95/TAChart_component_palette.png)
26	26
27	27		Zu Beginn erzeugen wir in Lazarus ein neues Projekt und wählen dann in der Komponentenpalette den Reiter "Chart". Klicke auf das Icon ganz links, die "TChart"-Komponente, und füge diese dem Formular hinzu. Als Ergebnis siehst du ein leeres Diagramm mit standardisierten x- und y-Achsen.
28	28
29	29		![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
30	30
31	31		## Datenreihen hinzufügen
32	32
33	33		Nun fügen wir Datenreihen hinzu. Zu diesem Zweck, musst du auf das Chart doppel-klicken (oder rechts-klicken und im Kontext-Menü den obersten Eintrag "Datenreihen bearbeiten" auswählen). Nun erscheint der Datenreihen-Editor von TAChart. Es ist noch alles leer, aber wenn du auf "Hinzuf." klickst, klappt ein Menü auf mit allen Arten von Datenreihen, die TAChart zur Verfügung stellt. Wähle "Linien-Diagramm". Wiederhole dies noch zweimal, um ingesamt drei Datenreihen zu erzeugen, die dem Chart zugeordnet werden. Sie sind im Chart noch nicht sichtbar weil sie ja noch keine Daten enthalten. Keine Daten - keine Anzeige. Aber wir werden uns darum gleich kümmern.
34	34
35	35		![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
36	36
37	37		Aber vorher solltest du dir den Objektbaum über dem Objekt-Inspektor ansehen. TAChart benutzt eine ziemlich komplexe Architektur von Klassen und Containern, daher ist es ganz wesentlich, dass du den Objektbaum verstehst. Im aktuellen Zustand unseres Projekts sehen wir die TChart-Komponente und ihre untergeordneten "Kind"-Komponenten: die drei Liniendatenreihen sowie die Achsenliste ("AxisList"), die ihrerseits wiederum die x und y-Achsen als Kinder enthält (als "Bottom" und "Left" bezeichnet). Die Namen der Datenreihen werden nach dem Schema `Chartname<Zahl><Datenreihentyp><Zahl>` erzeugt.
38	38
39	39		![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
40	40
41	41		Aber warum geben wird den Datenreihen nicht aussagekräftigere Namen, wie `SinSeries`, `CosSeries`, und `SinCosSeries`? Zu diesem Zweck klicken wir auf jede Datenreihe im Objektbaum und ändern ihren Namen im entsprechenden Feld im Objektinspektor darunter.
42	42
43	43		## Daten hinzufügen
44	44
45	45		Nun wird es Zeit, Daten hinzuzufügen. Die einfachste Methode ist, die Daten zusammen mit dem Formular zu erzeugen. Das heißt, wir schreiben einen Handler für das Ereignis `OnCreate` des Formulars und weisen dort, wie gleich gezeigt wird, der Datenreihe die entsprechenden Daten zu. In einem "echten" Projekt wird man natürlich die Daten bei anderen Gelegenheiten den Datenreihen zuweisen, z.B. nach einem Button-Click, der eine Berechnung oder das Einlesen der Daten von Datei bewirkt hat.
46	46
47	47		``` pascal
48	48		procedure TForm1.FormCreate(Sender: TObject);
49	49		const
50	50		N = 100;
51	51		MIN = -10;
52	52		MAX = 10;
53	53		var
54	54		i: Integer;
55	55		x: Double;
56	56		begin
57	57		for i:=0 to N-1 do begin
58	58		x := MIN + (MAX - MIN) * i /(N - 1);
59	59		SinSeries.AddXY(x, sin(x));
60	60		CosSeries.AddXY(x, cos(x));
61	61		SinCosSeries.AddXY(x, sin(x)*cos(x));
62	62		end;
63	63		end;
64	64		```
65	65
66	66		Diese Prozedur erzeugt für jede Datenreihe `N = 100` Datenpunkte. Die x-Werte werden äquidistant zwischen einem Anfangswert Minimum `MIN = -10` und einem Endwert `MAX = +10` berechnet, und die y-Werte ergeben sich aus der betreffenden mathematischen Funktion. Die wichtigen Zeilen sind die Aufrufe der `AddXY`-Methode jeder Datenreihe. Diese Methode erhält die x- und y-Koordinaten jedes Datenpunktes als Parameter und fügt sie einer internen Liste hinzu. Es gibt auch überladene Versionen, bei denen man zusätzlich für jeden Datenpunkt einen Beschriftungstext sowie eine individuelle Farbe angeben kann. Aber dieses Feature brauchen wir hier nicht.
67	67
68	68		Die erwähnte Liste ist eine sogenannte ChartSource (übersetzt: "Chart-Datenquelle") - das ist eine Klasse, die die zu plottenden Daten zur Verfügung stellt. Man kann - wie oben - die eingebaute Datenquelle verwenden, oder eine separate mit der Datenreihe verbinden. Es gibt in der Komponenten-Palette eine Vielzahl von Chart-Datenquellen, wie
69	69
70	70		- `TListChartSource`, die die Daten in einer Array-ähnlichen Liste speichert (dieser Typ wird von unserer Datenreihe intern verwendet)
71	71		- `TDBChartSource`, die die Daten aus den Feldern und Records einer Datenbank holt
72	72		- `TUserDefinedChartSource`, die einen sehr allgemeinen Zugriff auf Daten in allen möglichen Strukturen außerhalb des TAChart-Package ermöglicht, z.B. in einem allgemeinen Array benutzer-definierter Records.
73	73		- `TCalculatedChartSource`, die die Ergebnisse einer Berechnung der Daten aus einer anderen Chart-Datenquelle zur Verfügung stellt.
74	74
75	75		Aber genug über Chart-Datenquellen - die eingebaute Quelle ist für dieses einführende Projekt völlig ausreichend.
76	76
77	77		![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
78	78
79	79		Ok, kompilieren wir das Programm... Wir sehen die drei Kurven, und die x-Achse erstreckt sich automatisch über den Bereich der x-Werte zwischen -10 und +10. Nicht schlecht für den Anfang, aber noch verbesserungswürdig: Das Diagramm ist sehr verwirrend, wir können nicht zwischen den einzelnen Linien unterscheiden, man kann nicht sagen, welche Datenreihe zu welcher Funktion gehört.
80	80
81	81		## Datenreihen formatieren
82	82
83	83		Warum ändern wir nicht die Farbe jeder einzelnen Datenreihe? Dafür muss man nur im Objekt-Baum jede Datenreihe auswählen und dann im darunterligenden Objekt-Inspektor die Eigenschaft `SeriesColor` ("Datenreihen-Farbe") so ändern, wie wir wollen. `SeriesColor` bezeichnet die Farbe der Verbindungslinien zwischen den einzelnen Datenpunkten.
84	84
85	85		Wenn du jetzt neu kompilierst, siehst du die Datenreihen in Farbe. Aber man kann immer noch nicht unterscheiden, welche Datenreihe sich auf welche Funktion bezieht. Wir brauche eine Legende!
86	86
87	87		## Eine Legende hinzufügen
88	88
89	89		Wähle das Chart an. Scrolle im Objektinspektor nach unten zur Eigenschaft `Legend`, öffne die untergeordneten Eigenschaften. Am Ende der Liste findest du die Eigenschaft `Visible` ("sichtbar"), die standardmäßig auf `false` steht. OK - stelle sie auf `true` und kompiliere neu.
90	90
91	91		![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
92	92
93	93		Es wird besser. Was noch fehlt, ist ein erklärender Text für jede Datenreihe, etwas wie `y = sin(x)`. Kein Problem! Für diesen Zweck hat jede Datenreihe eine Eigenschaft `Title` - das ist der Text, der stellvertretend für die Datenreihe in der Legende erscheint, zusammen mit einem Symbol für das Aussehen der Datenreihe. Also: gehe nochmals alle Datenreihen durch und gib im Objektinspektor jeweils für `Title` die folgenden Texte ein: `y=sin(x)`, `y=cos(x)`, and `y=sin(x)*cos(x)`.
94	94
95	95		![](/wiki-images/5/5f/Tachart_getting_started_step4.png) ![](/wiki-images/2/20/Tachart_getting_started_step4a.png)
96	96
97	97		Wenn du jetzt neu kompiliert, ist das Chart fast perfekt. Fast - weil die Legende relativ groß ist und das Diagramm im verfügbaren Platz zusammenquetscht. Natürlich könnte man das Formular mit dem Diagramm vergrößern. Aber könnte man stattdessen nicht die Legende unterhalb des Charts anordnen? Kein Problem: Gehe zurück zur Chart-Eigenschaft `Legend` und setzte die Eigenschaft `Alignment` ("Ausrichtung") auf `laBottomCenter` ("unten Mitte"). Du solltest auch `ColumnCount` ("Spaltenanzahl") auf 3 setzen, damit die drei Einträge nebeneinander, als 3 Spalten, dargestellt werden.
98	98
99	99		![](/wiki-images/3/37/Tachart_getting_started_step5.png)
100	100
101	101		Ah! -- der dritte Legendeneintrag wird abgeschnitten, weil das Fenster nicht breit genug ist. Setze die Eigenschaft `Align` ("Ausrichten") des Chart auf `alClient` und vergrößere die Fensterbreite ein bisschen.
102	102
103	103		## Feinabstimmung
104	104
105	105		Ein paar wenige Dinge kann man noch verbessern: Die Achsen sollten einen Titel haben, etwa "x-Achse" and "y-Achse", und über dem Chart sollte auch ein Titel stehen.
106	106
107	107		Um den Titel der x-Achse festzulegen, wähle im Objekt-Baum den Eintrag `Bottom` of the `AxisList`-Kindkomponente des Chart, oder gehe im Objektinspektor zum Eintrag `Bottom axis`. Klappe die Untereigenschaften auf, wo das Feld `Title` zu finden ist. Diese Eigenschaft hat ihrerseits weitere untergeordnete Eigenschaften. Der Text im Feld `Caption` ("Beschriftung") ist das, was wir suchen - dieser Text wird als Beschriftung an der Achse angezeigt. Vergiss nicht, `Visible` auf `true` zu setzen, damit die Beschriftung auch wirklich angezeigt wird. Natürlich kannst du auch die Schriftart z.b. auf fett umstellen: die zugehörige Eigenschaft findest du etwas weiter oben unter `LabelFont` und `Style`.
108	108
109	109		Wiederhole dieses Vorgehen mit der Titel der y-Achse (`Left axis`). Und im wesentlichen dieselbe Prozedur gilt auch für den Chart-Titel: Scrolle zur Chart-Eigenschaft `Title` ("Titel"), und tippe den Titel ins Feld `Text` ein (wo auch mehrzeiliger Text möglich ist). Nicht vergessen: `Visible` auf `true` setzen.
110	110
111	111		Und zum Schluss: Wie wär's mit einem weißen Hintergrund für die durch die Achsen aufgespannte Chart-Fläche? Dafür ist die Eigenschaft `BackColor` des Chart zuständigt. Und vielleicht sollte das Gitternetz der Achsen weniger deutlich hervortreten? Stelle dazu die Eigenschaft `Grid.Color` jeder Achse auf die Farbe `clSilver` um.
112	112
113	113		## Fertig!
114	114
115	115		Zum Schluss sieht unser Chart so aus. Toll, nicht? Und es war eigentlich gar nicht schwierig...
116	116
117	117		Wenn du mehr über TAChart lernen willst, solltest du dir die [[TAChart documentation\|offizielle Dokumentation]] ansehen und mit einigen der vielen Demos spielen, die zu TAChart gehören. Du findest sie im Ordner components\tachart\demo deiner Lazarus-Installation.
118	118
119	119		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
120	120
121	121		## Quellcode
122	122
123	123		Der Quellcode dieses Tutorials steht auch im Ordner tutorials/getting_started neuerer TAChart-Installationen.
124	124
125	125		### Projekt-Datei (.lpr)
126	126
127	127		``` pascal
128	128		program project1;
129	129
130	130		{$mode objfpc}{$H+}
131	131
132	132		uses
133	133		{$IFDEF UNIX}{$IFDEF UseCThreads}
134	134		cthreads,
135	135		{$ENDIF}{$ENDIF}
136	136		Interfaces, // this includes the LCL widgetset
137	137		Forms, Unit1, tachartlazaruspkg
138	138		{ you can add units after this };
139	139
140	140		{$R *.res}
141	141
142	142		begin
143	143		RequireDerivedFormResource := True;
144	144		Application.Initialize;
145	145		Application.CreateForm(TForm1, Form1);
146	146		Application.Run;
147	147		end.
148	148		```
149	149
150	150		### Unit1.pas
151	151
152	152		``` pascal
153	153		unit Unit1;
154	154
155	155		{$mode objfpc}{$H+}
156	156
157	157		interface
158	158
159	159		uses
160	160		Classes, SysUtils, FileUtil, TAGraph, TASeries, Forms, Controls, Graphics,
161	161		Dialogs;
162	162
163	163		type
164	164
165	165		{ TForm1 }
166	166
167	167		TForm1 = class(TForm)
168	168		Chart1: TChart;
169	169		SinSeries: TLineSeries;
170	170		CosSeries: TLineSeries;
171	171		SinCosSeries: TLineSeries;
172	172		procedure FormCreate(Sender: TObject);
173	173		private
174	174		{ private declarations }
175	175		public
176	176		{ public declarations }
177	177		end;
178	178
179	179		var
180	180		Form1: TForm1;
181	181
182	182		implementation
183	183
184	184		{$R *.lfm}
185	185
186	186		{ TForm1 }
187	187
188	188		procedure TForm1.FormCreate(Sender: TObject);
189	189		const
190	190		N = 100;
191	191		MIN = -10;
192	192		MAX = 10;
193	193		var
194	194		i: Integer;
195	195		x: Double;
196	196		begin
197	197		for i:=0 to N - 1 do begin
198	198		x := MIN + (MAX - MIN) * i / (N - 1);
199	199		SinSeries.AddXY(x, sin(x));
200	200		CosSeries.AddXY(x, cos(x));
201	201		SinCosSeries.AddXY(x, sin(x)*cos(x));
202	202		end;
203	203
204	204		end;
205	205
206	206		end.
207	207		```
208	208
209	209		### Unit.lfm
210	210
211		-	~~``` pascal~~
	211	+	``` lfm
212	212		object Form1: TForm1
213	213		Left = 14
214	214		Height = 244
215	215		Top = 137
216	216		Width = 347
217	217		Caption = 'Form1'
218	218		ClientHeight = 244
219	219		ClientWidth = 347
220	220		OnCreate = FormCreate
221	221		LCLVersion = '1.1'
222	222		object Chart1: TChart
223	223		Left = 0
224	224		Height = 244
225	225		Top = 0
226	226		Width = 347
227	227		AxisList = <
228	228		item
229	229		Grid.Color = clSilver
230	230		Minors = <>
231	231		Title.LabelFont.Orientation = 900
232	232		Title.LabelFont.Style = [fsBold]
233	233		Title.Visible = True
234	234		Title.Caption = 'y axis'
235	235		end
236	236		item
237	237		Grid.Color = clSilver
238	238		Alignment = calBottom
239	239		Minors = <>
240	240		Title.LabelFont.Style = [fsBold]
241	241		Title.Visible = True
242	242		Title.Caption = 'x axis'
243	243		end>
244	244		BackColor = clWhite
245	245		Foot.Brush.Color = clBtnFace
246	246		Foot.Font.Color = clBlue
247	247		Legend.Alignment = laBottomCenter
248	248		Legend.ColumnCount = 3
249	249		Legend.Visible = True
250	250		Title.Brush.Color = clBtnFace
251	251		Title.Font.Color = clBlue
252	252		Title.Font.Style = [fsBold]
253	253		Title.Text.Strings = (
254	254		'My first chart'
255	255		)
256	256		Title.Visible = True
257	257		Align = alClient
258	258		ParentColor = False
259	259		object SinSeries: TLineSeries
260	260		Title = 'y=sin(x)'
261	261		LinePen.Color = clRed
262	262		end
263	263		object CosSeries: TLineSeries
264	264		Title = 'y=cos(x)'
265	265		LinePen.Color = clBlue
266	266		end
267	267		object SinCosSeries: TLineSeries
268	268		Title = 'y=sin(x)*cos(x)'
269	269		LinePen.Color = clGreen
270	270		end
271	271		end
272	272		end
273	273		```
274	274
275	275		---
276	276		From the Free Pascal wiki, page "TAChart Tutorial: Getting started/de", as it stood on 2020-02-29 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history