TAChart Tutorial: Getting started/de: what changed
Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.
Title: TAChart Tutorial: Getting started/de
| Old | New | Line | |
|---|---|---|---|
| 1 | + | ## Einführung | |
| 2 | + | ||
| 3 | + |  | |
| 4 | + | ||
| 5 | + | Wenn du einen Plot oder Chart in einem Lazarus-Formular benötigst, solltest du einmal einen Blick auf [[TAChart]] werfen. Das ist das von Lazarus standardmäßig dafür zur Verfügung gestellte Package. | |
| 6 | + | ||
| 7 | + | In diesem Tutorial werden wir einige elementare mathematische Funktionen mit TAChart zeichnen. Wir werden ein Diagramm mit drei Liniendatenreihen ("Series") erzeugen für die Funktionen | |
| 8 | + | ||
| 9 | + | - y=cos(x), | |
| 10 | + | - y=sin(x), und | |
| 11 | + | - y=cos(x)*sin(x). | |
| 12 | + | ||
| 13 | + | Vielleicht sollte ich noch die hier immer wieder auftauchenden Begriffe "Series" und "Chart" erläutern: das gesamte Diagramm wird auch als "Chart" bezeichnet (- ist "Chart" im Deutschen ein männliches oder sächliches Substantiv? Ich werde lt. Duden immer von "das Chart" reden). Jede Funktion wird als Kurve dargestellt, und diese wird als "Series", oder eingedeutscht als "Datenreihe" bezeichnet. Die Datenpunkte der Kurve werden durch Linienabschnitte verbunden, deshalb spricht man auch von "Line series" bzw. Liniendatenreihe. Mit TAChart kann man natürlich auch andere Arten von Datenreihen erzeugen, z.b. Balkendatenreihen (Bar series), Flächendatenreihen (Area series) oder aber auch fortgeschrittene Datenreihen für Fit- oder Spline-Kurven. | |
| 14 | + | ||
| 15 | + | ## Was brauchen wir? | |
| 16 | + | ||
| 17 | + | Diese Anleitung wird sehr elementar gehalten sein. Natürlich benötigst du grundlegende Kenntnisse der Programmiersprache Object Pascal und musst mit der Lazarus-Entwicklungsumgebung umgehen können. | |
| 18 | + | ||
| 19 | + | TAChart ist in Lazarus enthalten. Daher musst du dieses Package nicht irgendwo im Internet suchen und musst auch nichts separat installieren. Allerdings, achte darauf, dass deine Lazarus-Version nicht zu alt ist, denn TAChart wird aktiv weiterentwickelt und kann sich von Version zu Version ändern. | |
| 20 | + | ||
| 21 | + | Am besten folgst du diesem Tutorial Schritt für Schritt. Du kannst aber auch den Quellcode des fertigen Projekts am Ende dieses Artikels verwenden. | |
| 22 | + | ||
| 23 | + | ## Ein neues Projekt | |
| 24 | + | ||
| 25 | + |  | |
| 26 | + | ||
| 27 | + | Zu Beginn erzeugen wir in Lazarus ein neues Projekt und wählen dann in der Komponentenpalette den Reiter "Chart". Klicke auf das Icon ganz links, die "TChart"-Komponente, und füge diese dem Formular hinzu. Als Ergebnis siehst du ein leeres Diagramm mit standardisierten x- und y-Achsen. | |
| 28 | + | ||
| 29 | + |  | |
| 30 | + | ||
| 31 | + | ## Datenreihen hinzufügen | |
| 32 | + | ||
| 33 | + | Nun fügen wir Datenreihen hinzu. Zu diesem Zweck, musst du auf das Chart doppel-klicken (oder rechts-klicken und im Kontext-Menü den obersten Eintrag "Datenreihen bearbeiten" auswählen). Nun erscheint der Datenreihen-Editor von TAChart. Es ist noch alles leer, aber wenn du auf "Hinzuf." klickst, klappt ein Menü auf mit allen Arten von Datenreihen, die TAChart zur Verfügung stellt. Wähle "Linien-Diagramm". Wiederhole dies noch zweimal, um ingesamt drei Datenreihen zu erzeugen, die dem Chart zugeordnet werden. Sie sind im Chart noch nicht sichtbar weil sie ja noch keine Daten enthalten. Keine Daten - keine Anzeige. Aber wir werden uns darum gleich kümmern. | |
| 34 | + | ||
| 35 | + |  | |
| 36 | + | ||
| 37 | + | Aber vorher solltest du dir den Objektbaum über dem Objekt-Inspektor ansehen. TAChart benutzt eine ziemlich komplexe Architektur von Klassen und Containern, daher ist es ganz wesentlich, dass du den Objektbaum verstehst. Im aktuellen Zustand unseres Projekts sehen wir die TChart-Komponente und ihre untergeordneten "Kind"-Komponenten: die drei Liniendatenreihen sowie die Achsenliste ("AxisList"), die ihrerseits wiederum die x und y-Achsen als Kinder enthält (als "Bottom" und "Left" bezeichnet). Die Namen der Datenreihen werden nach dem Schema `Chartname<Zahl><Datenreihentyp><Zahl>` erzeugt. | |
| 38 | + | ||
| 39 | + |  | |
| 40 | + | ||
| 41 | + | Aber warum geben wird den Datenreihen nicht aussagekräftigere Namen, wie `SinSeries`, `CosSeries`, und `SinCosSeries`? Zu diesem Zweck klicken wir auf jede Datenreihe im Objektbaum und ändern ihren Namen im entsprechenden Feld im Objektinspektor darunter. | |
| 42 | + | ||
| 43 | + | ## Daten hinzufügen | |
| 44 | + | ||
| 45 | + | Nun wird es Zeit, Daten hinzuzufügen. Die einfachste Methode ist, die Daten zusammen mit dem Formular zu erzeugen. Das heißt, wir schreiben einen Handler für das Ereignis `OnCreate` des Formulars und weisen dort, wie gleich gezeigt wird, der Datenreihe die entsprechenden Daten zu. In einem "echten" Projekt wird man natürlich die Daten bei anderen Gelegenheiten den Datenreihen zuweisen, z.B. nach einem Button-Click, der eine Berechnung oder das Einlesen der Daten von Datei bewirkt hat. | |
| 46 | + | ||
| 47 | + | ``` pascal | |
| 48 | + | procedure TForm1.FormCreate(Sender: TObject); | |
| 49 | + | const | |
| 50 | + | N = 100; | |
| 51 | + | MIN = -10; | |
| 52 | + | MAX = 10; | |
| 53 | + | var | |
| 54 | + | i: Integer; | |
| 55 | + | x: Double; | |
| 56 | + | begin | |
| 57 | + | for i:=0 to N-1 do begin | |
| 58 | + | x := MIN + (MAX - MIN) * i /(N - 1); | |
| 59 | + | SinSeries.AddXY(x, sin(x)); | |
| 60 | + | CosSeries.AddXY(x, cos(x)); | |
| 61 | + | SinCosSeries.AddXY(x, sin(x)*cos(x)); | |
| 62 | + | end; | |
| 63 | + | end; | |
| 64 | + | ``` | |
| 65 | + | ||
| 66 | + | Diese Prozedur erzeugt für jede Datenreihe `N = 100` Datenpunkte. Die x-Werte werden äquidistant zwischen einem Anfangswert Minimum `MIN = -10` und einem Endwert `MAX = +10` berechnet, und die y-Werte ergeben sich aus der betreffenden mathematischen Funktion. Die wichtigen Zeilen sind die Aufrufe der `AddXY`-Methode jeder Datenreihe. Diese Methode erhält die x- und y-Koordinaten jedes Datenpunktes als Parameter und fügt sie einer internen Liste hinzu. Es gibt auch überladene Versionen, bei denen man zusätzlich für jeden Datenpunkt einen Beschriftungstext sowie eine individuelle Farbe angeben kann. Aber dieses Feature brauchen wir hier nicht. | |
| 67 | + | ||
| 68 | + | Die erwähnte Liste ist eine sogenannte ChartSource (übersetzt: "Chart-Datenquelle") - das ist eine Klasse, die die zu plottenden Daten zur Verfügung stellt. Man kann - wie oben - die eingebaute Datenquelle verwenden, oder eine separate mit der Datenreihe verbinden. Es gibt in der Komponenten-Palette eine Vielzahl von Chart-Datenquellen, wie | |
| 69 | + | ||
| 70 | + | - `TListChartSource`, die die Daten in einer Array-ähnlichen Liste speichert (dieser Typ wird von unserer Datenreihe intern verwendet) | |
| 71 | + | - `TDBChartSource`, die die Daten aus den Feldern und Records einer Datenbank holt | |
| 72 | + | - `TUserDefinedChartSource`, die einen sehr allgemeinen Zugriff auf Daten in allen möglichen Strukturen außerhalb des TAChart-Package ermöglicht, z.B. in einem allgemeinen Array benutzer-definierter Records. | |
| 73 | + | - `TCalculatedChartSource`, die die Ergebnisse einer Berechnung der Daten aus einer anderen Chart-Datenquelle zur Verfügung stellt. | |
| 74 | + | ||
| 75 | + | Aber genug über Chart-Datenquellen - die eingebaute Quelle ist für dieses einführende Projekt völlig ausreichend. | |
| 76 | + | ||
| 77 | + |  | |
| 78 | + | ||
| 79 | + | Ok, kompilieren wir das Programm... Wir sehen die drei Kurven, und die x-Achse erstreckt sich automatisch über den Bereich der x-Werte zwischen -10 und +10. Nicht schlecht für den Anfang, aber noch verbesserungswürdig: Das Diagramm ist sehr verwirrend, wir können nicht zwischen den einzelnen Linien unterscheiden, man kann nicht sagen, welche Datenreihe zu welcher Funktion gehört. | |
| 80 | + | ||
| 81 | + | ## Datenreihen formatieren | |
| 82 | + | ||
| 83 | + | Warum ändern wir nicht die Farbe jeder einzelnen Datenreihe? Dafür muss man nur im Objekt-Baum jede Datenreihe auswählen und dann im darunterligenden Objekt-Inspektor die Eigenschaft `SeriesColor` ("Datenreihen-Farbe") so ändern, wie wir wollen. `SeriesColor` bezeichnet die Farbe der Verbindungslinien zwischen den einzelnen Datenpunkten. | |
| 84 | + | ||
| 85 | + | Wenn du jetzt neu kompilierst, siehst du die Datenreihen in Farbe. Aber man kann immer noch nicht unterscheiden, welche Datenreihe sich auf welche Funktion bezieht. Wir brauche eine Legende! | |
| 86 | + | ||
| 87 | + | ## Eine Legende hinzufügen | |
| 88 | + | ||
| 89 | + | Wähle das Chart an. Scrolle im Objektinspektor nach unten zur Eigenschaft `Legend`, öffne die untergeordneten Eigenschaften. Am Ende der Liste findest du die Eigenschaft `Visible` ("sichtbar"), die standardmäßig auf `false` steht. OK - stelle sie auf `true` und kompiliere neu. | |
| 90 | + | ||
| 91 | + |  | |
| 92 | + | ||
| 93 | + | Es wird besser. Was noch fehlt, ist ein erklärender Text für jede Datenreihe, etwas wie `y = sin(x)`. Kein Problem! Für diesen Zweck hat jede Datenreihe eine Eigenschaft `Title` - das ist der Text, der stellvertretend für die Datenreihe in der Legende erscheint, zusammen mit einem Symbol für das Aussehen der Datenreihe. Also: gehe nochmals alle Datenreihen durch und gib im Objektinspektor jeweils für `Title` die folgenden Texte ein: `y=sin(x)`, `y=cos(x)`, and `y=sin(x)*cos(x)`. | |
| 94 | + | ||
| 95 | + |   | |
| 96 | + | ||
| 97 | + | Wenn du jetzt neu kompiliert, ist das Chart fast perfekt. Fast - weil die Legende relativ groß ist und das Diagramm im verfügbaren Platz zusammenquetscht. Natürlich könnte man das Formular mit dem Diagramm vergrößern. Aber könnte man stattdessen nicht die Legende unterhalb des Charts anordnen? Kein Problem: Gehe zurück zur Chart-Eigenschaft `Legend` und setzte die Eigenschaft `Alignment` ("Ausrichtung") auf `laBottomCenter` ("unten Mitte"). Du solltest auch `ColumnCount` ("Spaltenanzahl") auf 3 setzen, damit die drei Einträge nebeneinander, als 3 Spalten, dargestellt werden. | |
| 98 | + | ||
| 99 | + |  | |
| 100 | + | ||
| 101 | + | Ah! -- der dritte Legendeneintrag wird abgeschnitten, weil das Fenster nicht breit genug ist. Setze die Eigenschaft `Align` ("Ausrichten") des Chart auf `alClient` und vergrößere die Fensterbreite ein bisschen. | |
| 102 | + | ||
| 103 | + | ## Feinabstimmung | |
| 104 | + | ||
| 105 | + | Ein paar wenige Dinge kann man noch verbessern: Die Achsen sollten einen Titel haben, etwa "x-Achse" and "y-Achse", und über dem Chart sollte auch ein Titel stehen. | |
| 106 | + | ||
| 107 | + | Um den **Titel der x-Achse** festzulegen, wähle im Objekt-Baum den Eintrag `Bottom` of the `AxisList`-Kindkomponente des Chart, oder gehe im Objektinspektor zum Eintrag `Bottom axis`. Klappe die Untereigenschaften auf, wo das Feld `Title` zu finden ist. Diese Eigenschaft hat ihrerseits weitere untergeordnete Eigenschaften. Der Text im Feld `Caption` ("Beschriftung") ist das, was wir suchen - dieser Text wird als Beschriftung an der Achse angezeigt. Vergiss nicht, `Visible` auf `true` zu setzen, damit die Beschriftung auch wirklich angezeigt wird. Natürlich kannst du auch die Schriftart z.b. auf fett umstellen: die zugehörige Eigenschaft findest du etwas weiter oben unter `LabelFont` und `Style`. | |
| 108 | + | ||
| 109 | + | Wiederhole dieses Vorgehen mit der **Titel der y-Achse** (`Left axis`). Und im wesentlichen dieselbe Prozedur gilt auch für den **Chart-Titel**: Scrolle zur Chart-Eigenschaft `Title` ("Titel"), und tippe den Titel ins Feld `Text` ein (wo auch mehrzeiliger Text möglich ist). Nicht vergessen: `Visible` auf `true` setzen. | |
| 110 | + | ||
| 111 | + | Und zum Schluss: Wie wär's mit einem weißen **Hintergrund für die durch die Achsen aufgespannte Chart-Fläche**? Dafür ist die Eigenschaft `BackColor` des Chart zuständigt. Und vielleicht sollte das **Gitternetz der Achsen** weniger deutlich hervortreten? Stelle dazu die Eigenschaft `Grid.Color` jeder Achse auf die Farbe `clSilver` um. | |
| 112 | + | ||
| 113 | + | ## Fertig! | |
| 114 | + | ||
| 115 | + | Zum Schluss sieht unser Chart so aus. Toll, nicht? Und es war eigentlich gar nicht schwierig... | |
| 116 | + | ||
| 117 | + | Wenn du mehr über TAChart lernen willst, solltest du dir die [[TAChart documentation|offizielle Dokumentation]] ansehen und mit einigen der vielen Demos spielen, die zu TAChart gehören. Du findest sie im Ordner *components\tachart\demo* deiner Lazarus-Installation. | |
| 118 | + | ||
| 119 | + |  | |
| 120 | + | ||
| 121 | + | ## Quellcode | |
| 122 | + | ||
| 123 | + | Der Quellcode dieses Tutorials steht auch im Ordner *tutorials/getting_started* neuerer TAChart-Installationen. | |
| 124 | + | ||
| 125 | + | ### Projekt-Datei (.lpr) | |
| 126 | + | ||
| 127 | + | ``` pascal | |
| 128 | + | program project1; | |
| 129 | + | ||
| 130 | + | {$mode objfpc}{$H+} | |
| 131 | + | ||
| 132 | + | uses | |
| 133 | + | {$IFDEF UNIX}{$IFDEF UseCThreads} | |
| 134 | + | cthreads, | |
| 135 | + | {$ENDIF}{$ENDIF} | |
| 136 | + | Interfaces, // this includes the LCL widgetset | |
| 137 | + | Forms, Unit1, tachartlazaruspkg | |
| 138 | + | { you can add units after this }; | |
| 139 | + | ||
| 140 | + | {$R *.res} | |
| 141 | + | ||
| 142 | + | begin | |
| 143 | + | RequireDerivedFormResource := True; | |
| 144 | + | Application.Initialize; | |
| 145 | + | Application.CreateForm(TForm1, Form1); | |
| 146 | + | Application.Run; | |
| 147 | + | end. | |
| 148 | + | ``` | |
| 149 | + | ||
| 150 | + | ### Unit1.pas | |
| 151 | + | ||
| 152 | + | ``` pascal | |
| 153 | + | unit Unit1; | |
| 154 | + | ||
| 155 | + | {$mode objfpc}{$H+} | |
| 156 | + | ||
| 157 | + | interface | |
| 158 | + | ||
| 159 | + | uses | |
| 160 | + | Classes, SysUtils, FileUtil, TAGraph, TASeries, Forms, Controls, Graphics, | |
| 161 | + | Dialogs; | |
| 162 | + | ||
| 163 | + | type | |
| 164 | + | ||
| 165 | + | { TForm1 } | |
| 166 | + | ||
| 167 | + | TForm1 = class(TForm) | |
| 168 | + | Chart1: TChart; | |
| 169 | + | SinSeries: TLineSeries; | |
| 170 | + | CosSeries: TLineSeries; | |
| 171 | + | SinCosSeries: TLineSeries; | |
| 172 | + | procedure FormCreate(Sender: TObject); | |
| 173 | + | private | |
| 174 | + | { private declarations } | |
| 175 | + | public | |
| 176 | + | { public declarations } | |
| 177 | + | end; | |
| 178 | + | ||
| 179 | + | var | |
| 180 | + | Form1: TForm1; | |
| 181 | + | ||
| 182 | + | implementation | |
| 183 | + | ||
| 184 | + | {$R *.lfm} | |
| 185 | + | ||
| 186 | + | { TForm1 } | |
| 187 | + | ||
| 188 | + | procedure TForm1.FormCreate(Sender: TObject); | |
| 189 | + | const | |
| 190 | + | N = 100; | |
| 191 | + | MIN = -10; | |
| 192 | + | MAX = 10; | |
| 193 | + | var | |
| 194 | + | i: Integer; | |
| 195 | + | x: Double; | |
| 196 | + | begin | |
| 197 | + | for i:=0 to N - 1 do begin | |
| 198 | + | x := MIN + (MAX - MIN) * i / (N - 1); | |
| 199 | + | SinSeries.AddXY(x, sin(x)); | |
| 200 | + | CosSeries.AddXY(x, cos(x)); | |
| 201 | + | SinCosSeries.AddXY(x, sin(x)*cos(x)); | |
| 202 | + | end; | |
| 203 | + | ||
| 204 | + | end; | |
| 205 | + | ||
| 206 | + | end. | |
| 207 | + | ``` | |
| 208 | + | ||
| 209 | + | ### Unit.lfm | |
| 210 | + | ||
| 211 | + | ``` pascal | |
| 212 | + | object Form1: TForm1 | |
| 213 | + | Left = 14 | |
| 214 | + | Height = 244 | |
| 215 | + | Top = 137 | |
| 216 | + | Width = 347 | |
| 217 | + | Caption = 'Form1' | |
| 218 | + | ClientHeight = 244 | |
| 219 | + | ClientWidth = 347 | |
| 220 | + | OnCreate = FormCreate | |
| 221 | + | LCLVersion = '1.1' | |
| 222 | + | object Chart1: TChart | |
| 223 | + | Left = 0 | |
| 224 | + | Height = 244 | |
| 225 | + | Top = 0 | |
| 226 | + | Width = 347 | |
| 227 | + | AxisList = < | |
| 228 | + | item | |
| 229 | + | Grid.Color = clSilver | |
| 230 | + | Minors = <> | |
| 231 | + | Title.LabelFont.Orientation = 900 | |
| 232 | + | Title.LabelFont.Style = [fsBold] | |
| 233 | + | Title.Visible = True | |
| 234 | + | Title.Caption = 'y axis' | |
| 235 | + | end | |
| 236 | + | item | |
| 237 | + | Grid.Color = clSilver | |
| 238 | + | Alignment = calBottom | |
| 239 | + | Minors = <> | |
| 240 | + | Title.LabelFont.Style = [fsBold] | |
| 241 | + | Title.Visible = True | |
| 242 | + | Title.Caption = 'x axis' | |
| 243 | + | end> | |
| 244 | + | BackColor = clWhite | |
| 245 | + | Foot.Brush.Color = clBtnFace | |
| 246 | + | Foot.Font.Color = clBlue | |
| 247 | + | Legend.Alignment = laBottomCenter | |
| 248 | + | Legend.ColumnCount = 3 | |
| 249 | + | Legend.Visible = True | |
| 250 | + | Title.Brush.Color = clBtnFace | |
| 251 | + | Title.Font.Color = clBlue | |
| 252 | + | Title.Font.Style = [fsBold] | |
| 253 | + | Title.Text.Strings = ( | |
| 254 | + | 'My first chart' | |
| 255 | + | ) | |
| 256 | + | Title.Visible = True | |
| 257 | + | Align = alClient | |
| 258 | + | ParentColor = False | |
| 259 | + | object SinSeries: TLineSeries | |
| 260 | + | Title = 'y=sin(x)' | |
| 261 | + | LinePen.Color = clRed | |
| 262 | + | end | |
| 263 | + | object CosSeries: TLineSeries | |
| 264 | + | Title = 'y=cos(x)' | |
| 265 | + | LinePen.Color = clBlue | |
| 266 | + | end | |
| 267 | + | object SinCosSeries: TLineSeries | |
| 268 | + | Title = 'y=sin(x)*cos(x)' | |
| 269 | + | LinePen.Color = clGreen | |
| 270 | + | end | |
| 271 | + | end | |
| 272 | + | end | |
| 273 | + | ``` | |
| 274 | + | ||
| 275 | + | --- | |
| 276 | + | *From the Free Pascal wiki, page "TAChart Tutorial: Getting started/de", as it stood on 2020-02-29 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).* |