Sign in Join
Wiki copytemporary

TAChart Tutorial: BarSeries/fi: what changed

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

Title: TAChart Tutorial: BarSeries/fi

OldNewLine
1+## Johdanto
2+
3+![](/wiki-images/b/b1/BarSeries_finished.png%E2%80%8E)
4+
5+Lazaruksessas `TAChart` kirjastolla voidaan luoda erilaisia ​​kaavioita. Mutta verrattuna muihin kuvaajiin, pylväskuvaaja näyttää olevan vähän vaikeampi, koska siinä on olemassa monia mahdollisuuksia:
6+
7+- vierekkäiset pylväät
8+- pinotut pylvät
9+- pinotut pylvät jotka ovat normalisoitu 100%
10+- pystypylväät
11+- vaakapylväät
12+
13+Tässä opastuksessa näytetään perusidea miten luoda kaavioon useita pylväskuvaajia jotka järjestetty vierekkäisillä pylväillä. [[TAChart Tutorial: Stacked BarSeries|follow-up tutorial]] opastaa miten pylväät pinotaan päällekäin.
14+
15+Lisäksi esittellään myös [[TAChart documentation|TRandomChartSource]] joka on työkalu jolla saadaan kaavioon satunnaisdataa.
16+
17+Tarvitset Pascal:n ja Lazaruksen perustiedot. Tutustu ensin [[TAChart Tutorial: Getting started/fi|TAChart aloitusoppaaseen]] siinä saat joitakin perusvalmiuksia työskennellä TAChart-kirjaston parissa jos tämä on sinulle uusi. Suosittelemme myös tutkia [[TAChart documentation]].
18+
19+## Valmistelu
20+
21+### Kaavion alustaminen
22+
23+Luo uusi projekti, tallenna se. Lisää `TChart` komponentti Lazaruksen komponenttipaletilta lomakkelle `Form1`, sovita se sopivan kokoiseksi lomakkeelle.
24+
25+### Data kaavioon
26+
27+Ennen kuin jatketaan mietitäänpä mistä saadaan tiedot kaavioon. Ehkäpä taloushallinnon dataa. Suuryritysten liiketoiminnan tuloksia löytyy jossain internetissä tai jotain aivan muuta.
28+
29+Mennään tällä kertaa eri tavalla: miksi emme käytä vain satunnaista tietoa? Tietenkin, ne eivät merkitse mitään, mutta ne ovat yksinkertaisia ​​ja erittäin kätevä käyttää. Erityisesti kun `TAChart` sisältää [[TAChart documentation|TRandomChartSource]] komponentin, joka tarjoaa satunnaista tietoa ja se voidaan kytkeä saumattomasti suunnitteluaokana. Tämä tarkoittaa, että voit seurata tämän opetusohjelman tarvitsematta kirjoittaa riviä koodia ja ilman tarvetta koota demo sovellus. Myöhemmin, kun ulkoasu työ on tehty, voit poistaa RandomChartSource-komponentin ja korvata se toisella ChartSource-komponentilla joka sisältää datan.
30+
31+Kuten pian huomataan, niin kaaviossa on kolme kuvaajaa, joista kullakin on neljä pylvästä. Jokainen kuvaaja tarvitsee oman `RandomChartSource`:n . Lisättävät RandomChartSource-komponentit löytyy "Chart" komponenttipaletilta. Se on kolmas kuvake paletilla, korostettu punaisella allaolevassa kuvakaappauksessa:
32+
33+![](/wiki-images/4/4b/ComponentPalette_RandomChartSource.png)
34+
35+Lisää kolme RandomChartSource-komponenttia lomakkeelle - yksi per kuvaaja. Nimeä ne `RedChartSource`, `BlueChartSource`, ja `YellowChartSource` koska ne liittyvät "punaiseen", "siniseen" ja "keltaiseen" pylväskuvaajaan.
36+
37+Lisäksi täytyy alustaa RandomChartSource-komponentit koska ne eivät tarjoa mitään tietoja oletuksena. Halutaan neljä pylvästä per kuvaaja. Siksi asetetaan ominaisuus `PointsNumber` arvoon neljä (4). Saadaksesi akselin otsikot synkronoitua baareja `x` -akseli on vaihtelevat 1 ja 4 (tai välillä 0 ja 3, tai välillä 0 ja 39, mitä haluat - palataan akselin otsikoihin myöhemmin yksityiskohtaisemmin): `XMin = 1, XMax = 4`. Ja lopuksi meidän on myös täsmennettävä `y` -akselin aluetta, valitse `YMin = 0` ja `YMax = 100`.
38+
39+## Pylväskuvaaja
40+
41+### Lisää kuvaaja
42+
43+Nyt kun esivalmistelut on tehty voimme lisätä pylväskuvaajat kaavioon. Kaksoisklikkaa kaaviota avatakseksi "Muokkaa kuvaajia" ikkunan. Klikkaa "Lisää" ja valitse "Pylväskuvaaja" listasta. Toista kahdesti. Lopulta meillä on kolme pylväskuvaajaa kaaviossa. Niitä ei vielä näe kaaviossa koska niitä ei ole vielä liitetty tietoon. Oliopuussa komponenttimuokkaimessa kuvaajat kuitenkin näkyvät Chart solmun lapsina .
44+
45+Napsauta komponenttimuokkaimessa oliopuussa ensimmäistä kuvaajaa - mene omaisuuteen `Source` ja poimi `RedChartSource` luettelosta. Nyt kuvaaja tulee näkyviin kaaviossa. Jotta se olisi "punainen" mene omaisuuteen `SeriesColor` ja valitse väri `clRed`. Nimeä sarja "RedBarSeries", ja muuta sen `Title` kohtaan "punainen". Jälkimmäinen on otsikkopalkki (`Legend`), joka saadaan päälle asettamalla kaavion `Legend.Visible` arvoon `true`.
46+
47+Toista sama kahdelle muulle kuvaajalle vastaavasti.
48+
49+![](/wiki-images/2/28/AllBarSeries.png)
50+
51+Nyt kaavio näyttää pylväskuvaajia. Kuitenkin, pylväät sijaitsevat samalla kohdin `x`-akselilla, keltaiset ​​palkit jäävät osittain muiden pylväiden taakse. Yriteenpä korjata.
52+
53+### Vierekkäiset pylväät
54+
55+Pylväskuvaajien järjestäminen kuhunkin ryhmään (eli pylväät jotka vastaavat samaa `x` arvoa) vierekkäin. Pylväitä täytyy siirtää vaakatasossa. `TBarSeries` tarjoaa kaksi ominaisuutta tähän tarkoitukseen:
56+
57+- `BarWidthPercent`
58+- `BarOffsetPercent`
59+
60+Molemmat numerot ilmaistaan ​​prosenttiosuutena etäisyytenä seuraavaan pylväskuvaajaryhmään. (Joissakin kaavioissa, pylväskuvaajat eivät ole yhtä kaukana ja siksi saadaan vaihtelevia pylväsleveyksiä. Vakiovahvuuden saavuttamiseksi pitää tällaisessa tapauksessa asettaa pylväskuvaajan omaisuus `BarWidthStyle` arvoon `bwPercentMin` .)
61+
62+Perusajatuksena on, että pylväskuvaajaryhmien väli (100%) jaetaan pylväille ja tyhjään tilaan ennen seuraavaan ryhmää. Jos haluamme jättää väliä - sanotaanpa vaikkapa - yhden palkin leveyden verran ryhmien välillä niin 100% pitää jakaa neljällä (siis kolme pylvästä ja tyhjä väli), eli kukin pylväs ottaa leveydestä 25%.
63+
64+Joten mitä tapahtuu kun asetetaan `BarWidthPercent` 25%. No - ei aivan mitä halutaan: pylväät saadaan kapeammiksi, mutta ne ovat edelleen päällekkäisiä. Tietenkin tämä tapahtuu, koska ei ole muutettu `BarOffsetPercent`-parametriä.
65+
66+Tällä hetkellä `BarOffsetPercent` on nolla, mikä tarkoittaa, että kukin pylvään keskusta on täsmälleen samalla kohtaa. Joten esim. pitää on siirtää punaiset pylväät vasemmalle ja keltainen pylväät oikealle niin, että ne koskettavat sinisiä pylväitä, jotka jäävät keskustaan. Siirron ero on yksi pylvään leveys eli 25%. Punaisten pylväiden liikuttamiseksi vasemmalle niiden `BarOffsetPercent` on oltava negatiivinen.
67+
68+Yhteenvetona, asetetaan seuraavat arvot:
69+
70+- `RedBarSeries: BarOffsetPercent = -25, BarWidthPercent = 25`
71+- `BlueBarSeries: BarOffsetPercent = 0, BarWidthPercent = 25`
72+- `YellowBarSeries: BarOffsetPercent = 25, BarWidthPercent = 25`
73+
74+![](/wiki-images/0/09/AllBarSeries-side-by-side.png)
75+
76+## Akseli
77+
78+### Luokittelutekstien käyttö
79+
80+Seuraavaksi on käsiteltävä asia on `x`-akselin luokittelutekstien käyttö. Tavallisesti pylväsdiagrammeilla näytetään miten data on sijoittunut tiettyihin ryhmiin. Tämä usein edellyttää että palkin alla on ryhmän nimi. Mutta toistaiseksi meillä on vain numeerisia arvoja. Kokonaislukujen puolikkaat ovat tässä hankalia.
81+
82+Paras tapa saada oikeat tekstit on käyttää ylimääräistä ChartSource:a osoittammaan akselin arvoa, se on `TListChartSource`. Se löytyy kaaviokomponenttipaletilta, on toisena kuvakkeena (`TChart` ja `TRandomChartSource` -komponenttien välissä.) Lisää se lomakkeelle ja nimeä se `LabelsChartSource`:ksi .
83+
84+ListChartSourcella on sisäänrakennettu datapisteiden muokkain, jonka avulla antaa dataa suunnittelutilassa. Valitse komponenttimuokkaimessa `LabelsChartSource` ja mene omaisuuteen `DataPoints`. Klikkaa rivillä olevaa "..." painiketta. Se avaa datapisteiden muokkaimen, ja syötä siinä seuraavat tiedot:
85+
86+![](/wiki-images/3/36/LabelsSource_DataPoints_Editor.png)
87+
88+Laitamme "X" sarakkeeseen kunkin palkkiryhmän `x` koordinaattien arvot. Voisimme nyt ohittaa "Y" sarakkeen, mutta kuten näemme myöhemmin, että siihen laitetaan samat arvot jolloin tekstit säilyvät pylväiden 90 asteen kierron jälkeenkin . Sarakkeessa "Teksti" määritetään näytettävä teksti, jotka näyttävät kunkin pylvään ryhmän. Oletetaan, että nämä tiedot ovat joitakin kausiluonteista arvoja ja joilloin halutaan käyttää lyhenteitä "Q1", "Q2", "Q3" ja "Q4" tarkoittaen vuosineljännestä. Sarake "Väri" voi jättää tyhjäksi.
89+
90+Aktivoida nämä pylväiden otsikot niin tämä ChartSource täytyy liittää Bottom akselin omaisuuden `Marks` alta löytyvään `Source` ominaisuuteen ja sen lisäksi on `Marks` omaisuuden `Style` ominaisuutta muutettava arvoon `smsLabel`.
91+
92+Voila - nyt näyttää tältä:
93+
94+![](/wiki-images/a/a5/BarSeries_with_Axis_Marks.png%E2%80%8E)
95+
96+### Näytetään ruudukko ryhmien välissä
97+
98+Pieni sivuseikka jota voidaan parantaa: kaavio olisi selkeämpää, jos akselin asteikkomerkkien ja ruudukon viivat eivät olleet keskellä pylväskuvaajaluokkien, mutta ne olisivat niiden välillä.
99+
100+Aluksi poistamme alimman akselin: `BottomAxis.Grid.Visible = false`. Merkit voidaan poistaa asettamalla `TickLength` ja `TickInnerLength` nollaksi.
101+
102+Mutta miten lisätä ristikon välillä kaavion ryhmien? Tämä voidaan tehdä luomalla "pieni" akseli bottom-akseliin. Tämä on toinen joukko ruudukot lisätä "suurten" akselilla. Mennä bottom-akselille ja klikkaa `Minors` avataksesi vastaavan editorin. Klikkaa "Lisää" ja valitse `0 - M` luettelossa. Takaisin normaaliin komponenttimuokkaimeen, aktivoi `Visible`, muuta `TickLength` arvoon 4, ja lopuksi, aseta `Intervals.Count` arvoon 1. Tarkista `Grid` asetukset - `Visible` pitäisi olla `true`.
103+
104+Tämä johtaa lopputulokseen. Lopullinen? Ei aivan! Vielä on hieman ärsyttävä väli pylväiden alla. Tämä on peräisin kaavion `Margins` omaisuudesta, joka säätää pylväiden ja akseleiden etäisyyttä. Aseta vain `Chart.Margins.Bottom` arvoon 0 niin väli poistuu.
105+
106+![](/wiki-images/3/3a/BarSeries_no_bottom_margins.png)
107+
108+## Pylväskuvaajat vaakatasoon
109+
110+Tämän opastuksen lopussa muutetaan tätä projektia niin että laitetaan pylväskuvaajat vaakatasoon. Tälläistä kaaviota voidaan käyttää kun eri luokkien nimet ovat pitkiä.
111+
112+`TAChart`-komponenteilla ei ole erikseen omaa vaakapylväskuvaajaa, mutta pylväskuvaaja (`TBarSeries`) voidaan helposti muuttaa vaakapylväskuvaajaksi. Kuten mikä tahansa muu `TChartSeries`jälkeläinen niin sillä on ominaisuuksia `AxisIndexX` ja `AxisIndexY` osoittamaan, mikä akseli vastaa `x` ja `y` koordinaatteja. Aseta vain `AxisIndexX` on indeksi LeftAxis (yleensä 0 ) ja `AxisIndexY` kuin `BottomAxis` palkin suunnan kiertämiseksi.
113+
114+Ja, tietenkin, `LabelsChartSource` on liitetty `LeftAxis`:n `Marks.Source`:n tällä kertaa. Ja koko akseli on käsiteltävä sen mukaisesti.
115+
116+Pohjimmiltaan siinä on kaikki mitä tarvitaan luomaan pylväskaavio vaakasuuntaan.
117+
118+![](/wiki-images/9/9b/Horizontal_BarSeries.png%E2%80%8E)
119+
120+## Yhteenveto
121+
122+Vaiheet luoda vierekkäiset pylväskuvaajat:
123+
124+- Jokainen pylväs vaatii erillisen BarSeries.
125+- Käytä BarSeries:n ominaisuuksia `BarWidthPercent` ja `BarOffsetPercent` järjestämään pylväät vierekkäin ilman päällekkäisyyksiä. Prosenttiosuudet viittaavat välien etäisyyttä pylväsluokan keskuksesta.
126+- Pylväskuvaajat vaakatasoon saadaan asettamalla kuvaajan `AxisIndexX` indeksi kaavion `LeftAxis` (yleensä `0` ) ja `AxisIndexY` indeksi `BottomAxis` (yleensä `1`).
127+
128+## Lähdekoodi
129+
130+Tämän opetusohjelma lähdekoodi on saatavilla kansiossa `components/tachart/tutorials/bar_series`.
131+
132+### Project file
133+
134+``` pascal
135+program project1;
136+
137+{$mode objfpc}{$H+}
138+
139+uses
140+ {$IFDEF UNIX}{$IFDEF UseCThreads}
141+ cthreads,
142+ {$ENDIF}{$ENDIF}
143+ Interfaces, // this includes the LCL widgetset
144+ Forms, tachartlazaruspkg, Unit1
145+ { you can add units after this };
146+
147+{$R *.res}
148+
149+begin
150+ RequireDerivedFormResource := True;
151+ Application.Initialize;
152+ Application.CreateForm(TForm1, Form1);
153+ Application.Run;
154+end.
155+```
156+
157+### Unit1.pas
158+
159+``` pascal
160+unit Unit1;
161+
162+{$mode objfpc}{$H+}
163+
164+interface
165+
166+uses
167+ Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, TAGraph,
168+ TASeries, TASources;
169+
170+type
171+
172+ { TForm1 }
173+
174+ TForm1 = class(TForm)
175+ Chart1: TChart;
176+ LabelsChartSource: TListChartSource;
177+ RedBarSeries: TBarSeries;
178+ BlueBarSeries: TBarSeries;
179+ YellowBarSeries: TBarSeries;
180+ RedChartSource: TRandomChartSource;
181+ BlueChartSource: TRandomChartSource;
182+ YellowChartSource: TRandomChartSource;
183+ private
184+ { private declarations }
185+ public
186+ { public declarations }
187+ end;
188+
189+var
190+ Form1: TForm1;
191+
192+implementation
193+
194+{$R *.lfm}
195+
196+end.
197+```
198+
199+### Unit1.lfm (vertical bars)
200+
201+``` pascal
202+object Form1: TForm1
203+ Left = 381
204+ Height = 272
205+ Top = 444
206+ Width = 429
207+ Caption = 'Form1'
208+ ClientHeight = 272
209+ ClientWidth = 429
210+ LCLVersion = '1.3'
211+ object Chart1: TChart
212+ Left = 0
213+ Height = 272
214+ Top = 0
215+ Width = 384
216+ AxisList = <
217+ item
218+ Minors = <>
219+ Title.LabelFont.Orientation = 900
220+ end
221+ item
222+ Grid.Visible = False
223+ TickLength = 0
224+ Alignment = calBottom
225+ Marks.Format = '%2:s'
226+ Marks.Source = LabelsChartSource
227+ Marks.Style = smsLabel
228+ Minors = <
229+ item
230+ Intervals.Count = 1
231+ Intervals.MinLength = 5
232+ Intervals.Options = [aipUseCount, aipUseMinLength]
233+ TickLength = 4
234+ end>
235+ end>
236+ Foot.Brush.Color = clBtnFace
237+ Foot.Font.Color = clBlue
238+ Legend.Visible = True
239+ Margins.Bottom = 0
240+ Title.Brush.Color = clBtnFace
241+ Title.Font.Color = clBlue
242+ Title.Text.Strings = (
243+ 'TAChart'
244+ )
245+ ParentColor = False
246+ object RedBarSeries: TBarSeries
247+ Title = 'red'
248+ BarBrush.Color = clRed
249+ BarOffsetPercent = -25
250+ BarWidthPercent = 25
251+ Source = RedChartSource
252+ end
253+ object BlueBarSeries: TBarSeries
254+ Title = 'blue'
255+ BarBrush.Color = clBlue
256+ BarWidthPercent = 25
257+ Source = BlueChartSource
258+ end
259+ object YellowBarSeries: TBarSeries
260+ Title = 'yellow'
261+ BarBrush.Color = clYellow
262+ BarOffsetPercent = 25
263+ BarWidthPercent = 25
264+ Source = YellowChartSource
265+ end
266+ end
267+ object RedChartSource: TRandomChartSource
268+ PointsNumber = 4
269+ RandSeed = 1
270+ XMax = 4
271+ XMin = 1
272+ YMax = 100
273+ YMin = 0
274+ left = 360
275+ top = 72
276+ end
277+ object BlueChartSource: TRandomChartSource
278+ PointsNumber = 4
279+ RandSeed = 2
280+ XMax = 4
281+ XMin = 1
282+ YMax = 100
283+ YMin = 0
284+ left = 360
285+ top = 120
286+ end
287+ object YellowChartSource: TRandomChartSource
288+ PointsNumber = 4
289+ RandSeed = 3
290+ XMax = 4
291+ XMin = 1
292+ YMax = 100
293+ YMin = 0
294+ left = 360
295+ top = 168
296+ end
297+ object LabelsChartSource: TListChartSource
298+ DataPoints.Strings = (
299+ '1|1|?|Q1'
300+ '2|2|?|Q2'
301+ '3|3|?|Q3'
302+ '4|4|?|Q4'
303+ )
304+ left = 361
305+ top = 220
306+ end
307+end
308+```
309+
310+### Unit1.lfm (horizontal bars)
311+
312+``` pascal
313+object Form1: TForm1
314+ Left = 381
315+ Height = 272
316+ Top = 444
317+ Width = 429
318+ Caption = 'Form1'
319+ ClientHeight = 272
320+ ClientWidth = 429
321+ LCLVersion = '1.3'
322+ object Chart1: TChart
323+ Left = 0
324+ Height = 272
325+ Top = 0
326+ Width = 384
327+ AxisList = <
328+ item
329+ Grid.Visible = False
330+ TickLength = 0
331+ Marks.Format = '%2:s'
332+ Marks.Source = LabelsChartSource
333+ Marks.Style = smsLabel
334+ Minors = <
335+ item
336+ Intervals.Count = 1
337+ Intervals.MinLength = 5
338+ Intervals.Options = [aipUseCount, aipUseMinLength]
339+ TickLength = 4
340+ end>
341+ Title.LabelFont.Orientation = 900
342+ end
343+ item
344+ Alignment = calBottom
345+ Minors = <>
346+ end>
347+ Foot.Brush.Color = clBtnFace
348+ Foot.Font.Color = clBlue
349+ Legend.Visible = True
350+ Margins.Bottom = 0
351+ Title.Brush.Color = clBtnFace
352+ Title.Font.Color = clBlue
353+ Title.Text.Strings = (
354+ 'TAChart'
355+ )
356+ ParentColor = False
357+ object RedBarSeries: TBarSeries
358+ Title = 'red'
359+ AxisIndexX = 0
360+ AxisIndexY = 1
361+ BarBrush.Color = clRed
362+ BarOffsetPercent = -25
363+ BarWidthPercent = 25
364+ Source = RedChartSource
365+ end
366+ object BlueBarSeries: TBarSeries
367+ Title = 'blue'
368+ AxisIndexX = 0
369+ AxisIndexY = 1
370+ BarBrush.Color = clBlue
371+ BarWidthPercent = 25
372+ Source = BlueChartSource
373+ end
374+ object YellowBarSeries: TBarSeries
375+ Title = 'yellow'
376+ AxisIndexX = 0
377+ AxisIndexY = 1
378+ BarBrush.Color = clYellow
379+ BarOffsetPercent = 25
380+ BarWidthPercent = 25
381+ Source = YellowChartSource
382+ end
383+ end
384+ object RedChartSource: TRandomChartSource
385+ PointsNumber = 4
386+ RandSeed = 1
387+ XMax = 4
388+ XMin = 1
389+ YMax = 100
390+ YMin = 0
391+ left = 360
392+ top = 72
393+ end
394+ object BlueChartSource: TRandomChartSource
395+ PointsNumber = 4
396+ RandSeed = 2
397+ XMax = 4
398+ XMin = 1
399+ YMax = 100
400+ YMin = 0
401+ left = 360
402+ top = 120
403+ end
404+ object YellowChartSource: TRandomChartSource
405+ PointsNumber = 4
406+ RandSeed = 3
407+ XMax = 4
408+ XMin = 1
409+ YMax = 100
410+ YMin = 0
411+ left = 360
412+ top = 168
413+ end
414+ object LabelsChartSource: TListChartSource
415+ DataPoints.Strings = (
416+ '1|1|?|Q1'
417+ '2|2|?|Q2'
418+ '3|3|?|Q3'
419+ '4|4|?|Q4'
420+ )
421+ left = 361
422+ top = 220
423+ end
424+end
425+```
426+
427+---
428+*From the Free Pascal wiki, page "TAChart Tutorial: BarSeries/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