TAChart Tutorial: Getting started/fi: what changed

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

Title: TAChart Tutorial: Getting started/fi

New		Line
1	+	## Johdanto
2	+
3	+	![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
4	+
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	+
7	+	Tässä opetusohjelmassa tehdään joitakin matemaattisia toimintoja TAChart:lla. Luomme kaavion jossa on kolme viivakuvaajaa (LineSeries)
8	+
9	+	` y = cos (x),`\
10	+	` y = sin (x), ja`\
11	+	` y = cos (x) * sin (x). `
12	+
13	+	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	+
15	+	## Mitä tarvitaan?
16	+
17	+	Tämä opas on aika perusteellinen. Mutta pohjaksi tietenkin tarvitaan perustiedot Object Pascal kielestä ja Lazarus IDE:stä.
18	+
19	+	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	+
21	+	Parasta on, jos noudatat tätä opasta vaihe vaiheelta. Haluessasi voit käyttää tämän artikkelin lopussa olevaa valmista lähdekoodia.
22	+
23	+	## Uusi projekti
24	+
25	+	![](/wiki-images/9/95/TAChart_component_palette.png)
26	+
27	+	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	+
29	+	![](/wiki-images/6/63/TAChart_GettingStarted_Step1.png)
30	+
31	+	## Kuvaajan lisääminen
32	+
33	+	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	+
35	+	![](/wiki-images/6/6f/TAChart_GettingStarted_Step1a.png)
36	+
37	+	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	+
39	+	![](/wiki-images/c/ce/Tachart_getting_started_object_tree.png)
40	+
41	+	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	+
43	+	## Lisätään data
44	+
45	+	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	+
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	+	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	+
68	+	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	+
70	+	- `TListChartSource` joka tallentaa datat luetteloon (tämän typpistä nyt käytetään)
71	+	- `TDBChartSource` joka on rajapinta tietokannan tietueisiin ja kenttiin
72	+	- `TUserDefinedChartSource` joka antaa erittäin yleisen pääsyn dataan, esimerkiksi, tallennetaan taulukkoon käyttäjän määrittät tietueet
73	+	- `TCalculatedChartSource` jonka avulla voidaan analysoida kuvaajan ja näyttää tulokset toisessa.
74	+
75	+	Tämä on nyt tarpeeksi chart sources - sisäänrakennettu chart source riittää tähän projektiin.
76	+
77	+	![](/wiki-images/b/b8/Tachart_getting_started_step2.png)
78	+
79	+	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	+
81	+	## Kuvaajien alustaminen
82	+
83	+	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	+
85	+	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	+
87	+	## Lisätään selityspalkki (legend)
88	+
89	+	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	+
91	+	![](/wiki-images/2/2e/Tachart_getting_started_step3.png)
92	+
93	+	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	+
95	+	![](/wiki-images/5/5f/Tachart_getting_started_step4.png) ![](/wiki-images/2/20/Tachart_getting_started_step4a.png)
96	+
97	+	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	+
99	+	![](/wiki-images/3/37/Tachart_getting_started_step5.png)
100	+
101	+	Ah! - Kolmas merkintä on katkaistu, koska ikkuna ei ole tarpeeksi leveä. Muuta kaavion Align-ominaisuus `alClient`:ksi ja lisää ikkunan leveys hieman.
102	+
103	+	## Hienosäätö
104	+
105	+	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	+
107	+	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	+
109	+	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	+
111	+	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	+
113	+	## Valmis!
114	+
115	+	Lopulta kaavio näyttää tältä. Aika hieno? Eikä se ollut ollenkaan vaikeaa ...
116	+
117	+	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	+
119	+	![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
120	+
121	+	## Lähdekoodi
122	+
123	+	Tämän opetusohjelman lähdekoodi löytyy kansiosta tutorials/getting_started nimellä getting_started.lpi.
124	+
125	+	### Projekti tiedosto
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/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