TAChart Tutorial: Getting started/fi: what changed

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

Old	New		Line
1	1		## Johdanto
2	2
3	3		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
4	4
5	5		Jos halutaan lisätä kaavio tai diagrammi Lazaruksen lomakkeelle niin [[TAChart]] komponentteja kannattaa katsoa. Tämä on vakio Lazarus paketti kaavioiden näyttämiseen.
6	6
7	7		Tässä opetusohjelmassa tehdään joitakin matemaattisia toimintoja TAChart:lla. Luomme kaavion jossa on kolme viivakuvaajaa (LineSeries)
8	8
9		-	~~` y = cos (x),`\~~
10		-	~~` y = sin (x), ja`\~~
11		-	~~` y = cos (x) * sin (x). `~~
	9	+	```text
	10	+	y = cos (x),
	11	+	y = sin (x), ja
	12	+	y = cos (x) * sin (x).
	13	+	```
12	14
13	15		Aluksi yhdistetään datapisteitä, siksi käytämme "viivakuvaajaa". TAChart, tietenkin, mahdollistaa käyttää monia muitakin kuvaajia, esimerkiksi palkkia, aluetta, piirakkaa, tai jopa kehittyneitä tyyppejä kuten B-käyrä tai laatikko-jana kuvaajaa.
14	16
15	17		## Mitä tarvitaan?
16	18
17	19		Tämä opas on aika perusteellinen. Mutta pohjaksi tietenkin tarvitaan perustiedot Object Pascal kielestä ja Lazarus IDE:stä.
18	20
19	21		TAChart sisältyy vakiona Lazarukseen, joten ei ole tarvetta etsiä tätä pakettia jostain paikasta internetistä. Älä kuitenkaan käytä liian vanhaa versiota Lazaruksesta koska TAChart kehitetään aktiivisesti ja jotkut ominaisuudet saattavat muuttua versiosta toiseen.
20	22
21	23		Parasta on, jos noudatat tätä opasta vaihe vaiheelta. Haluessasi voit käyttää tämän artikkelin lopussa olevaa valmista lähdekoodia.
22	24
23	25		## Uusi projekti
24	26
25	27		![](/wiki-images/9/95/TAChart_component_palette.png)
26	28
27	29		Aluksi, luomme uuden projektin Lazaruksessa, ja komponenttipaletilta valitaan sivu "Chart". Klikkaa äärimmäisenä vasemmalla olevaa kuvaketta, TChart komponentti, ja lisää se lomakkeelle. Näet lomakkeella tyhjän kaavion jossa on x- ja y-akselit.
28	30
29	31		![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
30	32
31	33		## Kuvaajan lisääminen
32	34
33	35		Nyt lisätään kuvaaja. Tämä onnistuu kaksoisnapsauttamalla TChart komponenttia (tai hiiren kakkospainikkeella ja valitse "Muokkaa kuvaajia" ponnahdusvalikosta). TAChart sarjan editori tulee näkyviin. Se on edelleen tyhjä, mutta kun valitset "Lisää" näet valikon jossa on TAChart paketissa olevat kaikki kuvaajat. Valitse "viivakuvaaja". Toista tämä vielä kaksi kertaa, luot siis yhteensä kolme viivakuvaajaa kaavioon. Ne eivät vielä näy kaaviossa, koska niissä ei vielä ole dataa. Jos ei dataa - niin ei näytetä. Tämä korjaantuu hetkessä.
34	36
35	37		![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
36	38
37	39		Tässä välissä on hyvä katsoa komponenttimuokkainta. TAChart käyttää varsin monimutkaista luokkiuen ja säiliöiden arkkitehtuuria, joten on tärkeää ymmärtää oliopuu. Tässä vaiheessa projektia nähdään TChart komponentti ja sen lapset, kolme viivakuvaajaa (Line Series) ja AxisList jolla on Left ja Bottom akselit lapsina. Kuvaajien nimet on rakennettu: `Chart< numero >< kuvaajan englanninkielinen nimi >< numero >`.
38	40
39	41		![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
40	42
41	43		Kuvaajille voidaan antaa enemmän kuvaavat nimet, kuten `SinSeries`, `CosSeries` ja `SinCosSeries`. Tätä tarkoitusta varten, klikkaa kutakin kuvaajaa ja muuttaa kuvaajan nimeä `Name` ominaisuudessa varattuun kenttään komponenttimuokkaimessa.
42	44
43	45		## Lisätään data
44	46
45	47		Nyt on aika lisätä dataa. Helpoin vaihtoehto on lisätä dataa on lisätä se lomakketta luotaessa. Kirjoitetaan ne lomakkeen `OnCreate` tapahtumaan. Tietenkin "todellisessa" projektissa, voit lisätä tietoja muissakin tilanteissa, esimerkiksi kun napin painalluksella, joka voisi aloittaa laskemisen tai lukea tietoja tiedostosta.
46	48
47	49		``` pascal
48	50		procedure TForm1.FormCreate(Sender: TObject);
49	51		const
50	52		N = 100;
51	53		MIN = -10;
52	54		MAX = 10;
53	55		var
54	56		i: Integer;
55	57		x: Double;
56	58		begin
57	59		for i:=0 to N-1 do begin
58	60		x := MIN + (MAX - MIN) * i /(N - 1);
59	61		SinSeries.AddXY(x, sin(x));
60	62		CosSeries.AddXY(x, cos(x));
61	63		SinCosSeries.AddXY(x, sin(x)*cos(x));
62	64		end;
63	65		end;
64	66		```
65	67
66	68		Tämä metodi luo 100 datapistettä kuhunkin kuvaajaan. X:n arvot lasketaan olevan yhtä kaukana välillä `MIN` ja `MAX` eli -10 ja 10. Tärkeät rivit ovat ne joissa kutsutaan kunkin kuvaajan `AddXY` metodia. Tämä metodi vie x- ja y-koordinaatit kunkin datapisteeseen ja lisää ne sisäisen luetteloon. On myös ylikuormitettu versioita tähän metodiin, jossa voit myös siirtää tekstin datapisteen sekä yksittäisen värin, mutta emme tarvitse tätä ominaisuutta tällä kertaa.
67	69
68	70		Mainittu luettelo on niin sanottu chart source - tämä on luokka, joka tarjoaa datat piirtämiseen. Voit käyttää sisäänrakennettua chart source:a, tai voit linkittää erikseen kuvaajaan. On erilaisia chart source:ja komponenttipalettissa, kuten
69	71
70	72		- `TListChartSource` joka tallentaa datat luetteloon (tämän typpistä nyt käytetään)
71	73		- `TDBChartSource` joka on rajapinta tietokannan tietueisiin ja kenttiin
72	74		- `TUserDefinedChartSource` joka antaa erittäin yleisen pääsyn dataan, esimerkiksi, tallennetaan taulukkoon käyttäjän määrittät tietueet
73	75		- `TCalculatedChartSource` jonka avulla voidaan analysoida kuvaajan ja näyttää tulokset toisessa.
74	76
75	77		Tämä on nyt tarpeeksi chart sources - sisäänrakennettu chart source riittää tähän projektiin.
76	78
77	79		![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
78	80
79	81		Ok, käännä ja aja nyt ohjelma. Näemme kolme käyrää, ja x-akseli automaattisesti näyttä että datat vaihtelevat välillä -10 ja 10. No - ei aivan huono, mutta kaukana täydellisestä: kaavio on hyvin sekava, ei voi erottaa yksittäisiä rivejä, ja ei voi kertoa mikä kuvaaja kuuluu mihinkin.
80	82
81	83		## Kuvaajien alustaminen
82	84
83	85		Herää ajatus että selkeyttä voitaisiin saada muuttamalla eri kuvaajien värit erilaiseksi. Tämä tehdään valitsemalla komponenttimuokkaimessa kunkin kuvaajan oliopuussa muuttamalla `SeriesColor`ominaisuutta halutun väriseksi. `SeriesColor` määrittää sen värin joka yhdistää kuvaajan datapisteet.
84	86
85	87		Kun muutit kaikki eri väriseksi ja käännät sen niin näet kuvaajat värillisinä. Mutta ohjelman käyttäjä ei voi erottaa mitä mitäkin on. Tarvitsemme selityspalkin (legend).
86	88
87	89		## Lisätään selityspalkki (legend)
88	90
89	91		Korosta kaavio ja komponenttimuokkaimessa mene kohtaan `Legend` ja avaa sen osa-ominaisuudet. Lopussa on `Visible` joka on oletuksena `false` - niin vaihda se `true`:ksi ja käännä.
90	92
91	93		![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
92	94
93	95		No, siitä tuli parempi. Se mikä puuttuu, on selittävä teksti kullekin kuvaajalle, kuten `y = sin(x)`. Tätä varten kullakin kuvaajalla on ominaisuus `Title` - tässä on se teksti, joka näkyy selityspalkissa kunkin kuvaajan symbolin jälkeen. Seuraavaksi käydään läpi kaikki kuuvaajat uudelleen ja asetetaan komponenttimuokkaimessa `Title` kohdassa `y=sin(x)`, `y=cos(x)` tai `y=sin(x)*cos(x)` kuvaajaa vastaavasti.
94	96
95	97		![](/wiki-images/5/5f/Tachart_getting_started_step4.png) ![](/wiki-images/2/20/Tachart_getting_started_step4a.png)
96	98
97	99		Nyt kun kääntää niin kaavio on lähes täydellinen. Lähes - koska selityspalkki on melko suuri ja kaavio vie jäljellä olevan tilan joka on suhteellisesti katsoen pieni. Tietenkin voidaan kasvattaa lomakkeen kokoa. Toisaalta voidaan selityspalkki laittaa kaavion alle. Tämä onnistuu muuttamalla kaavion omaisuutta `Legend` ja asetamalla `Alignment` arvoksi `laBottomCenter` . Sekä myös asettaa `ColumnCount` arvoksi 3 , muuten kuvaajien selitystekstit ei tulee olemaan peräkkäin.
98	100
99	101		![](/wiki-images/3/37/Tachart_getting_started_step5.png)
100	102
101	103		Ah! - Kolmas merkintä on katkaistu, koska ikkuna ei ole tarpeeksi leveä. Muuta kaavion Align-ominaisuus `alClient`:ksi ja lisää ikkunan leveys hieman.
102	104
103	105		## Hienosäätö
104	106
105	107		Muutamia asioita voidaan vielä parantaa: akseleilla tulisi olla otsikko, kuten "x-akseli" ja "y-akseli", vastaavasti siellä pitäisi olla myös otsikko kaavion yläpuolella.
106	108
107	109		Asetettaaksi otsikon x-akselille se onnistuu valitsemalla kaavion oliopuusta AxisList:n kohta `Bottom`. Avaa sen aliominaisuudet, etsi kohta `Title` ja sen aliominaisuuksiin. `Caption` kohdassa oleva teksti näytetään kaaviossa. Jos `Visible` on asetettu arvoon `true`. Tässä voidaan myös määrittää fontin tyyli. Tee sama `Left` kohtaan.
108	110
109	111		Vastaavasti samaa menetelmää voidaan käyttää asettamaan kaavion otsikko: Siirry kaavion omaisuuteen `Title` , kirjoita otsikko kenttään `Text` (tässä voi käyttää monirivistä tekstiä) ja aseta `Visible` arvoon `true`.
110	112
111	113		Ja lopuksi, voidaan käyttää vaikka kaavion taustalla valkoista väriä, tämä on muuttamalla omaisuutta `BackColor`. Ja ehkä ruudukkoa olisi vähemmän korostettava, eli se voisi näyttää paremmalta jos väri olisi `clSilver`. Muuta Left:n ja Bottom:n omaisuutta `Grid.Color` vaihtaaksesi sen.
112	114
113	115		## Valmis!
114	116
115	117		Lopulta kaavio näyttää tältä. Aika hieno? Eikä se ollut ollenkaan vaikeaa ...
116	118
117	119		Jos haluat lisätietoja TAChart:sta niin vilkaise [[TAChart documentation]] ja tutkia joitakin niistä monista demoista, jotka tulevat TAChart:n mukana. Ne löytyvät kansiosta `components\tachart\demo` (ovat Lazaruksessa mukana).
118	120
119	121		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
120	122
121	123		## Lähdekoodi
122	124
123	125		Tämän opetusohjelman lähdekoodi löytyy kansiosta tutorials/getting_started nimellä getting_started.lpi.
124	126
125	127		### Projekti tiedosto
126	128
127	129		``` pascal
128	130		program project1;
129	131
130	132		{$mode objfpc}{$H+}
131	133
132	134		uses
133	135		{$IFDEF UNIX}{$IFDEF UseCThreads}
134	136		cthreads,
135	137		{$ENDIF}{$ENDIF}
136	138		Interfaces, // this includes the LCL widgetset
137	139		Forms, Unit1, tachartlazaruspkg
138	140		{ you can add units after this };
139	141
140	142		{$R *.res}
141	143
142	144		begin
143	145		RequireDerivedFormResource := True;
144	146		Application.Initialize;
145	147		Application.CreateForm(TForm1, Form1);
146	148		Application.Run;
147	149		end.
148	150		```
149	151
150	152		### Unit1.pas
151	153
152	154		``` pascal
153	155		unit Unit1;
154	156
155	157		{$mode objfpc}{$H+}
156	158
157	159		interface
158	160
159	161		uses
160	162		Classes, SysUtils, FileUtil, TAGraph, TASeries, Forms, Controls, Graphics,
161	163		Dialogs;
162	164
163	165		type
164	166
165	167		{ TForm1 }
166	168
167	169		TForm1 = class(TForm)
168	170		Chart1: TChart;
169	171		SinSeries: TLineSeries;
170	172		CosSeries: TLineSeries;
171	173		SinCosSeries: TLineSeries;
172	174		procedure FormCreate(Sender: TObject);
173	175		private
174	176		{ private declarations }
175	177		public
176	178		{ public declarations }
177	179		end;
178	180
179	181		var
180	182		Form1: TForm1;
181	183
182	184		implementation
183	185
184	186		{$R *.lfm}
185	187
186	188		{ TForm1 }
187	189
188	190		procedure TForm1.FormCreate(Sender: TObject);
189	191		const
190	192		N = 100;
191	193		MIN = -10;
192	194		MAX = 10;
193	195		var
194	196		i: Integer;
195	197		x: Double;
196	198		begin
197	199		for i:=0 to N - 1 do begin
198	200		x := MIN + (MAX - MIN) * i / (N - 1);
199	201		SinSeries.AddXY(x, sin(x));
200	202		CosSeries.AddXY(x, cos(x));
201	203		SinCosSeries.AddXY(x, sin(x)*cos(x));
202	204		end;
203	205
204	206		end;
205	207
206	208		end.
207	209		```
208	210
209	211		### Unit.lfm
210	212
211		-	~~``` pascal~~
	213	+	``` lfm
212	214		object Form1: TForm1
213	215		Left = 14
214	216		Height = 244
215	217		Top = 137
216	218		Width = 347
217	219		Caption = 'Form1'
218	220		ClientHeight = 244
219	221		ClientWidth = 347
220	222		OnCreate = FormCreate
221	223		LCLVersion = '1.1'
222	224		object Chart1: TChart
223	225		Left = 0
224	226		Height = 244
225	227		Top = 0
226	228		Width = 347
227	229		AxisList = <
228	230		item
229	231		Grid.Color = clSilver
230	232		Minors = <>
231	233		Title.LabelFont.Orientation = 900
232	234		Title.LabelFont.Style = [fsBold]
233	235		Title.Visible = True
234	236		Title.Caption = 'y axis'
235	237		end
236	238		item
237	239		Grid.Color = clSilver
238	240		Alignment = calBottom
239	241		Minors = <>
240	242		Title.LabelFont.Style = [fsBold]
241	243		Title.Visible = True
242	244		Title.Caption = 'x axis'
243	245		end>
244	246		BackColor = clWhite
245	247		Foot.Brush.Color = clBtnFace
246	248		Foot.Font.Color = clBlue
247	249		Legend.Alignment = laBottomCenter
248	250		Legend.ColumnCount = 3
249	251		Legend.Visible = True
250	252		Title.Brush.Color = clBtnFace
251	253		Title.Font.Color = clBlue
252	254		Title.Font.Style = [fsBold]
253	255		Title.Text.Strings = (
254	256		'My first chart'
255	257		)
256	258		Title.Visible = True
257	259		Align = alClient
258	260		ParentColor = False
259	261		object SinSeries: TLineSeries
260	262		Title = 'y=sin(x)'
261	263		LinePen.Color = clRed
262	264		end
263	265		object CosSeries: TLineSeries
264	266		Title = 'y=cos(x)'
265	267		LinePen.Color = clBlue
266	268		end
267	269		object SinCosSeries: TLineSeries
268	270		Title = 'y=sin(x)*cos(x)'
269	271		LinePen.Color = clGreen
270	272		end
271	273		end
272	274		end
273	275		```
274	276
275	277		---
276	278		From the Free Pascal wiki, page "TAChart Tutorial: Getting started/fi", 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