TAChart Tutorial: Background design/fi: what changed

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

Old	New		Line
1	1		# Kaavion taustan suunnittelu
2	2
3	3		## Johdanto
4	4
5	5		![](/wiki-images/3/35/Tachart_background_finished.png)
6	6
7	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	8
9	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	10
11	11		## Esivalmistelu
12	12
13	13		### Data
14	14
15	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	16
17	17		\| Vuosi \| 2005 \| 2006 \| 2007 \| 2008 \| 2009 \| 2010 \| 2011 \| 2012 \| 2013 \|
18	18		\|-----------\|-------\|--------\|--------\|--------\|--------\|--------\|--------\|--------\|--------\|
19	19		\| Lataukset \| 53299 \| 119613 \| 158060 \| 218915 \| 190567 \| 230108 \| 267858 \| 298335 \| 280586 \|
20	20
21	21		Nämä tiedot ovat kaavion perustana.
22	22
23	23		### Kaavion tekeminen
24	24
25	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	26
27	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	28
29	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	30
31	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	32
33	33		![](/wiki-images/1/1b/Tachart_background_no_data.png) ![](/wiki-images/c/cb/Tachart_background_datapoints_editor.png)
34	34
35	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	36
37	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	38
39	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	40
41	41		![](/wiki-images/d/d5/Tachart_background_first_version.png)
42	42
43	43		## TChart piirrostapahtumat
44	44
45	45		Toistaiseksi projekti on ollut aivan perustasolla. Joten tutkitaanpas piirtofunktioita...
46	46
47	47		`TChart` tarjoaa useita tapahtumia, johon omaa koodia voidaan "koukuttaa":
48	48
49	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	50
51	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	52
53	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	54
55	55		Jos jätämme sen arvoon `true` niin kaavioon piirretään perustausta mutta voimme hallita sitä myös komponenttimuokkaimesta.
56	56
57	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	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	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	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	61
62	62		### Taustakuvan näyttäminen
63	63
64	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	65
66	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	67
68	68		``` pascal
69	69		type
70	70		TForm1 = class(TForm)
71	71		...
72	72		private
73	73		FBackImage: TPicture;
74	74		...
75	75
76	76		procedure TForm1.FormCreate(Sender: TObject);
77	77		begin
78	78		FBackImage := TPicture.Create;
79	79		FBackImage.LoadFromFile('splash_logo.png');
80	80		// or: FBackImage.LoadFromFile('c:\lazarus\images\splash_logo.png');
81	81		end;
82	82
83	83		procedure TForm1.FormDestroy(Sender: TObject);
84	84		begin
85	85		FBackImage.Free;
86	86		end;
87	87		```
88	88
89	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	90
91	91		``` pascal
92	92		...
93	93		implementation
94	94
95	95		{$R *.lfm}
96	96		{$R splash_logo.res}
97	97
98	98		procedure TForm1.FormCreate(Sender: TObject);
99	99		begin
100	100		FBackImage := TPicture.Create;
101	101		FBackImage.LoadFromResourceName(HInstance, 'splash_logo');
102	102		end;
103	103		```
104	104
105	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	106
107	107		``` pascal
108	108		procedure TForm1.Chart1BeforeDrawBackWall(ASender: TChart; ACanvas: TCanvas;
109	109		const ARect: TRect; var ADoDefaultDrawing: Boolean);
110	110		begin
111	111		ACanvas.StretchDraw(ARect, FBackImage.Graphic);
112	112		ADoDefaultDrawing := false;
113	113		end;
114	114		```
115	115
116	116		Koska tapahtumakäsittely on ajonaikaista koodia täytyy ohjelma kääntää jotta nähdään millainen kaavio on tällä hetkellä:
117	117
118	118		![](/wiki-images/0/03/Tachart_background_backwall.png)
119	119
120	120		### Taustan liukuvärjäys
121	121
122	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	123
124	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	125
126	126		``` pascal
127	127		procedure TForm1.Chart1BeforeDrawBackground(ASender: TChart; ACanvas: TCanvas;
128	128		const ARect: TRect; var ADoDefaultDrawing: Boolean);
129	129		begin
130	130		ACanvas.GradientFill(ARect, clSkyBlue, clWhite, gdVertical);
131	131		ADoDefaultDrawing := false;
132	132		end;
133	133		```
134	134
135	135		![](/wiki-images/2/29/Tachart_background_backwall_gradient.png)
136	136
137	137		### Viimeistely
138	138
139	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	140
141	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	142
143	143		Ja nämä lisäykset tekee kaavion, joka näkyy tämän sivun yläreunassa.
144	144
145	145		## Yhteenveto
146	146
147	147		Tässä on perusvaiheet käyttäjän tekemällä kaavion taustalle:
148	148
149	149		- Käytä `OnBeforeDrawBackWall` tapahtumaa kun haluataan piirtää oma tausta akselien rajaamaan suorakulmioon.
150	150		- Vastaasti käytä `OnBeforeDrawBackground` tapahtumaa kun halutaan piirtää kaavion tausta.
151	151		- Aseta näissä piirtometodeissa `ADoDefaultDrawing` arvoon `false` jotta tapahtuu vain oma piirtäminen.
152	152
153	153		## Lähdekoodi
154	154
155	155		Tämän opetusohjelman lähdekoodi löytyy TAChart:n kansiosta tutorials/background.
156	156
157	157		### Project file
158	158
159	159		``` pascal
160	160		program backimage;
161	161
162	162		{$mode objfpc}{$H+}
163	163
164	164		uses
165	165		{$IFDEF UNIX}{$IFDEF UseCThreads}
166	166		cthreads,
167	167		{$ENDIF}{$ENDIF}
168	168		Interfaces, // this includes the LCL widgetset
169	169		Forms, main, tachartlazaruspkg
170	170		{ you can add units after this };
171	171
172	172		{$R *.res}
173	173
174	174		begin
175	175		RequireDerivedFormResource := True;
176	176		Application.Initialize;
177	177		Application.CreateForm(TForm1, Form1);
178	178		Application.Run;
179	179		end.
180	180		```
181	181
182	182		### Unit `main.pas`
183	183
184	184		``` pascal
185	185		unit main;
186	186		{$mode objfpc}{$H+}
187	187
188	188		interface
189	189
190	190		uses
191	191		Classes, SysUtils, FileUtil, TAGraph, TASeries, TASources, Forms, Controls,
192	192		Graphics, Dialogs;
193	193
194	194		type
195	195
196	196		{ TForm1 }
197	197
198	198		TForm1 = class(TForm)
199	199		Chart1: TChart;
200	200		Chart1BarSeries1: TBarSeries;
201	201		ListChartSource1: TListChartSource;
202	202		procedure Chart1BeforeDrawBackground(ASender: TChart; ACanvas: TCanvas;
203	203		const ARect: TRect; var ADoDefaultDrawing: Boolean);
204	204		procedure Chart1BeforeDrawBackWall(ASender: TChart; ACanvas: TCanvas;
205	205		const ARect: TRect; var ADoDefaultDrawing: Boolean);
206	206		procedure FormCreate(Sender: TObject);
207	207		procedure FormDestroy(Sender: TObject);
208	208		private
209	209		{ private declarations }
210	210		FBackImage: TPicture;
211	211		public
212	212		{ public declarations }
213	213		end;
214	214
215	215		var
216	216		Form1: TForm1;
217	217
218	218		implementation
219	219
220	220		{$R *.lfm}
221	221
222	222		//{$R splash_logo.res}
223	223
224	224		{ TForm1 }
225	225
226	226		procedure TForm1.FormCreate(Sender: TObject);
227	227		begin
228	228		FBackImage := TPicture.Create;
229	229
230	230		FBackImage.LoadFromFile('splash_logo.png');
231	231		// this assumes that the logo is in the same folder as the binary
232	232
233	233		// or, using resources:
234	234		//FBackImage.LoadFromResourceName(HInstance, 'splash_logo');
235	235		// Don't forget ths {$R directive above...
236	236		end;
237	237
238	238		procedure TForm1.Chart1BeforeDrawBackWall(ASender: TChart; ACanvas: TCanvas;
239	239		const ARect: TRect; var ADoDefaultDrawing: Boolean);
240	240		begin
241	241		ACanvas.StretchDraw(ARect, FBackImage.Graphic);
242	242		ADoDefaultDrawing := false;
243	243		end;
244	244
245	245		procedure TForm1.Chart1BeforeDrawBackground(ASender: TChart; ACanvas: TCanvas;
246	246		const ARect: TRect; var ADoDefaultDrawing: Boolean);
247	247		begin
248	248		ACanvas.GradientFill(ARect, clSkyBlue, clWhite, gdVertical);
249	249		ADoDefaultDrawing := false;
250	250		end;
251	251
252	252		procedure TForm1.FormDestroy(Sender: TObject);
253	253		begin
254	254		FBackImage.Free;
255	255		end;
256	256
257	257		end.
258	258		```
259	259
260	260		### Form file `main.lfm`
261	261
262		-	~~``` pascal~~
	262	+	``` lfm
