TAChart Tutorial: Getting started/fr: what changed

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

Old	New		Line
1	1		## Introduction
2	2
3	3		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
4	4
5	5		Si vous voulez ajouter un tracé ou un graphique à votre fiche Lazarus vous devriez jeter un oeil sur [[TAChart]]. C'est le paquet standard Lazarus pour dessiner des tracés et des graphqiues.
6	6
7	7		Dans ce tutoriel nous allons dessiner quelques fonctions mathématiques élémentaires avec TAChart. Nous allons créer un graphique avec 3 séries de lignes pour ces fonctions
8	8
9	9		- y=cos(x),
10	10		- y=sin(x), et
11	11		- y=cos(x)*sin(x).
12	12
13	13		Il sera peut-être nécessaire d'expliquer les termes "séries" et "graphques" ici: le diagrame entier est le "graphique" (chart), et chacune des fonctions sera affichée comme une courbe appelée "séries". Nous allons connecter les points de données avec des sections de lignes, d'où nous utiliserons les "séries de lignes". TAChart, bien sûr, permet d'utiliser de nombreux autres types de séries, par exemples les séries de barres, les séries de surface, les séries de camberts, ou même des types avancés comme les splines ou les séries adaptatives (fit).
14	14
15	15		## Ce qui est requis?
16	16
17	17		Ce guide sera très élémentaire. Bien sûr, vous aures besoin de la connaissance de base du langage Pascal Object de le l'EDI Lazarus.
18	18
19	19		TAChart est inclus dans Lazarus, il n'y a donc pas besoin de rechercher ce paquet sur internet. Cependant n'utilisez pas une version trop ancienne de Lazarus du fait que TAChart est activement développé et certaines fonctionnalités peuvent changer entre deux versions.
20	20
21	21		Le mieux est de suivre ce tutoriel pas-à-pas. mais si vous le voulez vous pouvez utiliser le code source du projet achevé à la fin de cet article.
22	22
23	23		## Un nouveau projet
24	24
25	25		![](/wiki-images/9/95/TAChart_component_palette.png)
26	26
27	27		Pour commencer, nous créons un nouveau projet dans Lazarus et dans la palette composants nous sélectionnons la page "Chart". Cliquez sur l'icon la plus à gauche, le composant TChart et ajoutez-le sur la fiche. Vous verrez un diagramme vide avec les axes standards x et y.
28	28
29	29		![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
30	30
31	31		## Ajouter des séries
32	32
33	33		Ajoutons maintenant des séries. Pour cela, double-cliquez sur le chart (ou cliquez-droit et sélectionnez "Edit series" depuis le menu contextuel). L'éditeur de séries TAChart apparait. Il est encore vide mais vous pouvez sélectionner "Ajouter" vous verrez un menu avec tous les types de séries disponibles dans le paquet TAChart. Sélectionnez le "line series". Répétez deux fois pour créer, au total, trois séries de lignes qui sont assignées au chart. Elles ne sont pas encore affichées sur le chart parce qu'elles ne possèdent pas encore de données. Pas de données, pas d'affichage. Nous allons arranger cela dans une minute.
34	34
35	35		![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
36	36
37	37		Avant de faire cela jetons un oeil à l'arborescence de l'inspecteur d'objet. TAChart utilise une architecture assez complexe de classes et de conteneurs, il est donc important de comprenre l'arborescence de l'objet. Au stade actuel de notre projet nous pouvons voir que le composant TChart et ses enfants, les trois séries de lignes et le AxisList avec les axes Left et Bottom comme enfants également. Les noms de séries sont construites en rapport avec `Chart<number><SeriesType><Number>`.
38	38
39	39		![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
40	40
41	41		Pourquoi ne pas leur donner un nom plus descriptif comme `SinSeries`, `CosSeries`, et `SinCosSeries`? Pour ce faire cliquez sur chaque série et changez le `Name` de chaque série en accord avec le champ dans l'inspecteur d'objet ci-dessous.
42	42
43	43		## Ajout de données
44	44
45	45		Il est temps maintenant d'ahouter des données. L'option la plus simple est de crer les données en même temps que la fiche, c'est à dire que nous écrivons un gestionnaire pour l'événement `OnCreate` de la fiche. Bien sûr, dans un projet réel, vous ajouterez les données à d'autres occasions, par exemple après un clic de bouton qui pourrait initier un calcul ou une lecture de données depuis un fichier.
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		La procédure crée 100 points de données pour chaque série. Les valeurs x sont calculées pour être équidistantes entre `MIN` et `MAX`, c'est à dire -10 et 10. Les lignes importantes sont les appels à la méthode `AddXY` de chauqe série. Cette méthode prend les coordonnées x et y de chaque point de données et les ajoute à une liste interne. Il y a aussi des versions surchargées de cette méthode où vous pourrez passer uné étiquette de texte pour chaque point de donnée, de même qu'une couleur individuelle, mais nous n'avons pas besoin de cette fonctionnalité ici.
67	67
68	68		La liste mentionnée est ainsi nommée chart source - c'est une classe qui fourniy les données pour le tracé. Vous pouvez utiliser la chart source intégrée ou vous pouvez lier les séries à une source séparée. Il y a une variété de chart sources dane la palette de composants comme
69	69
70	70		- `TListChartSource` qui stocke les données dans une liste (ce type est utilisé par nos séries en interne)
71	71		- `TDBChartSource` qui fait l'interface avec les enregistrements et les champs dans une base de données
72	72		- `TUserDefinedChartSource` which qui donnée un accès général aux donénes, par exemple, stockées dans un tableau d'enregistrements définis par l'utilisateur
73	73		- `TCalculatedChartSource` qui permet d'analyser une série et afficher le résultat dans une autre.
74	74
75	75		Mais en voila assez sur les chart sources - la source intégrée est suffisante pour ce projet d'introduction.
76	76
77	77		![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
78	78
79	79		Ok, compilons le programme. Nous voyons les trois courbes, et l'axe x est automatiquement couvert par notre plage de données entre -10 et 10. Bien - pas trop mal, mais loin d'être parfait: Le diagramme est très confus, nous ne pouvons pas faire la distinction entre les lignes individuelles, et nous ne pouvons pas dire quelle ligne appartient à quelle fonction.
80	80
81	81		## Formater les séries
82	82
83	83		Pourquoi ne changerions-nous pas la couleur de chaque série ? Pour faire cela, sélectionnez chaque série dans la hiérarchie de composant de l'inspecteur d'objets, puis changez la propriété `SeriesColor` comme vous le souhaitez. `SeriesColor` est la couleur de la ligne joignant les points de la série.
84	84
85	85		Lorsque vous recompilez, vous verrez les différentes couleurs. Mais nous ne pouvons toujours pas distinguer les différentes fonctions. Nous avons besoin d"une légende.
86	86
87	87		## Ajout d'une légende
88	88
89	89		Highlight the chart and, in the object inspector, scroll down to `Legend` and open the sub-properties. At the end, there is `Visible` which is `false` by default - so, set it to `true`, and recompile.
90	90
91	91		![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
92	92
93	93		Well, it's getting better. What is missing, is an explanatory text for each series, like `y = sin(x)`. For this purpose each series has a property `Title` - this is the text which will appear in the legend for each entry along with the symbol for the corresponding series. Therefore you have to go through all series again and use the object inspector to set `Title` to `y=sin(x)`, `y=cos(x)`, and `y=sin(x)*cos(x)`, respectively.
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		Now when you recompile, the chart is almost perfect. Almost - because the legend is quite large, and the diagram is squeezed into the remaining space. Of course, we could increase the size of the form. But can we also put the legend underneath the diagram? No problem: go back to the chart's property `Legend` and set `Alignment` to `laBottomCenter`. You should also set `ColumnCount` to `3`, otherwise the legend items will be in a column instead of in a row.
98	98
99	99		![](/wiki-images/3/37/Tachart_getting_started_step5.png)
100	100
101	101		Ah! -- the third legend entry is truncated because the window is not wide enough. Align the chart to `alClient` and increase the width of the window a bit.
102	102
103	103		## Fine-tuning
104	104
105	105		A few more things can still be improved: The axes should have a title, like "x axis" and "y axis", respectively, and there should also be a title above the chart.
106	106
107	107		To set the title for the x axis select in the object tree the item `Bottom` of the AxisList child component of TChart, or go to `Bottom axis` in the object inspector. Open the sub-properties where you'll find `Title` which has sub-properties again. The text in the field `Caption` will be displayed as a title above the chart. Don't forget to set `Visible` to `true`. You may also want to set the font style of the title to bold - you find that property under `LabelFont`. Repeat the same with `Left axis`.
108	108
109	109		Essentially the same procedure can be used to set the chart title: Scroll to the chart's property `Title`, enter the title in the field `Text` (you may even use a multi-line text here), and set `Visible` to `true` again.
110	110
111	111		And finally, you might prefer to use a white background of the chart area, this is changed by the property `BackColor` of TChart. And maybe the grid should be less emphasized, i.e. it might look better with color `clSilver`. Use the left and bottom axes property `Grid.Color` to change that.
112	112
113	113		## Finished!
114	114
115	115		In the end, our chart looks like this. Neat, isn't it? And it was not difficult at all...
116	116
117	117		If you want to learn more about TAChart have a look at the official [[TAChart documentation]], and study some of the many demos that come with TAChart. They can be found in the folder `components\tachart\demo` of your Lazarus installation.
118	118
119	119		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
120	120
121	121		## Source code
122	122
123	123		The source code of this tutorial project can be found in the folder tutorials/getting_started of trunk TAChart installations.
124	124
125	125		### Project file
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/fr", 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