TAChart Tutorial: Background design/fi: what changed

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

Title: TAChart Tutorial: Background design/fi

New		Line
1	+	# Kaavion taustan suunnittelu
2	+
3	+	## Johdanto
4	+
5	+	![](/wiki-images/3/35/Tachart_background_finished.png)
6	+
7	+	TChart-komponentin vakiokaavioissa on harmaa tausta. Muuttamalla `Color` ominaisuutta on mahdollista muuttaa koko kaavion taustaväriä ja ominaisuutta `BackColor` väriä vaihtamalla kaavion akselien rajaama alueen taustaväri muuttuu. Joka tapauksessa tälläin tehty suunnittelu on aika perinteinen. Onko mahdollista tehdä kaavion taustalle muunlainen suunnittelu?
8	+
9	+	Tässä opetusohjelmassa esitetään että on suhteellisen helppoa tehdä muunkinlaisia taustoja hyödyntämällä yhtä tai kahta TChart:n tapahtumaa. Aluksi luodaan kaavio joka kartoittaa Lazaruksen latausten määrän muutoksia vuodessa joinakin vuosina. Kaaviota korostetaan näyttämällä Lazaruksen aloitusruutua taustakuvana
10	+
11	+	## Esivalmistelu
12	+
13	+	### Data
14	+
15	+	Sourceforge tarjoaa luettelon Lazaruksen latausmääristä kuukaudessa. Paikasta <http://sourceforge.net/projects/lazarus/files/Lazarus%20Windows%2032%20bits/stats/timeline?dates=2003-01-01+to+2014-09-02> saadaan windows-32 asennustiedoston latausmääristä
16	+
17	+	\| Vuosi \| 2005 \| 2006 \| 2007 \| 2008 \| 2009 \| 2010 \| 2011 \| 2012 \| 2013 \|
18	+	\|-----------\|-------\|--------\|--------\|--------\|--------\|--------\|--------\|--------\|--------\|
19	+	\| Lataukset \| 53299 \| 119613 \| 158060 \| 218915 \| 190567 \| 230108 \| 267858 \| 298335 \| 280586 \|
20	+
21	+	Nämä tiedot ovat kaavion perustana.
22	+
23	+	### Kaavion tekeminen
24	+
25	+	Luo uusi projekti ja lisää `TChart` lomakkeelle. Aseta Client-align siten, että kaavion täyttää koko lomakkeen. Vedä lomakkeen rajoja siten, että ikkuna on noin 400 pikseliä leveä ja 300 pikseliä korkea.
26	+
27	+	Kaavio näytetään niin että vuodet (Years) ovat `x`-akselilla ja latauksien määrä (Download count) `y`-akselilla. Siksi mene bottom akselille, löydä ominaisuus `Title` ja kirjoita "Years" (tai "vuodet") kohtaan `Caption`. Jotta tämä Title näytetään, aseta sen kohta `Visible` arvoon `true`.
28	+
29	+	Sopeututa muut ominaisuudet mieleiseksesi: usein otsikko näyttää pärempana lihavoituna ja suurempana (12). Joskus ristikko on ärsyttävää, sen voi poistaa käytöstä asettamalla `Grid` :n `Visible` omaisuus arvoon `false`. Tee samantapaisia muutoksia pystyakselille. Otsikko voisi olla nimeltään "Downloads per year" tai "latauksia vuodessa".
30	+
31	+	Kaavion yläpuolella pitäisi myös laittaa otsikko. Kirjoita teksti "Lazarus lataukset" tai "Lazarus downloads" kaavion `Title` ominaisuuteen `Text`. Jälleen asettamaan kohta `Visible` arvoon `true` jotta otsikko näytetään. Voit myös halutessasi vaihtaa otsikon fontin lihavoiduksi ja kasvattaa sen kokoa hieman.
32	+
33	+	![](/wiki-images/1/1b/Tachart_background_no_data.png) ![](/wiki-images/c/cb/Tachart_background_datapoints_editor.png)
34	+
35	+	Hyvä kuvaaja tyyppi aikasarjoille on bar series (palkkikuvaaja). Aluksi lisäämme `TBarSeries` kaavioon: Kaksoisklikkaa kaaviota. Se avaa "Muokkaa kuvaajia" (series editor) ikkunan. klikkaa "Lisää" ja valitse "Pylväskuvaaja" (Bar series) avautuvasta luettelosta. Emme näe kuvaajaa koska sillä ei vielä ole tietoja.
36	+
37	+	On olemassa useita erilaisia tapoja määrittää kuvaajan data. Koska meillä on vakiodata jotka eivät muutu ohjelman aikana niin on sopivaa käyttää `TListSource`-komponenttia joka tarjoaa editorin tietojen tallentamiseen suunnitteluaikana. ListChartSource löytyy "Chart"-komponenttipaletin toisesta kuvakkeesta. Syöttääksesi tietoja, klikkaamalla kolmea pistettä komponentin `DataPoints` omaisuuden vieressä - tämä avaa "Datapisteiden muokkaimen" (DataPoints editor). Syötä tiedot edellä olevasta taulukosta muokkausikkunan taulukkoon: Siinä "vuosi" menee "X"-sarakkeeseen ja "lataukset" menee "Y"-sarakkeeseen. Mitään ei tarvitse syöttää "Väri" (Color) ja "Teksti" (Text) sarakkeisiin.
38	+
39	+	Lopuksi kytke ListChartSource pylväspalkkikuvaajaan. Jokaisella kuvaajalla on ominaisuus`Source`. Klikkaa avattavaa nuolta ja valitse ListChartSource listasta. Välittömästi Pylväsdiagrammin näkyy.
40	+
41	+	![](/wiki-images/d/d5/Tachart_background_first_version.png)
42	+
43	+	## TChart piirrostapahtumat
44	+
45	+	Toistaiseksi projekti on ollut aivan perustasolla. Joten tutkitaanpas piirtofunktioita...
46	+
47	+	`TChart` tarjoaa useita tapahtumia, johon omaa koodia voidaan "koukuttaa":
48	+
49	+	- Aluksi on piirtoprosessi `OnChartPaint`. Tämä tapahtuma on haasteellinen ja siihen pääsee kiinni vain koodista ei komponenttimuokkaimesta. Se "koukku" on tarjolla ennenkuin mitään piirretään kaaviossa ja tarjoaa `var` parametrin `ADoDefaultDrawing`
50	+
51	+	Asettamalla se arvoon `false` niin se sulkee koko sisäänrakennetun piirustusprosessin ja mahdollistaa maalata kaavion täysin oman maun mukaan. Erittäin jännittävä ominaisuus, mutta liian raju meidän tarkoitukseen ...
52	+
53	+	- Seuraava tapahtuma tapahtuu ennenkuin koko kaavion tausta on piirretty: `OnBeforeDrawBackground` . Siinäkin on `ADoDefaultDrawing` parametri. Jos asetamme sen arvoon `false` voimme korvata kaavion taustan piirtämisen omalla tavalla. Erittäin hyvä tähän tarkoitukseen.
54	+
55	+	Jos jätämme sen arvoon `true` niin kaavioon piirretään perustausta mutta voimme hallita sitä myös komponenttimuokkaimesta.
56	+
57	+	- Kun tausta on piirretty - joko oletuksen mukainen tai muokattu - on toinen tapahtuma `OnAfterDrawBackground`. Sitä voidaan käyttää piirtämään jotain taustassa, joka jää kuvaajan tai akselien alle, jotka piirretään myöhemmin.
58	+	- Vielä aivan alkuvaiheessa, meillä on `OnBeforeDrawBackwall` tapahtuma. Se tapahtuu ennen kuin rajaavat akselin suorakulmion ( "takaseinä") täytetään sen taustan väri / kuvio. Hyödyntämällä `ADoDefaultDrawing` parametrin taas voimme korvata takaseinään omilla menettelyä. Tämä on se mitä esimerkissä käytetään!
59	+	- Sitten piirretään kaavion otsikot, akselit, ruudukko, kuvaajat ja legenda (otsikkopalkki). Valitettavasti ei ole olemassa tapahtumia siepata niiden piirtämistä (paitsi legenda joka tarjoaa `OnDrawLegend` tapahtuma). Mutta meillä on joitakin valvonta piirustus prosessin kuluessa ryhmän kaavioelementtejä avulla niiden `ZPosition` ominaisuudella. Jos esimerkiksi kaaviossa, jossa on pylväskuvaaja ja viivakuvaaja ja halua rivi sarja on osittain katettu baareissa joudut antamaan viivakuvaajalle suuremman `ZPosition` arvon kuin pylväskuvaajalla - Ne joilla on suurempi `ZPosition`-arvo piirretään myöhemmin eli pienemmän `ZPosition`-arvon päälle .
60	+	- Piirtämisen aivan lopussa on tapahtuma, `OnAfterDraw` . Se on yleensä tarkoitettu "hallinnollisiin" tarkoituksiin, esimerkiksi mittaamaan piirtämisen aikaa. Aloitusaika saadaan lukemalla kello `OnChartPaint` tapahtumassa.
61	+
62	+	### Taustakuvan näyttäminen
63	+
64	+	Lazarus logo on tähän tarkoitukseen (Lazaruksen latauksien määrä) sopiva taustakuva. Tässä tämä halutaan akselien rajaamalle alueelle (back wall). Kuten yllä olevasta kaavion tapahtumaluettelosta nähdään niin `OnBeforeDrawBackwall`-tapahtuma sopii tähän hyvin.
65	+
66	+	Ensin meidän täytyy saada logo saataville ohjelmaan. Logotiedoston on nimi "splash_logo.png" ja löytyy Lazarus asennuksen kansiosta "images". Yksinkertaisuuden vuoksi se kopioidaan kansioon johon syntyy ajettava ohjelma ns exe-tiedosto (tai sitten voidaan käyttää koko tiedostopolkua koodissa). Koska logo on png tiedosto tarvitsemme tyyppiä TPortableNetworkGraphic tai - mikä on joustavampi - TPicture. Määritellään muuttuja `FBackImage` jälkimmäisen tyypin muotoon ja lisätään koodin lomakkeen onCreate tapahtumaan kuvatiedoston lataus. Tietenkään älä unohda vapauttaa kuvaa, kun ohjelma sulkeutuu:
67	+
68	+	``` pascal
69	+	type
70	+	TForm1 = class(TForm)
71	+	...
72	+	private
73	+	FBackImage: TPicture;
74	+	...
75	+
76	+	procedure TForm1.FormCreate(Sender: TObject);
77	+	begin
78	+	FBackImage := TPicture.Create;
79	+	FBackImage.LoadFromFile('splash_logo.png');
80	+	// or: FBackImage.LoadFromFile('c:\lazarus\images\splash_logo.png');
81	+	end;
82	+
83	+	procedure TForm1.FormDestroy(Sender: TObject);
84	+	begin
85	+	FBackImage.Free;
86	+	end;
87	+	```
88	+
89	+	Kun kuvaa ladaan suoraan tiedostosta edellytetään, että kuva jaetaan yhdessä exe-tiedoston kanssa. Tämä voidaan välttää, jos kuva lisätään resurssina binaaritiedostoon. Tätä varten sinun täytyy luoda resurssi tiedoston, joka sisältää kuvan - katso wiki artikkeli .... miten se tehdään. Lazarus images kansio sisältää valmiin resurssitiedoston logosta: "splash_logo.res". Jos haluat käyttää tätä lähestymistapaa, kopioida tiedoston projektikansioon ja käyttää tätä vaihtoehtoa `OnCreate` koodi (älä unohda lisätä `{$R splash_logo.res}` unitin alussa olevaan `implemenation` osaan):
90	+
91	+	``` pascal
92	+	...
93	+	implementation
94	+
95	+	{$R *.lfm}
96	+	{$R splash_logo.res}
97	+
98	+	procedure TForm1.FormCreate(Sender: TObject);
99	+	begin
100	+	FBackImage := TPicture.Create;
101	+	FBackImage.LoadFromResourceName(HInstance, 'splash_logo');
102	+	end;
103	+	```
104	+
105	+	Menetelmästä riippumatta mitä päätettiin käyttää - nyt on aika lisätä koodiin kaavion `OnBeforeDrawBackwall` tapahtuma. Se on hyvin yksinkertainen: käytetään hyödyksi Canvas:n StretchDraw metodia ja - tietenkin - asetamme `ADeDefaultDrawing` arvoon `false` jolloin ohitetaan oletus piirtomenetelmä. On tärkeää, että käytetään parametrinä annetun ACanvas:a ja sen StretchDrawmetodia, ei kaavion kankaalle, koska kaavion piirron suorittaa erityinen backend luokka, jotka voivat tarjota erilaisia Canvas-luokkia, esimerkiksi jos kaavio on tulostettava.
106	+
107	+	``` pascal
108	+	procedure TForm1.Chart1BeforeDrawBackWall(ASender: TChart; ACanvas: TCanvas;
109	+	const ARect: TRect; var ADoDefaultDrawing: Boolean);
110	+	begin
111	+	ACanvas.StretchDraw(ARect, FBackImage.Graphic);
112	+	ADoDefaultDrawing := false;
113	+	end;
114	+	```
115	+
116	+	Koska tapahtumakäsittely on ajonaikaista koodia täytyy ohjelma kääntää jotta nähdään millainen kaavio on tällä hetkellä:
117	+
118	+	![](/wiki-images/0/03/Tachart_background_backwall.png)
119	+
120	+	### Taustan liukuvärjäys
121	+
122	+	Ulkoisella taustaalueella on vielä nähdään "kuuluisa" harmaa tausta. Miten se korvataan liukuvärjäyksellä? Koska Lazaruksen logo on pääosiltaan sininen voidaan liukuväritys aloittaa taivaan sinisellä (`clSkyBlue`) ja päättää se valkoisella (`clWhite`)
123	+
124	+	Piirtotapahtumien yhteenvedosta tiedetään että `OnBeforeDrawBackground` on oikea tapahtuma, joka voidaan käyttää piirtämään kaavion taustan yksin. Mutta miten piirtää liukuvärjäys? Erittäin helppo: Canvas:lla on metodi `GradientFill` jolle annetaan alkava ja päättyvä värit sekä liukuvärjäyksen suunta.
125	+
126	+	``` pascal
127	+	procedure TForm1.Chart1BeforeDrawBackground(ASender: TChart; ACanvas: TCanvas;
128	+	const ARect: TRect; var ADoDefaultDrawing: Boolean);
129	+	begin
130	+	ACanvas.GradientFill(ARect, clSkyBlue, clWhite, gdVertical);
131	+	ADoDefaultDrawing := false;
132	+	end;
133	+	```
134	+
135	+	![](/wiki-images/2/29/Tachart_background_backwall_gradient.png)
136	+
137	+	### Viimeistely
138	+
139	+	Pylväskuvaajan punaiset palkit näyttävät vähän "aggressiivisilta". Entä hillitympi taivaansininen? Valitse komponenttimuokkaimessa kyseinen BarSeries ja aseta `SeriesColor`:n arvoksi `clSkyBlue`.
140	+
141	+	Ja olisi parempi nähdä enemmän Lazaruksen gepardia joka on suurelta osalta pylväiden takana. Pylväskuvaajilla on ominaisuus `Transparency`. Sen oletusarvo on nolla (0) joka tarkoittaa läpinäkymätön ja suurin sallittu arvo on 255 mikä tarkoittaa täysin läpinäkyvää. Pieni arvo, kuten 64 , lisää jonkin verran läpinäkyvyyttä ja näyttää enemmän gepardin yksityiskohtia, mutta ei työnnä pylväitä liikaa taustalle.
142	+
143	+	Ja nämä lisäykset tekee kaavion, joka näkyy tämän sivun yläreunassa.
144	+
145	+	## Yhteenveto
146	+
147	+	Tässä on perusvaiheet käyttäjän tekemällä kaavion taustalle:
148	+
149	+	- Käytä `OnBeforeDrawBackWall` tapahtumaa kun haluataan piirtää oma tausta akselien rajaamaan suorakulmioon.
150	+	- Vastaasti käytä `OnBeforeDrawBackground` tapahtumaa kun halutaan piirtää kaavion tausta.
151	+	- Aseta näissä piirtometodeissa `ADoDefaultDrawing` arvoon `false` jotta tapahtuu vain oma piirtäminen.
152	+
153	+	## Lähdekoodi
154	+
155	+	Tämän opetusohjelman lähdekoodi löytyy TAChart:n kansiosta tutorials/background.
156	+
157	+	### Project file
158	+
159	+	``` pascal
160	+	program backimage;
161	+
162	+	{$mode objfpc}{$H+}
163	+
164	+	uses
165	+	{$IFDEF UNIX}{$IFDEF UseCThreads}
166	+	cthreads,
167	+	{$ENDIF}{$ENDIF}
168	+	Interfaces, // this includes the LCL widgetset
169	+	Forms, main, tachartlazaruspkg
170	+	{ you can add units after this };
171	+
172	+	{$R *.res}
173	+
174	+	begin
175	+	RequireDerivedFormResource := True;
176	+	Application.Initialize;
177	+	Application.CreateForm(TForm1, Form1);
178	+	Application.Run;
179	+	end.
180	+	```
181	+
182	+	### Unit `main.pas`
183	+
184	+	``` pascal
185	+	unit main;
186	+	{$mode objfpc}{$H+}
187	+
188	+	interface
189	+
190	+	uses
191	+	Classes, SysUtils, FileUtil, TAGraph, TASeries, TASources, Forms, Controls,
192	+	Graphics, Dialogs;
193	+
194	+	type
195	+
196	+	{ TForm1 }
197	+
198	+	TForm1 = class(TForm)
199	+	Chart1: TChart;
200	+	Chart1BarSeries1: TBarSeries;
201	+	ListChartSource1: TListChartSource;
202	+	procedure Chart1BeforeDrawBackground(ASender: TChart; ACanvas: TCanvas;
203	+	const ARect: TRect; var ADoDefaultDrawing: Boolean);
204	+	procedure Chart1BeforeDrawBackWall(ASender: TChart; ACanvas: TCanvas;
205	+	const ARect: TRect; var ADoDefaultDrawing: Boolean);
206	+	procedure FormCreate(Sender: TObject);
207	+	procedure FormDestroy(Sender: TObject);
208	+	private
209	+	{ private declarations }
210	+	FBackImage: TPicture;
211	+	public
212	+	{ public declarations }
213	+	end;
214	+
215	+	var
216	+	Form1: TForm1;
217	+
218	+	implementation
219	+
220	+	{$R *.lfm}
221	+
222	+	//{$R splash_logo.res}
223	+
224	+	{ TForm1 }
225	+
226	+	procedure TForm1.FormCreate(Sender: TObject);
227	+	begin
228	+	FBackImage := TPicture.Create;
229	+
230	+	FBackImage.LoadFromFile('splash_logo.png');
231	+	// this assumes that the logo is in the same folder as the binary
232	+
233	+	// or, using resources:
234	+	//FBackImage.LoadFromResourceName(HInstance, 'splash_logo');
235	+	// Don't forget ths {$R directive above...
236	+	end;
237	+
238	+	procedure TForm1.Chart1BeforeDrawBackWall(ASender: TChart; ACanvas: TCanvas;
239	+	const ARect: TRect; var ADoDefaultDrawing: Boolean);
240	+	begin
241	+	ACanvas.StretchDraw(ARect, FBackImage.Graphic);
242	+	ADoDefaultDrawing := false;
243	+	end;
244	+
245	+	procedure TForm1.Chart1BeforeDrawBackground(ASender: TChart; ACanvas: TCanvas;
246	+	const ARect: TRect; var ADoDefaultDrawing: Boolean);
247	+	begin
248	+	ACanvas.GradientFill(ARect, clSkyBlue, clWhite, gdVertical);
249	+	ADoDefaultDrawing := false;
250	+	end;
251	+
252	+	procedure TForm1.FormDestroy(Sender: TObject);
253	+	begin
254	+	FBackImage.Free;
255	+	end;
256	+
257	+	end.
258	+	```
259	+
260	+	### Form file `main.lfm`
261	+
262	+	``` pascal
263	+	object Form1: TForm1
264	+	Left = 340
265	+	Height = 300
266	+	Top = 154
267	+	Width = 400
268	+	Caption = 'Form1'
269	+	ClientHeight = 300
270	+	ClientWidth = 400
271	+	OnCreate = FormCreate
272	+	OnDestroy = FormDestroy
273	+	LCLVersion = '1.3'
274	+	object Chart1: TChart
275	+	Left = 0
276	+	Height = 300
277	+	Top = 0
278	+	Width = 400
279	+	AxisList = <
280	+	item
281	+	Grid.Color = clSkyBlue
282	+	Grid.Visible = False
283	+	Marks.Format = '%.0n'
284	+	Marks.Style = smsCustom
285	+	Minors = <>
286	+	Title.LabelFont.Height = -16
287	+	Title.LabelFont.Orientation = 900
288	+	Title.LabelFont.Style = [fsBold]
289	+	Title.Visible = True
290	+	Title.Caption = 'Downloads per year'
291	+	end
292	+	item
293	+	Grid.Visible = False
294	+	Alignment = calBottom
295	+	Minors = <>
296	+	Title.LabelFont.Height = -16
297	+	Title.LabelFont.Style = [fsBold]
298	+	Title.Visible = True
299	+	Title.Caption = 'Year'
300	+	end>
301	+	Foot.Brush.Color = clBtnFace
302	+	Foot.Font.Color = clBlue
303	+	Title.Brush.Color = clBtnFace
304	+	Title.Brush.Style = bsClear
305	+	Title.Font.Color = clNavy
306	+	Title.Font.Height = -17
307	+	Title.Font.Style = [fsBold]
308	+	Title.Text.Strings = (
309	+	'Lazarus Downloads'
310	+	)
311	+	Title.Visible = True
312	+	OnBeforeDrawBackground = Chart1BeforeDrawBackground
313	+	OnBeforeDrawBackWall = Chart1BeforeDrawBackWall
314	+	Align = alClient
315	+	ParentColor = False
316	+	object Chart1BarSeries1: TBarSeries
317	+	Shadow.Color = clNavy
318	+	Shadow.OffsetX = 4
319	+	BarBrush.Color = clSkyBlue
320	+	Source = ListChartSource1
321	+	end
322	+	end
323	+	object ListChartSource1: TListChartSource
324	+	DataPoints.Strings = (
325	+	'2005\|53299\|?\|'
326	+	'2006\|119613\|?\|'
327	+	'2007\|158060\|?\|'
328	+	'2008\|218915\|?\|'
329	+	'2009\|190567\|?\|'
330	+	'2010\|230108\|?\|'
331	+	'2011\|267858\|?\|'
332	+	'2012\|298335\|?\|'
333	+	'2013\|280586\|?\|'
334	+	)
335	+	left = 120
336	+	top = 56
337	+	end
338	+	end
339	+	```
340	+
341	+	---
342	+	From the Free Pascal wiki, page "TAChart Tutorial: Background design/fi", as it stood on 2020-02-28 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