Sign in Join
Wiki copytemporary

TAChart Tutorial: BarSeries/fi: what changed

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

OldNewLine
11## Johdanto
22
33![](/wiki-images/b/b1/BarSeries_finished.png%E2%80%8E)
44
55Lazaruksessas `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:
66
77- vierekkäiset pylväät
88- pinotut pylvät
99- pinotut pylvät jotka ovat normalisoitu 100%
1010- pystypylväät
1111- vaakapylväät
1212
1313Tä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.
1414
1515Lisäksi esittellään myös [[TAChart documentation|TRandomChartSource]] joka on työkalu jolla saadaan kaavioon satunnaisdataa.
1616
1717Tarvitset 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]].
1818
1919## Valmistelu
2020
2121### Kaavion alustaminen
2222
2323Luo uusi projekti, tallenna se. Lisää `TChart` komponentti Lazaruksen komponenttipaletilta lomakkelle `Form1`, sovita se sopivan kokoiseksi lomakkeelle.
2424
2525### Data kaavioon
2626
2727Ennen kuin jatketaan mietitäänpä mistä saadaan tiedot kaavioon. Ehkäpä taloushallinnon dataa. Suuryritysten liiketoiminnan tuloksia löytyy jossain internetissä tai jotain aivan muuta.
2828
2929Mennää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.
3030
3131Kuten 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:
3232
3333![](/wiki-images/4/4b/ComponentPalette_RandomChartSource.png)
3434
3535Lisää kolme RandomChartSource-komponenttia lomakkeelle - yksi per kuvaaja. Nimeä ne `RedChartSource`, `BlueChartSource`, ja `YellowChartSource` koska ne liittyvät "punaiseen", "siniseen" ja "keltaiseen" pylväskuvaajaan.
3636
3737Lisä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`.
3838
3939## Pylväskuvaaja
4040
4141### Lisää kuvaaja
4242
4343Nyt 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 .
4444
4545Napsauta 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`.
4646
4747Toista sama kahdelle muulle kuvaajalle vastaavasti.
4848
4949![](/wiki-images/2/28/AllBarSeries.png)
5050
5151Nyt 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.
5252
5353### Vierekkäiset pylväät
5454
5555Pylvä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:
5656
5757- `BarWidthPercent`
5858- `BarOffsetPercent`
5959
6060Molemmat 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` .)
6161
6262Perusajatuksena 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%.
6363
6464Joten 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ä.
6565
6666Tä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.
6767
6868Yhteenvetona, asetetaan seuraavat arvot:
6969
7070- `RedBarSeries: BarOffsetPercent = -25, BarWidthPercent = 25`
7171- `BlueBarSeries: BarOffsetPercent = 0, BarWidthPercent = 25`
7272- `YellowBarSeries: BarOffsetPercent = 25, BarWidthPercent = 25`
7373
7474![](/wiki-images/0/09/AllBarSeries-side-by-side.png)
7575
7676## Akseli
7777
7878### Luokittelutekstien käyttö
7979
8080Seuraavaksi 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.
8181
8282Paras 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 .
8383
8484ListChartSourcella 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:
8585
8686![](/wiki-images/3/36/LabelsSource_DataPoints_Editor.png)
8787
8888Laitamme "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.
8989
9090Aktivoida 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`.
9191
9292Voila - nyt näyttää tältä:
9393
9494![](/wiki-images/a/a5/BarSeries_with_Axis_Marks.png%E2%80%8E)
9595
9696### Näytetään ruudukko ryhmien välissä
9797
9898Pieni 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ä.
9999
100100Aluksi poistamme alimman akselin: `BottomAxis.Grid.Visible = false`. Merkit voidaan poistaa asettamalla `TickLength` ja `TickInnerLength` nollaksi.
101101
102102Mutta 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`.
103103
104104Tä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.
105105
106106![](/wiki-images/3/3a/BarSeries_no_bottom_margins.png)
107107
108108## Pylväskuvaajat vaakatasoon
109109
110110Tä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ä.
111111
112112`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.
113113
114114Ja, tietenkin, `LabelsChartSource` on liitetty `LeftAxis`:n `Marks.Source`:n tällä kertaa. Ja koko akseli on käsiteltävä sen mukaisesti.
115115
116116Pohjimmiltaan siinä on kaikki mitä tarvitaan luomaan pylväskaavio vaakasuuntaan.
117117
118118![](/wiki-images/9/9b/Horizontal_BarSeries.png%E2%80%8E)
119119
120120## Yhteenveto
121121
122122Vaiheet luoda vierekkäiset pylväskuvaajat:
123123
124124- Jokainen pylväs vaatii erillisen BarSeries.
125125- 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.
126126- Pylväskuvaajat vaakatasoon saadaan asettamalla kuvaajan `AxisIndexX` indeksi kaavion `LeftAxis` (yleensä `0` ) ja `AxisIndexY` indeksi `BottomAxis` (yleensä `1`).
127127
128128## Lähdekoodi
129129
130130Tämän opetusohjelma lähdekoodi on saatavilla kansiossa `components/tachart/tutorials/bar_series`.
131131
132132### Project file
133133
134134``` pascal
135135program project1;
136136
137137{$mode objfpc}{$H+}
138138
139139uses
140140 {$IFDEF UNIX}{$IFDEF UseCThreads}
141141 cthreads,
142142 {$ENDIF}{$ENDIF}
143143 Interfaces, // this includes the LCL widgetset
144144 Forms, tachartlazaruspkg, Unit1
145145 { you can add units after this };
146146
147147{$R *.res}
148148
149149begin
150150 RequireDerivedFormResource := True;
151151 Application.Initialize;
152152 Application.CreateForm(TForm1, Form1);
153153 Application.Run;
154154end.
155155```
156156
157157### Unit1.pas
158158
159159``` pascal
160160unit Unit1;
161161
162162{$mode objfpc}{$H+}
163163
164164interface
165165
166166uses
167167 Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, TAGraph,
168168 TASeries, TASources;
169169
170170type
171171
172172 { TForm1 }
173173
174174 TForm1 = class(TForm)
175175 Chart1: TChart;
176176 LabelsChartSource: TListChartSource;
177177 RedBarSeries: TBarSeries;
178178 BlueBarSeries: TBarSeries;
179179 YellowBarSeries: TBarSeries;
180180 RedChartSource: TRandomChartSource;
181181 BlueChartSource: TRandomChartSource;
182182 YellowChartSource: TRandomChartSource;
183183 private
184184 { private declarations }
185185 public
186186 { public declarations }
187187 end;
188188
189189var
190190 Form1: TForm1;
191191
192192implementation
193193
194194{$R *.lfm}
195195
196196end.
197197```
198198
199199### Unit1.lfm (vertical bars)
200200
201-``` pascal
201+``` lfm
202202object Form1: TForm1
203203 Left = 381
204204 Height = 272
205205 Top = 444
206206 Width = 429
207207 Caption = 'Form1'
208208 ClientHeight = 272
209209 ClientWidth = 429
210210 LCLVersion = '1.3'
211211 object Chart1: TChart
212212 Left = 0
213213 Height = 272
214214 Top = 0
215215 Width = 384
216216 AxisList = <
217217 item
218218 Minors = <>
219219 Title.LabelFont.Orientation = 900
220220 end
221221 item
222222 Grid.Visible = False
223223 TickLength = 0
224224 Alignment = calBottom
225225 Marks.Format = '%2:s'
226226 Marks.Source = LabelsChartSource
227227 Marks.Style = smsLabel
228228 Minors = <
229229 item
230230 Intervals.Count = 1
231231 Intervals.MinLength = 5
232232 Intervals.Options = [aipUseCount, aipUseMinLength]
233233 TickLength = 4
234234 end>
235235 end>
236236 Foot.Brush.Color = clBtnFace
237237 Foot.Font.Color = clBlue
238238 Legend.Visible = True
239239 Margins.Bottom = 0
240240 Title.Brush.Color = clBtnFace
241241 Title.Font.Color = clBlue
242242 Title.Text.Strings = (
243243 'TAChart'
244244 )
245245 ParentColor = False
246246 object RedBarSeries: TBarSeries
247247 Title = 'red'
248248 BarBrush.Color = clRed
249249 BarOffsetPercent = -25
250250 BarWidthPercent = 25
251251 Source = RedChartSource
252252 end
253253 object BlueBarSeries: TBarSeries
254254 Title = 'blue'
255255 BarBrush.Color = clBlue
256256 BarWidthPercent = 25
257257 Source = BlueChartSource
258258 end
259259 object YellowBarSeries: TBarSeries
260260 Title = 'yellow'
261261 BarBrush.Color = clYellow
262262 BarOffsetPercent = 25
263263 BarWidthPercent = 25
264264 Source = YellowChartSource
265265 end
266266 end
267267 object RedChartSource: TRandomChartSource
268268 PointsNumber = 4
269269 RandSeed = 1
270270 XMax = 4
271271 XMin = 1
272272 YMax = 100
273273 YMin = 0
274274 left = 360
275275 top = 72
276276 end
277277 object BlueChartSource: TRandomChartSource
278278 PointsNumber = 4
279279 RandSeed = 2
280280 XMax = 4
281281 XMin = 1
282282 YMax = 100
283283 YMin = 0
284284 left = 360
285285 top = 120
286286 end
287287 object YellowChartSource: TRandomChartSource
288288 PointsNumber = 4
289289 RandSeed = 3
290290 XMax = 4
291291 XMin = 1
292292 YMax = 100
293293 YMin = 0
294294 left = 360
295295 top = 168
296296 end
297297 object LabelsChartSource: TListChartSource
298298 DataPoints.Strings = (
299299 '1|1|?|Q1'
300300 '2|2|?|Q2'
301301 '3|3|?|Q3'
302302 '4|4|?|Q4'
303303 )
304304 left = 361
305305 top = 220
306306 end
307307end
308308```
309309
310310### Unit1.lfm (horizontal bars)
311311
312-``` pascal
312+``` lfm
313313object Form1: TForm1
314314 Left = 381
315315 Height = 272
316316 Top = 444
317317 Width = 429
318318 Caption = 'Form1'
319319 ClientHeight = 272
320320 ClientWidth = 429
321321 LCLVersion = '1.3'
322322 object Chart1: TChart
323323 Left = 0
324324 Height = 272
325325 Top = 0
326326 Width = 384
327327 AxisList = <
328328 item
329329 Grid.Visible = False
330330 TickLength = 0
331331 Marks.Format = '%2:s'
332332 Marks.Source = LabelsChartSource
333333 Marks.Style = smsLabel
334334 Minors = <
335335 item
336336 Intervals.Count = 1
337337 Intervals.MinLength = 5
338338 Intervals.Options = [aipUseCount, aipUseMinLength]
339339 TickLength = 4
340340 end>
341341 Title.LabelFont.Orientation = 900
342342 end
343343 item
344344 Alignment = calBottom
345345 Minors = <>
346346 end>
347347 Foot.Brush.Color = clBtnFace
348348 Foot.Font.Color = clBlue
349349 Legend.Visible = True
350350 Margins.Bottom = 0
351351 Title.Brush.Color = clBtnFace
352352 Title.Font.Color = clBlue
353353 Title.Text.Strings = (
354354 'TAChart'
355355 )
356356 ParentColor = False
357357 object RedBarSeries: TBarSeries
358358 Title = 'red'
359359 AxisIndexX = 0
360360 AxisIndexY = 1
361361 BarBrush.Color = clRed
362362 BarOffsetPercent = -25
363363 BarWidthPercent = 25
364364 Source = RedChartSource
365365 end
366366 object BlueBarSeries: TBarSeries
367367 Title = 'blue'
368368 AxisIndexX = 0
369369 AxisIndexY = 1
370370 BarBrush.Color = clBlue
371371 BarWidthPercent = 25
372372 Source = BlueChartSource
373373 end
374374 object YellowBarSeries: TBarSeries
375375 Title = 'yellow'
376376 AxisIndexX = 0
377377 AxisIndexY = 1
378378 BarBrush.Color = clYellow
379379 BarOffsetPercent = 25
380380 BarWidthPercent = 25
381381 Source = YellowChartSource
382382 end
383383 end
384384 object RedChartSource: TRandomChartSource
385385 PointsNumber = 4
386386 RandSeed = 1
387387 XMax = 4
388388 XMin = 1
389389 YMax = 100
390390 YMin = 0
391391 left = 360
392392 top = 72
393393 end
394394 object BlueChartSource: TRandomChartSource
395395 PointsNumber = 4
396396 RandSeed = 2
397397 XMax = 4
398398 XMin = 1
399399 YMax = 100
400400 YMin = 0
401401 left = 360
402402 top = 120
403403 end
404404 object YellowChartSource: TRandomChartSource
405405 PointsNumber = 4
406406 RandSeed = 3
407407 XMax = 4
408408 XMin = 1
409409 YMax = 100
410410 YMin = 0
411411 left = 360
412412 top = 168
413413 end
414414 object LabelsChartSource: TListChartSource
415415 DataPoints.Strings = (
416416 '1|1|?|Q1'
417417 '2|2|?|Q2'
418418 '3|3|?|Q3'
419419 '4|4|?|Q4'
420420 )
421421 left = 361
422422 top = 220
423423 end
424424end
425425```
426426
427427---
428428*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