TAChart Tutorial: Getting started/fr: what changed

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

Title: TAChart Tutorial: Getting started/fr

New		Line
1	+	## Introduction
2	+
3	+	![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
4	+
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	+
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	+
9	+	- y=cos(x),
10	+	- y=sin(x), et
11	+	- y=cos(x)*sin(x).
12	+
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	+
15	+	## Ce qui est requis?
16	+
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	+
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	+
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	+
23	+	## Un nouveau projet
24	+
25	+	![](/wiki-images/9/95/TAChart_component_palette.png)
26	+
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	+
29	+	![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
30	+
31	+	## Ajouter des séries
32	+
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	+
35	+	![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
36	+
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	+
39	+	![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
40	+
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	+
43	+	## Ajout de données
44	+
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	+
47	+	``` pascal
48	+	procedure TForm1.FormCreate(Sender: TObject);
49	+	const
50	+	N = 100;
51	+	MIN = -10;
52	+	MAX = 10;
53	+	var
54	+	i: Integer;
55	+	x: Double;
56	+	begin
57	+	for i:=0 to N-1 do begin
58	+	x := MIN + (MAX - MIN) * i /(N - 1);
59	+	SinSeries.AddXY(x, sin(x));
60	+	CosSeries.AddXY(x, cos(x));
61	+	SinCosSeries.AddXY(x, sin(x)*cos(x));
62	+	end;
63	+	end;
64	+	```
65	+
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	+
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	+
70	+	- `TListChartSource` qui stocke les données dans une liste (ce type est utilisé par nos séries en interne)
71	+	- `TDBChartSource` qui fait l'interface avec les enregistrements et les champs dans une base de données
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	+	- `TCalculatedChartSource` qui permet d'analyser une série et afficher le résultat dans une autre.
74	+
75	+	Mais en voila assez sur les chart sources - la source intégrée est suffisante pour ce projet d'introduction.
76	+
77	+	![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
78	+
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	+
81	+	## Formater les séries
82	+
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	+
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	+
87	+	## Ajout d'une légende
88	+
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	+
91	+	![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
92	+
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	+
95	+	![](/wiki-images/5/5f/Tachart_getting_started_step4.png) ![](/wiki-images/2/20/Tachart_getting_started_step4a.png)
96	+
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	+
99	+	![](/wiki-images/3/37/Tachart_getting_started_step5.png)
100	+
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	+
103	+	## Fine-tuning
104	+
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	+
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	+
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	+
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	+
113	+	## Finished!
114	+
115	+	In the end, our chart looks like this. Neat, isn't it? And it was not difficult at all...
116	+
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	+
119	+	![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
120	+
121	+	## Source code
122	+
123	+	The source code of this tutorial project can be found in the folder tutorials/getting_started of trunk TAChart installations.
124	+
125	+	### Project file
126	+
127	+	``` pascal
128	+	program project1;
129	+
130	+	{$mode objfpc}{$H+}
131	+
132	+	uses
133	+	{$IFDEF UNIX}{$IFDEF UseCThreads}
134	+	cthreads,
135	+	{$ENDIF}{$ENDIF}
136	+	Interfaces, // this includes the LCL widgetset
137	+	Forms, Unit1, tachartlazaruspkg
138	+	{ you can add units after this };
139	+
140	+	{$R *.res}
141	+
142	+	begin
143	+	RequireDerivedFormResource := True;
144	+	Application.Initialize;
145	+	Application.CreateForm(TForm1, Form1);
146	+	Application.Run;
147	+	end.
148	+	```
149	+
150	+	### Unit1.pas
151	+
152	+	``` pascal
153	+	unit Unit1;
154	+
155	+	{$mode objfpc}{$H+}
156	+
157	+	interface
158	+
159	+	uses
160	+	Classes, SysUtils, FileUtil, TAGraph, TASeries, Forms, Controls, Graphics,
161	+	Dialogs;
162	+
163	+	type
164	+
165	+	{ TForm1 }
166	+
167	+	TForm1 = class(TForm)
168	+	Chart1: TChart;
169	+	SinSeries: TLineSeries;
170	+	CosSeries: TLineSeries;
171	+	SinCosSeries: TLineSeries;
172	+	procedure FormCreate(Sender: TObject);
173	+	private
174	+	{ private declarations }
175	+	public
176	+	{ public declarations }
177	+	end;
178	+
179	+	var
180	+	Form1: TForm1;
181	+
182	+	implementation
183	+
184	+	{$R *.lfm}
185	+
186	+	{ TForm1 }
187	+
188	+	procedure TForm1.FormCreate(Sender: TObject);
189	+	const
190	+	N = 100;
191	+	MIN = -10;
192	+	MAX = 10;
193	+	var
194	+	i: Integer;
195	+	x: Double;
196	+	begin
197	+	for i:=0 to N - 1 do begin
198	+	x := MIN + (MAX - MIN) * i / (N - 1);
199	+	SinSeries.AddXY(x, sin(x));
200	+	CosSeries.AddXY(x, cos(x));
201	+	SinCosSeries.AddXY(x, sin(x)*cos(x));
202	+	end;
203	+
204	+	end;
205	+
206	+	end.
207	+	```
208	+
209	+	### Unit.lfm
210	+
211	+	``` pascal
212	+	object Form1: TForm1
213	+	Left = 14
214	+	Height = 244
215	+	Top = 137
216	+	Width = 347
217	+	Caption = 'Form1'
218	+	ClientHeight = 244
219	+	ClientWidth = 347
220	+	OnCreate = FormCreate
221	+	LCLVersion = '1.1'
222	+	object Chart1: TChart
223	+	Left = 0
224	+	Height = 244
225	+	Top = 0
226	+	Width = 347
227	+	AxisList = <
228	+	item
229	+	Grid.Color = clSilver
230	+	Minors = <>
231	+	Title.LabelFont.Orientation = 900
232	+	Title.LabelFont.Style = [fsBold]
233	+	Title.Visible = True
234	+	Title.Caption = 'y axis'
235	+	end
236	+	item
237	+	Grid.Color = clSilver
238	+	Alignment = calBottom
239	+	Minors = <>
240	+	Title.LabelFont.Style = [fsBold]
241	+	Title.Visible = True
242	+	Title.Caption = 'x axis'
243	+	end>
244	+	BackColor = clWhite
245	+	Foot.Brush.Color = clBtnFace
246	+	Foot.Font.Color = clBlue
247	+	Legend.Alignment = laBottomCenter
248	+	Legend.ColumnCount = 3
249	+	Legend.Visible = True
250	+	Title.Brush.Color = clBtnFace
251	+	Title.Font.Color = clBlue
252	+	Title.Font.Style = [fsBold]
253	+	Title.Text.Strings = (
254	+	'My first chart'
255	+	)
256	+	Title.Visible = True
257	+	Align = alClient
258	+	ParentColor = False
259	+	object SinSeries: TLineSeries
260	+	Title = 'y=sin(x)'
261	+	LinePen.Color = clRed
262	+	end
263	+	object CosSeries: TLineSeries
264	+	Title = 'y=cos(x)'
265	+	LinePen.Color = clBlue
266	+	end
267	+	object SinCosSeries: TLineSeries
268	+	Title = 'y=sin(x)*cos(x)'
269	+	LinePen.Color = clGreen
270	+	end
271	+	end
272	+	end
273	+	```
274	+
275	+	---
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