263	263		object Form1: TForm1
264	264		Left = 340
265	265		Height = 300
266	266		Top = 154
267	267		Width = 400
268	268		Caption = 'Form1'
269	269		ClientHeight = 300
270	270		ClientWidth = 400
271	271		OnCreate = FormCreate
272	272		OnDestroy = FormDestroy
273	273		LCLVersion = '1.3'
274	274		object Chart1: TChart
275	275		Left = 0
276	276		Height = 300
277	277		Top = 0
278	278		Width = 400
279	279		AxisList = <
280	280		item
281	281		Grid.Color = clSkyBlue
282	282		Grid.Visible = False
283	283		Marks.Format = '%.0n'
284	284		Marks.Style = smsCustom
285	285		Minors = <>
286	286		Title.LabelFont.Height = -16
287	287		Title.LabelFont.Orientation = 900
288	288		Title.LabelFont.Style = [fsBold]
289	289		Title.Visible = True
290	290		Title.Caption = 'Downloads per year'
291	291		end
292	292		item
293	293		Grid.Visible = False
294	294		Alignment = calBottom
295	295		Minors = <>
296	296		Title.LabelFont.Height = -16
297	297		Title.LabelFont.Style = [fsBold]
298	298		Title.Visible = True
299	299		Title.Caption = 'Year'
300	300		end>
301	301		Foot.Brush.Color = clBtnFace
302	302		Foot.Font.Color = clBlue
303	303		Title.Brush.Color = clBtnFace
304	304		Title.Brush.Style = bsClear
305	305		Title.Font.Color = clNavy
306	306		Title.Font.Height = -17
307	307		Title.Font.Style = [fsBold]
308	308		Title.Text.Strings = (
309	309		'Lazarus Downloads'
310	310		)
311	311		Title.Visible = True
312	312		OnBeforeDrawBackground = Chart1BeforeDrawBackground
313	313		OnBeforeDrawBackWall = Chart1BeforeDrawBackWall
314	314		Align = alClient
315	315		ParentColor = False
316	316		object Chart1BarSeries1: TBarSeries
317	317		Shadow.Color = clNavy
318	318		Shadow.OffsetX = 4
319	319		BarBrush.Color = clSkyBlue
320	320		Source = ListChartSource1
321	321		end
322	322		end
323	323		object ListChartSource1: TListChartSource
324	324		DataPoints.Strings = (
325	325		'2005\|53299\|?\|'
326	326		'2006\|119613\|?\|'
327	327		'2007\|158060\|?\|'
328	328		'2008\|218915\|?\|'
329	329		'2009\|190567\|?\|'
330	330		'2010\|230108\|?\|'
331	331		'2011\|267858\|?\|'
332	332		'2012\|298335\|?\|'
333	333		'2013\|280586\|?\|'
334	334		)
335	335		left = 120
336	336		top = 56
337	337		end
338	338		end
339	339		```
340	340
341	341		---
342	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