TAChart Tutorial: BarSeries/de: what changed
Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.
Title: TAChart Tutorial: BarSeries/de
| Old | New | Line | |
|---|---|---|---|
| 1 | + | ## Einführung | |
| 2 | + | ||
| 3 | + |  | |
| 4 | + | ||
| 5 | + | Die `TAChart`-Bibliothek kann eine Vielzahl von Diagrammen in Lazarus erstellen. Aber im Vergleich zu anderen Serientypen scheinen Balken-Plots schwieriger zu sein, vor allem, weil es eine Vielzahl von Möglichkeiten gibt: | |
| 6 | + | ||
| 7 | + | - Nebeneinander angeordnete Balken | |
| 8 | + | - Gestapelte Balken | |
| 9 | + | - Gestapelte Balken, auf 100 % normiert | |
| 10 | + | - Vertikale Balken | |
| 11 | + | - Horizontale Balken | |
| 12 | + | ||
| 13 | + | In diesem Tutorial möchten wir dir die Grundidee zeigen, wie du ein Diagramm mit mehreren nebeneinander angeordneten Balkenreihen erstellen kannst. In einem [[TAChart Tutorial: Stacked BarSeries|Nachfolge-Tutorial]] lernst du, wie man die Balken übereinander stapeln kann. | |
| 14 | + | ||
| 15 | + | Neben Balkenserien stellt dieses Tutorial auch `TRandomChartSource` vor, eine praktische Datenquelle zum Entwerfen und Testen eines Diagramms, ohne die Anwendung kompilieren zu müssen. | |
| 16 | + | ||
| 17 | + | Du benötigst Grundkenntnisse in Pascal und Lazarus. Wirf einen Blick auf das [[TAChart Tutorial: Getting started/de|TAChart Tutorial: Getting started]], um einige grundlegende Fähigkeiten für die Arbeit mit `TAChart` zu erlernen, wenn diese Bibliothek neu für dich ist. Wir empfehlen auch, die [[TAChart documentation|TAChart-Dokumentation]] zu studieren. | |
| 18 | + | ||
| 19 | + | ## Vorbereitung | |
| 20 | + | ||
| 21 | + | ### Einrichten des Diagramms | |
| 22 | + | ||
| 23 | + | Erstelle ein neues Projekt und speichere es. Platziere eine `TChart`-Komponente aus der Lazarus-Komponentenpalette auf dem Formular `Form1` und ziehe ihre Größe soweit auf, dass sie den gewünschten Bereich des Formulars ausfüllt. | |
| 24 | + | ||
| 25 | + | ### Daten zum Plotten | |
| 26 | + | ||
| 27 | + | Bevor wir fortfahren, müssen wir uns überlegen, welche Daten wir darstellen wollen. Vielleicht könntest du das Guthaben deiner Giro- und Sparkonten verwenden, oder die Geschäftsergebnisse großer Unternehmen, die irgendwo im Internet zu finden sind, oder etwas ganz anderes ... | |
| 28 | + | ||
| 29 | + | Gehen wir dieses Mal einen anderen Weg: Warum zeichnen wir nicht einfach zufällige Daten? Natürlich haben diese keine Bedeutung, aber sie sind einfach und sehr bequem zum Üben. Insbesondere enthält `TAChart` die Komponente [[TAChart documentation|TRandomChartSource]], die Zufallsdaten bereitstellt, die zur Entwurfszeit nahtlos in einer Datenreihe eingefügt werden können. Das bedeutet, dass du diesem Tutorial folgen kannst, ohne eine Codezeile schreiben zu müssen und ohne die Demo-Anwendung kompilieren zu müssen. Später, wenn die Layoutarbeiten abgeschlossen sind, kannst du die `RandomChartSources` entfernen und durch ChartSources mit "echten" Daten ersetzen. | |
| 30 | + | ||
| 31 | + | Wie wir gleich sehen werden, gibt es im Chart drei Serien, jede davon mit – sagen wir – vier Balken. Für jede Serie benötigst du eine Datenquelle. Wiegesagt, wir nehmen eine `TRandomChartSource`. Um diese verfügbar zu machen, wirf einen Blick auf die "Chart"-Komponentenpalette - es ist das vierte Symbol in der Palette und im folgenden Screenshot rot hervorgehoben: | |
| 32 | + | ||
| 33 | + |  | |
| 34 | + | ||
| 35 | + | Füge dem Formular drei RandomChartSources hinzu – eine pro Serie. Benenne sie um in `RedChartSource`, `BlueChartSource` und `YellowChartSource` um, da sie mit "roten", "blauen" und "gelben" Balkenreihen verknüpft werden sollen (man sollte immer lieber "sprechende" Variablennamen verwenden.) | |
| 36 | + | ||
| 37 | + | Zuvor müssen wir die RandomChartSources einrichten, da sie standardmäßig keine Daten liefern. Wir wollen vier Balken pro Serie haben. Setze daher die Eigenschaft `PointsNumber` auf 4. Damit die Achsenbeschriftungen mit den Balken synchron sind, muss die `x`-Achse zwischen 1 und 4 liegen (oder zwischen 0 und 3, oder zwischen 0 und 39, was auch immer du möchtest - wir werden später genauer auf die Achsenbeschriftungen eingehen): `XMin = 1, XMax = 4`. Und schließlich müssen wir auch den `y`-Achsenbereich angeben, vielleicht wählst du `YMin = 0` und `YMax = 100`. | |
| 38 | + | ||
| 39 | + | ## Balkenserie | |
| 40 | + | ||
| 41 | + | ### Serie hinzufügen | |
| 42 | + | ||
| 43 | + | Nachdem alle Vorbereitungen abgeschlossen sind, können wir die Balkenserie zum Diagramm hinzufügen. Klicke doppelt auf dem Diagramm, um den Reiheneditor zu öffnen, dann auf „Hinzufügen“ und wähle aus der Liste den Eintrag „Balkenserie“ aus. Dasselbe zweimal wiederholen, so dass wir am Ende drei Balkenserien im Chart haben. Wir sehen sie im Diagramm noch nicht, weil sie noch nicht mit unseren Daten verknüpft sind. Im Objektbaum des Objektinspektors erscheinen die Serien jedoch als Unterknoten des "Chart"-Knotens. | |
| 44 | + | ||
| 45 | + | Klicke auf die erste Reihe im Objektbaum und gehe im Objektinspektor zur Eigenschaft `Source`; wähle den Eintrag `RedChartSource` aus der Liste aus. Jetzt wird die Reihe im Diagramm sichtbar. Um sie "rot" zu machen, gehe Sie zur Eigenschaft `SeriesColor` und wählen die Farbe `clRed`. Benenne Sie die Datenreihe um nach „RedBarSeries“ und ändere ihren Titel zu „red“. Letzteres ist für die Legende, die wir aktivieren, indem wir `Legend.Visible` des Chart auf `true` setzen. | |
| 46 | + | ||
| 47 | + | Wiederhole das mit den anderen beiden Serien entsprechend. | |
| 48 | + | ||
| 49 | + |  | |
| 50 | + | ||
| 51 | + | Jetzt zeigt der Chart die Balkenserien an. Die Balken befinden sich jedoch jeweils auf demselben Wert der `x`-Achse, die gelben Balken werden teilweise von den anderen Balken verdeckt. Das wollen wir jetzt beheben. | |
| 52 | + | ||
| 53 | + | ### Nebeneinander angeordnete Balken | |
| 54 | + | ||
| 55 | + | Um die Balken jeder Gruppe (d. h. Balken, die demselben `x`-Wert zugeordnet sind) nebeneinander anzuordnen, müssen wir sie horizontal verschieben. `TBarSeries` bietet zu diesem Zweck zwei Eigenschaften: | |
| 56 | + | ||
| 57 | + | - `BarWidthPercent` | |
| 58 | + | - `BarOffsetPercent` | |
| 59 | + | ||
| 60 | + | Beide Zahlen werden in Prozent des Abstands zur nächsten Balkengruppe ausgedrückt. (In manchen Diagrammen sind die Balken nicht äquidistant und erhalten daher unterschiedliche Balkenbreiten. Um in einem solchen Fall eine konstante Balkendicke zu erreichen, setze die Eigenschaft `BarWidthStyle` auf `bwPercentMin`.) | |
| 61 | + | ||
| 62 | + | Die Grundidee ist, dass der Raum zwischen den Balkengruppen (100%) durch die Balken und etwas Leerraum zur nächsten Gruppe geteilt wird. Wenn wir zwischen den Gruppen eine Lücke von beispielsweise einer Balkenbreite lassen wollen, müssen wir 100 % durch 4 teilen (3 Balken plus Lücke), d. h. jeder Balken kann eine Breite von 25 % einnehmen. | |
| 63 | + | ||
| 64 | + | Setzen wir also `BarWidthPercent` auf 25 und sehen, was passiert. Oh - nicht ganz das, was wir wollten: Die Balken sind zwar schmaler geworden, aber sie überlappen sich immer noch. Dies geschieht natürlich, weil wir den Parameter `BarOffsetPercent` nicht geändert haben. | |
| 65 | + | ||
| 66 | + | Derzeit ist `BarOffsetPercent` null, was bedeutet, dass sich die Mitte jedes Balkens genau an der Position des Achsenstrichs befindet. Wir müssen die roten Balken nach links und die gelben Balken nach rechts so verschieben, dass sie die in der Mitte verbleibenden blauen Balken berühren. Die Verschiebungsdifferenz beträgt eine Balkenbreite, also 25 %. Um die roten Balken nach links zu verschieben, muss ihr `BarOffsetPercent` negativ sein. | |
| 67 | + | ||
| 68 | + | Zusammenfassend verwenden wir die folgenden Werte: | |
| 69 | + | ||
| 70 | + | - `RedBarSeries: BarOffsetPercent = -25, BarWidthPercent = 25` | |
| 71 | + | - `BlueBarSeries: BarOffsetPercent = 0, BarWidthPercent = 25` | |
| 72 | + | - `YellowBarSeries: BarOffsetPercent = 25, BarWidthPercent = 25` | |
| 73 | + | ||
| 74 | + |  | |
| 75 | + | ||
| 76 | + | ## Achse | |
| 77 | + | ||
| 78 | + | ### Achsenbeschriftung | |
| 79 | + | ||
| 80 | + | Das nächste zu behandelnde Problem ist die `x`-Achse. Normalerweise stellen Balkendiagramme die Kategorien von Datensätzen dar, was häufig Textbeschriftungen unter jeder Balkengruppe erfordert. Aber bisher haben wir hier nur numerische Bezeichnungen. Außerdem sind die Zwischenbeschriftungen bei halben Zahlen unschön. | |
| 81 | + | ||
| 82 | + | Der beste Weg, dies richtig zu machen, ist, eine zusätzliche ChartSource für die Zuordnung der Zeichenketten zu den Achsenwerten zu verwenden. Es ist diesmal eine `TListChartSource`, die als zweites Symbol in der Palette der Diagrammkomponenten zu finden ist. Klicke sie auf das Formular und nenne sie in `LabelsChartSource`. | |
| 83 | + | ||
| 84 | + | Die `ListChartSource` hat einen eingebauten Datenpunkt-Editor, der es ermöglicht, Daten zur Entwurfszeit einzugeben. Wählen die `LabelsChartSource` an und gehe im Objekt-Inspektor zur Eigenschaft `DataPoints`. Klicke rechts auf "...", um den Datenpunkt-Editor zu öffnen, und gib folgende Daten ein: | |
| 85 | + | ||
| 86 | + |  | |
| 87 | + | ||
| 88 | + | In der Spalte "X" tragen wir die Werte der `x`-Koordinaten jeder Balkengruppe ein. Wir könnten die "Y"-Spalte weglassen, aber wie wir später bei dem horizontalen Balkendiagramm sehen werden, ist es praktisch, die gleichen Daten auch in dieser Spalte zu haben, damit die Beschriftungen nach dem Drehen der Balken erhalten bleiben. In der Spalte „Text“ legen wir die Texte fest, die für jede Balkengruppe entlang der Achse als Achsenmarkierungen erscheinen sollen. Nehmen wir an, dass unsere Daten saisonale Werte darstellen und verwenden die Abkürzungen „Q1“, „Q2“, „Q3“ und „Q4“ für „Quartal 1“ usw. Die Spalte „Farbe“ kann leer bleiben. | |
| 89 | + | ||
| 90 | + | Um diese Beschriftungen zu aktivieren, müssen wir diese ChartSource der Eigenschaft `Source` der `Marks` der unteren Achse zuweisen. Weiterhin muss die Eigenschaft `Style` von `Marks` auf `smsLabel` geschaltet werden, denn das wählt für die Beschriftungen den oben unter „Text“ eingegebenen Daten aus. | |
| 91 | + | ||
| 92 | + | Voila - und unser Chart sieht nun so aus: | |
| 93 | + | ||
| 94 | + |  | |
| 95 | + | ||
| 96 | + | ### Rasterlinien und Unterteilungsstriche zwischen den Gruppen anzeigen | |
| 97 | + | ||
| 98 | + | Ein kleines Problem kann verbessert werden: Das Diagramm wäre verständlicher, wenn sich die Achsenmarkierungen und Gitterlinien nicht in der Mitte der Balkengruppen, sondern direkt zwischen ihnen befinden würden. | |
| 99 | + | ||
| 100 | + | Zuerst schalten wir das Raster der unteren Achse aus: `BottomAxis.Grid.Visible = false`. Um die Unterteilungsstriche ("Ticks") zu entfernen, können wir `TickLength` und `TickInnerLength` auf `0` setzen. | |
| 101 | + | ||
| 102 | + | Aber wie erzeugt man die Gitterlinien zwischen den Diagrammgruppen? Dies kann durch Erstellen einer "Sekundär-Achse" zur unteren Achse erfolgen. Dies ist ein weiterer Satz von Ticks und Gitterlinien zusätzlich zur "Haupt"-Achse. Gehe zur unteren Achse und klicke auf `Minors`, um den entsprechenden Editor zu öffnen. Klicke nun auf "Hinzufügen" und wähle den Eintrag `0 - M` in der Liste aus. Zurück im normalen Objektinspektor, aktiviere `Visible`, erhöhe `TickLength` auf 4 und setze schließlich `Intervals.Count` auf `1` - Wir wollen nur 1 kleinen Tick zwischen den großen Ticks. Überprüfe Sie die `Grid`-Einstellungen der Sekundär-Achse - `Visible` sollte auf `true` eingestellt sein. | |
| 103 | + | ||
| 104 | + | Dies führt zum Endergebnis. Fertig? Nicht ganz! Unter den Balken ist ein störender kleiner Spalt. Dies rührt von der Eigenschaft `Margins` des Diagramms her, die einen gewissen Abstand zwischen der Reihe und den Achsen lässt. Setze einfach `Chart.Margins.Bottom` auf `0`, um die Lücke zu entfernen. | |
| 105 | + | ||
| 106 | + |  | |
| 107 | + | ||
| 108 | + | ## Horizontale Balkenserie | |
| 109 | + | ||
| 110 | + | Bevor wir diese Lektion schließen, möchten wir dieses Projekt schnell ändern und ein Diagramm mit horizontalen Balken erstellen. Diese Art von Diagramm wird häufig bevorzugt, wenn die Achsenbeschriftungen aus langen Texten bestehen und das Diagramm im Querformat ausgerichtet ist. | |
| 111 | + | ||
| 112 | + | `TAChart` bietet keine spezielle "`THorizontalBarSeries`", aber die standardmäßige `TBarSeries` kann leicht modifiziert werden, um horizontale Balken zu bekommen. Wie bei jedem andere Nachfahren von `TChartSeries` gibt es auch hier die Eigenschaften `AxisIndexX` und `AxisIndexY`, um anzugeben, welche Achse für die `x` und `y` Koordinaten verantwortlich ist. Setze einfach `AxisIndexX` auf den Index der `LeftAxis` (normalerweise `0`) und `AxisIndexY` auf den Index der `BottomAxis`; das vertauscht die x- und y-Achsen, und die Balkenrichtung wird gedreht. | |
| 113 | + | ||
| 114 | + | Und natürlich muss diesmal die `LabelsChartSource` mit der `Marks.Source` der `LeftAxis` verknüpft werden. Und die Sekundärachse muss entsprechend gehandhabt werden. | |
| 115 | + | ||
| 116 | + | Im Grunde ist das alles, was du brauchst, um ein Diagramm mit horizontalen Balken zu erstellen. | |
| 117 | + | ||
| 118 | + |  | |
| 119 | + | ||
| 120 | + | ## Zusammenfassung | |
| 121 | + | ||
| 122 | + | Schritte zum Erstellen eines Balkendiagramms mit nebeneinander angeordneten Balken: | |
| 123 | + | ||
| 124 | + | - Für jeden Balken ist eine eigene `BarSeries`-Komponente erforderlich. | |
| 125 | + | - Verwende die BarSeries-Eigenschaften `BarWidthPercent` und `BarOffsetPercent`, um die Balken nebeneinander mit oder ohne Überlappung anzuordnen. Die Prozentangaben beziehen sich auf den Abstand zwischen den Mittelpunkten der Balkengruppen. | |
| 126 | + | - Setze für horizontale Balkenreihen den `AxisIndexX` der Reihe auf den Index der `LeftAxis` des Diagramms (normalerweise `0`) und `AxisIndexY` code\> auf den Index der `BottomAxis` (normalerweise `1`). | |
| 127 | + | ||
| 128 | + | ## Quellcode | |
| 129 | + | ||
| 130 | + | Der Quellcode dieses Tutorials ist im Ordner `components/tachart/tutorials/bar_series` deiner *TAChart*-Installation neuerer Lazarus-Versionen verfügbar. | |
| 131 | + | ||
| 132 | + | ### Projektdatei | |
| 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 (vertikale Balken) | |
| 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 (horizontale Balken) | |
| 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/de", as it stood on 2022-12-30 after a change by Wp, 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).* |