Sign in Join
Wiki copytemporary

TAChart Tutorial: Chart Tools/de: what changed

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

Title: TAChart Tutorial: Chart Tools/de

OldNewLine
1+## Einführung
2+
3+![](/wiki-images/c/c6/ZoomPan06.png)
4+
5+Charts sind leistungsfähige Werkzeuge, um Beziehungen zwischen Daten darzustellen. Sie sind besonders mächtig, wenn der Benutzer mit ihnen interaktiv arbeiten kann, zum Beispiel:
6+
7+- in eine Datenreihe mit sehr, sehr vielen Datenpunkten **hineinzoomen**, um mehr Details zu sehen,
8+- den sichtbaren Ausschnitt **verschieben**,
9+- **Anzeigen von Datenwerten** für die Datenreihen, oder Bestimmen von charakterischen Parametern aus dem Plot.
10+
11+Das [[TAChart]] Package ist mit einer leistungsfähigen Sammlung von Werkzeugen ausgestattet, die hilfreich sind für die Erstellung interaktiver Charts. In diesem Tutorial wollen wir zeigen, wie man diese Werkzeuge anwenden kann.
12+
13+Wenn du nicht mit TAChart vertraut bist, empfehlen wir dir, einen Blick auf das [[TAChart Tutorial: Getting started|"Getting started"-Tutorial]] zu werfen. Natürlich musst du grundlegende Erfahrung im Umgang mit Lazarus und FPC haben.
14+
15+## Vorbereitung
16+
17+Zunächst brauchen wir einen Chart, mit dem wir spielen können. Statt einen Chart neu zu erzeugen, verwenden wir den im Tutorial [[TAChart Tutorial: Getting started|Getting started]] erzeugten einfachen Chart. In diesem Projekt hatten wir mit Hilfe von `TLineSeries`-Komponenten mathematischen Funktionen für x zwischen -10 and 10 graphisch dargestellt. Die Datenwerte wurden in der internen `ListChartSource` jeder Datenreihe gespeichert. Kopiere die Projekt-Dateien (`project1.lpi, project1.lpr, unit1.pas, unit1.lfm`) in einen separaten Ordner für das neue Tutorial.
18+
19+![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
20+
21+## Zoomen und Verschieben - der leichte Weg
22+
23+### Zoomen
24+
25+Das Erzeugen einer Ausschnittsvergrößerung eines Charts wollen wird mit dem englischen Wort "Zoomen" bezeichnen. Das ist ein ganz einfacher Vorgang -- man muss dafür keine einzige Zeile Code schreiben, denn diese Möglichkeit ist schon intern in der `TChart`-Komponente eingebaut. Der Benutzer muss nur mit gedrückter **linker** Maus-Taste um das zu vergrößernde Detail herum ein Rechteck aufziehen. Wichtig ist, dass die Maus von der Ecke links/oben zur Ecke rechts/unten gezogen werden muss, um den Zoom-Effekt zu erhalten. Wenn die Maustaste losgelassen wird, wird der Inhalt des Rechtecks vergrößert und füllt dann den kompletten Chart aus. Einfach.
26+
27+![](/wiki-images/3/34/ZoomPan01.png) ![](/wiki-images/f/f8/ZoomPan02.png)
28+
29+Man kann diesen Vorgang wiederholen, um tiefer und tiefer in den Chart hineinzuzoomen.
30+
31+Um zur originalen, unvergrößerten Ansicht zurückzukehren, klickt man einfach mit der linken Maustaste irgendwo in den Chart oder zieht die Maus mit gedrückter linker Taste in beliebige Richtung - natürlich nicht von links/oben nach rechts/unten, denn das würde weiter hineinzoomen.
32+
33+Falls du aus irgendeinem Grund das Zoomen verbieten möchtest, kannst du die `TChart`-Eigenschaft `AllowZoom` auf `False` schalten. Darüber hinaus gibt es es keine Möglichkeit, das eingebaute Zoom-Verhalten zu beeinflussen. Aber nicht verzagen: etwas weiter unten diskutieren wir die *Chart-Tools*, und damit hat man fast unbegrenzte Möglichkeiten, mit dem Chart zu interagieren.
34+
35+### Verschieben
36+
37+Nachdem du in den Chart hineingezoomt hast, willst du vielleicht den Ausschnitt etwas verschieben, um eine bessere Ansicht zu finden. Dieses Verschieben wird auf Englisch als "Panning" bezeichnet. Auch hier gibt es in `TChart`-Komponente schon eine eingebaute Methode: Verschiebe die Maus mit gedrückter **rechter** Maustaste, und der sichtbare Ausschnitt folgt der Bewegung der Maus. Weitere Kontrollmöglichkeiten hat man mit Hilfe der *Chart-Tools*.
38+
39+![](/wiki-images/8/8b/ZoomPan03.png)
40+
41+Genauso wie beim Zoomen kann man auch hier den Originalausschnitt wiederherstellen, indem man mit der Maus irgendwo in den Chart klickt, oder die Maus mit gedrückter linker Taste in beliebige Richtung zieht (außer von links/oben nach rechts/unten). Bitte beachte, dass man hier die linke Maustaste verwendet, obwohl das Verschieben mit der rechten Maustaste erfolgt ist.
42+
43+Seit Lazarus v2.1+ hat `TChart` eine Eigenschaft `AllowPanning` mit der man das eingebaute Verschieben unterbinden kann. Wie wir aber gleich sehen werden, kann man das Verschieben auch mit Hilfe der *Chart-Tools* ausschalten, so dass ältere Lazarus-Versionen hier keinen Nachteil haben.
44+
45+## Grundlegendes über die Chart-Tools
46+
47+### Was sind die Chart-Tools?
48+
49+Wie du gesehen hast, kann die Programmierung der Zoom- und Panning-Möglichkeiten nicht einfacher sein -- man muss gar nichts tun, diese Möglichkeiten sind schon vorhanden. Aber andererseits sind die eingebauten Routinen recht eingeschränkt: Zoomen funktioniert nur mit Hilfe der linken Maustaste, Verschieben nur mit Hilfe der rechten, es gibt keine Unterstützung des Mausrades, das Zoomen/Verschieben kann nicht auf die horizontale oder vertikale Richtung beschränkt werden, Datenwerte könnten nicht ausgelesen werden, usw, usf.
50+
51+Für vielseitige Möglichkeiten der Benutzerinteraktion wurden mehrere [[TAChart documentation|Chart-Tools]] der `TAChart`-Bibliothek hinzugefügt. Jedes Werkzeug ist für eine bestimmte Aufgabe spezialisiert. Aus Benutzersicht gibt es zwei Typen von Werkzeugen: [[TAChart documentation|Wertebereichs-Tools]] und [[TAChart documentation|Daten-Tools]].
52+
53+- [[TAChart documentation|Wertebereichs-Tools]] verändern den **Wertebereich** des Chart -- das ist das durch die Achsen definierte Sichtfenster auf die Daten. Sie sind zuständig für das Zoomen und Verschieben. Für das Zoomen kann man wählen zwischen [[TAChart documentation|TZoomDragTool]], [[TAChart documentation|TZoomClickTool]] uder [[TAChart documentation|TZoomMouseWheelTool]]. Für das Verschieben gibt es das [[TAChart documentation|TPanDragTool]], [[TAChart documentation|TPanClickTool]] und das [[TAChart documentation|TPanMouseWheelTool]]. Beachte, dass es keine speziellen Werkzeuge gibt, um das Zoomen/Verschieben rückgängig zu machen - diese Möglichkeit ist schon eingebaut.
54+- [[TAChart documentation|Daten-Tools]] ermöglichen interaktiven Zugang auf die Daten, die in den Datenreihen dargestellt sind, oder ermöglichen es sogar, die Daten zu bearbeiten: es gibt ein [[TAChart documentation|TDataPointClickTool]], [[TAChart documentation|TDataPointDragTool]], [[TAChart documentation|TDataPointHintTool]], [[TAChart documentation|TDataPointCrosshairTool]] und ein [[TAChart documentation|TDataPointDistanceTool]].
55+- Falls keines dieser Werkzeuge für den gewünschten Zweck in Frage kommt, gibt es noch das [[TAChart documentation|TUserDefinedTool]], mit dessen Hilfe man sich das erforderliche Verhalten selbst programmieren kann.
56+
57+### Eigenschaften der Chart-Tools
58+
59+All diese Werkzeuge haben eine Eigenschaft namens **`Shift`**, die eine Menge von "Tasten-Codes" enthält, mit denen das Tool aktiviert werden kann. Dies sind die in der LCL standardmäßig vorhandenen Elemente der Aufzählung `TShiftState`.
60+
61+Ein Beispiel: Wenn die `Shift`-Eigenschaft des Tools die Elemente `ssCtrl` und `ssLeft` enthält, dann wird das Tool aktiv, wenn der Benutzer die `Ctrl`-Taste *und* die linke Maustaste drückt. Beachte, dass alle Bedingungen erfüllt sein müssen, das Werkzeug wird nicht aktiv, falls nur die linke Maustaste allein gedückt wird. Jedes Werkzeug muss seine eigene, eindeutige Kombination von `Shift`-Kombinationen haben.
62+
63+Eine Bemerkung über die `Shift`-Werte, die der Tastatur zugeordnet sind: Um Nachrichten über Tastaturereignisse erhalten zu können, muss der Chart fokussiert sind. Falls Werkzeuge nicht wie erwartet funktionieren, versuche, `Chart.SetFocus` aufzurufen; dadurch wird der Chart automatisch fokussiert, wenn der Benutzer die Maus in den Chart bewegt. Der Nachteil der `AutoFocus`-Methode darf aber nicht unerwähnt bleiben: wenn der Benutzer gerade Text z.B. in ein Memo eintippt, die Maus über den Chart bewegt und dann weitertippen möchte, hat das Memo den Fokus verloren, und nachfolgende Tastendrücke werden ignoriert...
64+
65+Es gibt eine weitere Bedingung, die erfüllt sein muss, damit ein Tool aktiv wird: Seine Eigenschaft **`Enabled`** muss auf `true` gesetzt sein (aber das ist die Default-Einstellung). Diese Eigenschaft ist nützlich, wenn mehrere Tools sich dieselben `Shift`-Kombinationen teilen und durch anderen Code aktiviert werden sollen, z.B. durch Klicken auf Buttons auf einer Toolbar.
66+
67+Alle Werkzeuge haben verschiedene **Ereignisse** gemeinsam, die erzeugt werden, bevor oder nachdem eine Taste oder eine Maus-Taste gedrückt oder losgelassen wurde. Bei der Maus werden auch Ereignisse ausgelöst, bevor und nachdem die Maus bewegt wurde. Normalerweise funktionieren die Chart-Tools, ohne dass diese Ereignisse behandelt werden. Aber sie sind nötig, wenn zusätzliche Funktionalität bereitgestellt werden soll. Wir werden dazu weiter unten in diesem Tutorial ein Beispiel finden.
68+
69+### TChartToolset
70+
71+![](/wiki-images/9/9c/TChartToolset-Icon2.png)
72+
73+Alle Chart-Tools sind einer speziellen Komponenten zusammengeführt, `TChartToolset`. Sie befindet sich auf der Komponentenpalette irgendwo in der Mitte der *Chart*-Seite und hat das Icon mit dem roten Schraubenzieher.
74+
75+Die `TChartToolset`-Komponente ermöglicht die Kommunikation zwischen den einzelnen Tools und derm Chart. Aus diesem Grund hat der Chart eine Eigenschaft `Toolset`, die man mit der `TChartToolset`-Instanz verbinden muss. Beachte, dass das eine 1:n-Beziehung ist, d.h. ein Toolset kann von mehreren Charts verwendet werden - ein schönes Feature! Ich sollte auch erwähnen, dass ich häufig vergesse, diese Verbindung herzustellen -- und als Folge einige Zeit aufwenden muss, um herauszufinden, warum die Werkzeuge nicht funktionieren...
76+
77+## Zoomen mit dem Mausrad
78+
79+Aber jetzt genug mit der Theorie! Es ist Zeit für ein praktisches Beispiel.
80+
81+Zunächst sollten wir die Werkzeuge zu unserem Demo-Chart hinzufügen. Zu diesem Zweck benötigen wir ein `TChartToolset` ![](/wiki-images/4/40/TChartToolset-Icon.png). Setze diese Komponente auf das Formular und verbinde sie mit der Eigenschaft `Toolset` des Chart.
82+
83+Obwohl wir noch gar keine Workzeuge im `Toolset` angelegt haben, ist jetzt vielleicht ganz lehrreich, das Programm zu kompilieren und laufen zu lassen. Versuche, so wie eingangs erwähnt, in den Chart zu zoomen oder den Ausschnitt zu verschieben. Oh -- funktioniert nicht mehr! Das ist eine wichtige Beobachtung: Dadurch dass wir ein `TChartToolset` mit dem Chart verbunden haben, wurde das im Chart eingebaute Toolset ersetzt. Aus diesem Grund funktionieren die eingebauten Werkzeuge für Zoomen und Panning nicht mehr.
84+
85+Um diese Funktionen wieder zu ermöglichen, müssen wir ein oder mehrere Tools für Zoomen und Verschieben in die `Toolset`-Komponente einbauen.
86+
87+Was wollen wir erreichen? Vielleicht könnten wir statt der linken und rechten Maustaste das Mausrad für Zoomen/Verschieben verwenden? Und wir könnten mit der nun freigewordenen linken Maustaste ein Tool aktivieren, mit dem man durch Klicken auf einen Datenpunkt dessen Werte auslesen und anzeigen kann.
88+
89+Um für das Zoomen ein Mausrad-Tool zu verwenden, musst du auf dem `ChartToolset1` auf dem Formular oder im Objekt-Baum des Objekt-Inspektores doppelklicken, oder mache jeweils dort einen Rechtsklick und wähle den Eintrag "Werkzeuge bearbeiten" - genauso wie man bei allen Collection-Editoren von TAChart vorgeht. Drücke auf den *"+ Hinzuf"*-Schalter und wähle *"Zoomen mit Mausrad"* aus der heruntergeklappten Liste. Damit erscheint ein neues Element `ChartToolset1ZoomMousewheelTool1` im Objekt-Baum als Kind-Knoten des `ChartToolset1`.
90+
91+![](/wiki-images/2/29/ChartToolset_Editor.png)
92+
93+Wenn man jetzt das Programm laufen lassen würde, dann würde das Zommen immer noch nicht funktionieren, denn das Werkzeug hat Eigenschaften `ZoomFactor` and `ZoomRatio`, die die Zoomstufen pro Mausrad-Raste definieren. Und diese Eigenschaften stehen immer noch auf ihrem Default-Wert `1`. Also: Setze `ZoomFactor` auf den Wert `1.1` und starte des Programm: Jetzt funktioniert das Zoomen.
94+
95+Wenn die das Mausrad zu dir herdrehst, wird der Chart vergrößert, genauso wie wenn du den Bildschirm zu dir heranziehen würdest. Viele Programme arbeiten anders herum: bei der genannten Drehung wird der Chart immer kleiner, wie wenn du dich vom Chart wegbewegen würdest. Wenn du dieses Verhalten bevorzugst, dann musst du den `ZoomFactor` auf eine Zahl kleiner als `1` setzen, zum Beispiel auf `0.9`. (Für den Rest des Tutorials werden wir aber beim Wert 1.1. bleiben).
96+
97+#### Einige Eigenschaften
98+
99+Sehen wir uns nun einige Properties des Mausrad-Zoom-Werkzeugs an: Es gibt ein `AnimationInterval` und `AnimationsSteps` - mit denen kann man eine Animation des Zoom-Effekts erzeugen.
100+
101+Was ist `FixedPoint`? Wenn dieser Wert `true` ist, geht das Zoomen von der Position des Maus-Cursors aus. Wenn man also eine bestimmte Struktur im Chart vergrößern will, kann man hier die Maus auf diese Struktur bewegen und dann das Mausrad drehen. Bei `false` ist das Zoomen immer auf das Zentrum des Chart bezogen; die Position des Maus-Cursors spielt dann keine Rolle. In diesem Fall muss man aber sehr sorgfältig sein, denn man kann auf diese Weise leicht die Orientierung im Chart verlieren.
102+
103+#### Verwendung von ExtentSizeLimit
104+
105+![](/wiki-images/a/a3/ZoomPan04.png)
106+
107+Wenn man aus einem Chart herauszoomt, wird der Chart immer kleiner, und es werden Bereiche sichtbar, die keine Daten mehr enthalten. Da der Benutzer beliebig weit herauszoomen kann, ist irgendwann der eigentliche Datenbereich des Charts nicht mehr erkennbar. Um das zu verhindern, sollten wir den Achsenbereich so begrenzen, dass auf jeden Fall immer Daten angezeigt werden.
108+
109+Zu diesem Zweck hat TAChart die Eigenschaft **`ExtentSizeLimit`**. Unser Chart erstreckt sich in der *x*-Richtung zwischen `-10` und `10`. Daher setzen wir `ExtentSizeLimit.XMax` auf die Differenz `20` und aktivieren diese Einstellung mit `ExtentSizeLimit.UseXMax = true`. Jetzt können wir nicht mehr aus dem ursprünglichen *x* Bereich herauszoomen. Analog sollten wir auch den Bereich der *y*-Achse auf `2` begrenzen.
110+
111+Auf dieselbe Weise könnten wir verhindern, dass zu tief in den Chart hineingezoomt wird und die *x*-Achse einen Bereich von weniger als z.B. `0.01` umfasst. Dafür würden wir entsprechend die Eigenschaften `ExentSizeLimit.XMin` und `ExtentSizeLimit.UseXMin` verwenden.
112+
113+#### Horizontales und vertikales Zoomen
114+
115+Warum eigentlich gibt es zwei Parameter für die Kontrolle des Zoomens, **`ZoomFactor`** und **`ZoomRatio`**? Der Grund dafür ist, dass man auf diese Weise einen nicht-proportionalen Zoom-Effekt erzeugen kann, so dass sich z.B. der Chart nur in der horizontalen Richtung verkleinert, ohne sich in der vertikalen Dimension zu verändern. Um das zu verstehen, betrachten wir die *x* und *y* Richtungen getrennt. Der Zoom-Faktor für die *x*-Richtung wird durch den Wert von `ZoomFactor` allein definiert, während der Zoom-Faktor für die *y*-Richtung durch das Produkt `ZoomFactor*ZoomRatio` bestimmt wird. Solange `ZoomRatio=1` ist, geschieht das Zoomen isotrop in alle Richtungen. Wenn wir `ZoomFaktor=1` und `ZoomRatio=1.1` setzen, lassen wir die *x*-Richtung unverändert, aber zoomen nur in *y*-Richtung. Oder umgekehrt, wenn wir `ZoomRatio = 1/ZoomFactor` setzen, erfolgt das Zoomen nur entlang der *x*-Richtung.
116+
117+Hey -- das wäre eine schöne Bereicherung für unser Programm! Wenn wir uns auf der Tastatur die Lage der Tasten `SHIFT`, `Ctrl` and `Alt` ansehen, dann erinnern diese an die Achsen eines Koordinatensystems: `Ctrl` ist der Ursprung, `SHIFT` stellt die *y*- und `Alt` die *x*-Richtung dar. Daher könnten wir der `SHIFT`-Taste das vertikale Zoomen und der `Alt`-Taste das horizontale Zoomen zuordnen; und "keine Taste" würde dem Fall des isotropen Zoomens entsprechen -- das wäre eine gute "Eselsbrücke", um sich die Tastenkombinationen merken zu können.
118+
119+Wie kann man das implementieren? Setze zwei ZoomMouseWheelTools auf das Formular. Das erste ist für das vertikale Zoomen zuständig. Daher nenne es `ChartToolset1ZoomMousewheelTool_vert`, weise ihm dem `Shift`-Wert `ssShift` zu und setze `ZoomRatio = 1.1` (lasse `ZoomFactor` auf `1`). Das andere Tool soll für das horizontale Zoomen sorgen. Nenne es `ChartToolset1ZoomMousewheelTool_hor`, setze `Shift` auf `ssAlt` und `ZoomFactor = 1.1` und `ZoomRatio = 0.90909090909` ((das ist ungefähr gleich `1/1.1`).
120+
121+Wenn du das Programm laufen lässt, bemerkst du vielleicht, dass das Zoomen nicht mehr funktioniert, nachdem du die `Alt`-Taste gedrückt hast. Das liegt daran, dass diese Taste auch für die Behandlung von Menü-Tasten verwendet wird. Klicke einfach in den Chart, um das Zoom-Tool zu reaktivieren. Oder wähle eine andere Aktivierungstaste für das horizontale Zoom-Tool.
122+
123+## Verschieben mit dem Mausrad
124+
125+Machen wir weiter mit den Verschieben ("Panning"). Warum eigentlich verwenden wir nicht das Mausrad auch für diesen Zweck? Das Verschieben soll nur entlang der Achsenrichtungen möglich sein, also entweder in *x*- oder in *y*-Richtung. Daher fügen wir zwei `TPanMouseWheel`-Komponenten zum `ChartToolset` hinzu und ersetzen im Komponenten-Namen die automatisch angehängten Nummern durch "_hor" und "_vert". Das Tool für das vertikale Verschieben soll wieder mit der `Umsch` Taste, das für das horizontale Veschieben mit der `Alt` Taste aktiviert werden.
126+
127+Zur Festlegung der Verschiebungsrichtung gibt es eine Eigenschaft `WheelUpDirection` mit Default-Wert `pdUp`. Das bedeutet, dass die Drehung am Mausrad in vertikales Verschieben übersetzt wird. Diese Einstellung muss beim Werkzeug für die horizontale Verschiebung auf `pdRight` or `pdLeft` geändert werden.
128+
129+Starte des Programm. Wenn du am Mausrad mit gedrückter `Umsch` oder `Alt` Taste drehst, verschiebt sich der Chart aber nicht, sondern verändert sein Größe wie beim Zoomen... Was ist falsch?
130+
131+Das liegt daran, dass wir für die Zoom- und Verschiebungstools dieselben `Shift`-Einstellungen verwenden. Als Ausweg könnten wir bei den Verschiebungstools zusätzlich auch noch die Einstellung `Strg` zu den `Shift`-Einstellungen hinzufügen. Damit würde das vertikale Verschieben zum Beispiel mit der Tastenkombination `Strg`+`Umsch` aktiviert, das vertikale Zoomen dagegen würde nur `Umsch` allein benötigen.
132+
133+Das ist in der Bedienung aber etwas umständlich. Daher zeigen wir hier einen anderen Ansatz, auch um die Verwendung der Eigenschaft `Enabled` zu demonstrieren. Füge dem Formular eine `Toolbar` mit zwei `ToolButtons` hinzu, die entweder das Zoomen oder das Verschieben einschalten sollen. Nenne den ersten Button `ZoomToolbutton` und setze sein `Down`-Eigenschaft auf `true`. Nenne den zweiten Button entsprechend `PanToolbutton`, aber lasse sein `Down` auf `false`. Außerdem setze bei beiden Schaltern die folgenden Eigenschaften:
134+
135+- `Grouped = true`
136+- `Style = tbsCheck`
137+
138+und weise ihrem `OnClick`-Ereignis den folgenden Code zu:
139+
140+``` pascal
141+procedure TForm1.ZoomPanToolbuttonClick(Sender: TObject);
142+begin
143+ ChartToolset1ZoomMouseWheelTool_iso.Enabled := ZoomToolbutton.Down;
144+ ChartToolset1ZoomMouseWheelTool_vert.Enabled := ZoomToolbutton.Down;
145+ ChartToolset1ZoomMouseWheelTool_hor.Enabled := ZoomToolbutton.Down;
146+
147+ ChartToolset1PanMouseWheelTool_vert.Enabled := PanToolbutton.Down;
148+ ChartToolset1PanMouseWheelTool_hor.Enabled := PanToolbutton.Down;
149+end;
150+```
151+
152+Das schaltet entweder die Zoom- oder die Verschiebungs-Tools ein, je nachdem welcher `ToolButton` gedrückt ist. Damit die `Enabled`-Einstellungen sich in den `Down`-Eigenschaften der `ToolButtons` widerspiegeln, sollten wir noch die beiden Verschiebungs-Tools ausschalten (`Enabled = false`) -- oder die Methode `ZoomPanToolbuttonClick(nil)` im `OnCreate` Ereignis des Formulars aufrufen.
153+
154+Einige Beobachtungen, wenn das Programm läuft:
155+
156+- Es ist Geschmackssache, aber vielleicht bist du auch der Meinung, dass sich der gezoomte Chart-Ausschnitt entgegengesetzt zu der Richtung verschiebt, in der das Mausrad gedreht wird? Das kann man ändern, indem die Eigenschaft `WheelUpDirection` des vertikalen Zoom-Tools auf `pdDown` umgestellt wird.
157+- Chart-Bereiche ohne Daten können wieder sichtbar werden. Das liegt daran, dass die `ExtentSizeLimit`-Eigenschaft nur für die Prüfung der Breite und/oder Höhe des Charts zuständig ist. Das kann mit Hilfe der Eigenschaften `LimitToExtent` des `PanMouseWheelTool` geändert werden: Aktiviere alle Optionen, um vertikales und horizontales Verschieben über den ursprünglichen Datenbereich hinaus zu verbieten.
158+- Vielleicht möchtest du die Geschwindigkeit des Verschiebens verändern? Passe hierzu den Wert der Eigenschaft `Step` an.
159+- Du findest wahrscheinlich auch, dass es recht umständiglich ist, den ursprünglichen, nicht verschobenen Chart-Bereich wiederherzustellen. Das könnte man mit einem Schalter *"Reset"* in der Toolbar vereinfachen, der jede Zoom-/Verschiebungs-Operation rückgängig macht. Das ist leicht: Platziere einen dritten Button auf die `Toolbar`, nenne ihn `RestoreToolbutton`, schreibe als seine `Caption` den Text *"Reset"* und weise seinem `OnClick`-Ereignis den folgenden Code zu:
160+
161+``` pascal
162+procedure TForm1.ResetToolButtonClick(Sender: TObject);
163+begin
164+ Chart1.ZoomFull;
165+end;
166+```
167+
168+Der Aufruf von `ZoomFull` setzt die Achsen wieder auf die ursprünglichen Grenzen zurück. Hier ist nun, wie unser Programm aktuell aussieht:
169+
170+![](/wiki-images/1/18/ZoomPan04a.png)
171+
172+## Datenwerte aus der Datenreihe auslesen
173+
174+Man könnte noch weitere Zoom- und Verschiebungs-Werkzeuge ins Toolset aufnehmen und so eine praktische Benutzeroberfläche aufbauen. Aber das wollen wir hier nicht weiter vertiefen, sondern uns nun den Daten-Tools zuwenden.
175+
176+### Ein TDataPointClickTool verwenden
177+
178+Stellen wir uns die Aufgabe, die `x,y`-Koordinaten von Datenpunkten unter dem Maus-Cursor auszulesen. Ein dafür geeignetes Werkzeug ist das `TDatapointClickTool`. Füge es zum Toolset hinzu. Setze `Shift` auf `ssLeft`, um es durch einen Klick mit der linken Maustaste zu aktivieren. Und füge dem Formular eine `TStatusbar` hinzu, auf der wir die erhaltenen Daten anzeigen wollen.
179+
180+Immer wenn ein Mausklick auf einem Datenpunkt erfolgt (oder ausreichend nahe), werden die relevanten Daten über den Datenpunkt im Tool gespeichert. Zum Beispiel gibt es eine Eigenschaft `Series`, die festhält, auf welcher Datenreihe der Klick erfolgt ist. Entsprechend gibt es auch eine Eigenschaft `PointIndex`, über die man den Index des angeklickten Punktes innerhalb der Datenreihe erfährt. Weiterhin stellt das Werkzeug ein Ereignis `OnPointClick` zur Verfügung; es wird ausgelöst, wenn auf einen Datenpunkt geklickt wurde, und wir können damit die gewünschte Information auslesen. Der folgende Ereignis-Behandlungscode stellt die ausgelesene Information in der Statuszeile dar:
181+
182+``` pascal
183+procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
184+ ATool: TChartTool; APoint: TPoint);
185+var
186+ x, y: Double;
187+begin
188+ with ATool as TDatapointClickTool do
189+ if (Series is TLineSeries) then
190+ with TLineSeries(Series) do begin
191+ x := GetXValue(PointIndex);
192+ y := GetYValue(PointIndex);
193+ Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
194+ end
195+ else
196+ Statusbar1.SimpleText := '';
197+end;
198+```
199+
200+Der Parameter `ATool`, der dem Ereignis mitgegeben wird, hat einen sehr allgemeinen Typ. Daher müssen wir eine Typ-Umwandlung in ein `TDatapointClickTool` vornehmen, um an die gewünschte Information zu gelangen. Genauso hat die vom Tool gespeicherte Eigenschaft `Series` einen sehr allgemeinen Typ, so dass auch hier eine Typumwandlung erforderlich ist. Aber sei vorsichtig bei Typumwandlungen, versichere dich immer mit Hilfe des Operators `is`, ob die Typen richtig sind.
201+
202+Wenn wir nun das Programm starten und auf einem Datenpunkt klicken, bekommen wir die Koordinaten des Punktes zusammen mit dem Titel der Datenreihe in der Statuszeile angezeigt.
203+
204+![](/wiki-images/4/49/ZoomPan05.png)
205+
206+### Anzeigen von permanenten Labels
207+
208+Leider kann man nicht feststellen, wo genau der Klick erfolgt ist. Es wäre besser, wenn wir über dem angeklickten Datenpunkt eine Markierung ("Label") mit der gewünschten Information anzeigen könnten.
209+
210+Hierzu verwenden wir die Tatsache, dass die Datenreihen im Chart ihre Daten jeweils aus einer `TListChartSource` beziehen. Auf dem Formular gibt es dafür keine spezielle Komponente, weil der Datenreihentyp `TChartSeries`, von dem sich `TLineSeries` ableitet, diese als eingebautet Datenquelle enthält und über die öffentliche Eigenschaft `ListSource` zugänglich macht.
211+
212+Warum ist das wichtig? Weil die in der `ListSource` gespeicherten Einträge vom Typ `TChartDateItem` im Feld `Text` Speicherplatz für zusätzlichen Text vorhalten:
213+
214+``` pascal
215+type
216+ TChartDataItem = object
217+ X, Y: Double;
218+ Text: String;
219+ // ...
220+ end;
221+```
222+
223+Um den Inhalt des `Text`-Feldes zu verändern, der einem Datenpunkt mit vorgegebenem `Index` zugewiesen ist, verwenden wir folgenden Code:
224+
225+``` pascal
226+ListSource.Item[index]^.Text := 'some text';
227+```
228+
229+In neueren Lazarus-Versionen gibt es dafür zur Vereinfachtung auch die Methode `SetText`:
230+
231+``` pascal
232+ListSource.SetText(index, 'some text');
233+```
234+
235+(Du kannst mehr über `TChartListSource` in dem [[TAChart Tutorial: ListChartSource, Logarithmic Axis, Fitting|betreffenden Tutorial]] erfahren.)
236+
237+Zu Beginn sind alle `Text` Einträge leer. Aber wenn wir auf einen Datenpunkt geklickt haben, transferieren wir die Koordinaten-Information in das `Text`-Feld des zugehörigen `ChartDataItem`, indem wir die obige Code-Zeile in die die `OnPointClick`-Ereignisbehandlungsroutine des `DataPointClickTool`s einbauen. Die Statuszeile, übrigens, benötigen wird nicht mehr - lösche sie und entferne den entsprechenden Code aus der Ereignisbehandlungs-Routine:
238+
239+``` pascal
240+procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
241+ ATool: TChartTool; APoint: TPoint);
242+var
243+ x, y: Double;
244+begin
245+ with ATool as TDatapointClickTool do
246+ if (Series <> nil) then
247+ with (Series as TLineSeries) do begin
248+ x := GetXValue(PointIndex);
249+ y := GetYValue(PointIndex);
250+ { --- die nächste Zeile wurde entferne --- }
251+// Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
252+ { --- die nächste Zeile wirde hinzugefügt --- }
253+ ListSource.Item[PointIndex]^.Text := Format('x = %f'#13#10'y = %f', [x,y]);
254+ ParentChart.Repaint;
255+ // in neueren Lazarus-Versionen kann man stattdessen auch die folgende Zeile verwenden (die schon das Repaint enthält):
256+ // ListSource.SetText(PointIndex, Format('x = %f'#13#10'y = %f', [x,y]));
257+ end;
258+end;
259+```
260+
261+Nun müssen wir uns darum kümmern, dass die Labels auch angezeigt werden. Zu diesem Zweck hat `TChartSeries`, der Vorfahr von `TLineSeries`, die Eigenschaft `Marks`. In deren Unter-Eigenschaften findet sich die Option `Style`, die standardmäßig auf `smsNone` gesetzt ist -- das bedeutet, dass Labels in der Grundeinstellung gar nicht dargestellt werden. Im Objekt-Inspektor sieht man, dass `Style` eine Vielzahl von Einstellmöglichkeiten bietet. Wir brauchen hier die Option `smsLabel`, die die Ausgabe des `Text`-Labels bewirkt. Eine weitere sinnvolle Änderung wäre, `LinkPen.Color` auf eine dunklere Farbe zu setzen, andernfalls ist die Verbindungslinie zwischen Label und Datenpunkt auf dem weißen Untergrund nicht zu erkennen. Vielleicht spielst du auch mit den anderen Einstellmöglichkeiten, wie `CalloutAngle` oder `Shape`.
262+
263+Dieselben Änderungen müssen an allen drei Datenreihen des Chart vorgenommen werden.
264+
265+Wenn du nun das Projekt startest und auf Datenpunkten klickst, bekommst du schöne permantente Labels. Beachte, dass die Markierungen erhalten bleiben, selbst wenn man den sichtbaren Chart-Ausschnitt durch Zoomen oder Verschieben verändert.
266+
267+![](/wiki-images/c/c6/ZoomPan06.png)
268+
269+### Permanente Labels entfernen
270+
271+Gelegentlich wirst du feststellen, dass du einen falschen Datenpunkt angeklickt hast, und willst deshalb das Label entfernen.
272+
273+Die grundlegende Idee dafür ist folgendermaßen: füge ein weiteres `TDatapointClickTool` hinzu, weise es der rechten Maustaste zu und entferne in der `OnDatapointClick`-Ereignisbehandlung den Text von dem `ChartDataItem`. Versuche selbst, den Code zu schreiben -- du solltest jetzt alle nötigen Schritte kennen.
274+
275+## Ähnliche Tutorials
276+
277+- [[TAChart Tutorial: Getting started]]: erklärt, wie der hier verwendete Chart erzeugt wurde.
278+- [[TAChart Tutorial: ListChartSource, Logarithmic Axis, Fitting]]: diskutiert die Verwendung der `Marks` von Datenreihen.
279+- [[TAChart Tutorial: ColorMapSeries, Zooming]]: demonstriert weitere Aspekte des Zoomens und Verschiebens wie die Verwendung des ZoomDrag- und PanDrag-Tools, sowie die Erstellung eines Zoom-Verlaufs.
280+
281+## Quell-Code
282+
283+### project.lpr
284+
285+``` pascal
286+program project1;
287+
288+{$mode objfpc}{$H+}
289+
290+uses
291+ {$IFDEF UNIX}{$IFDEF UseCThreads}
292+ cthreads,
293+ {$ENDIF}{$ENDIF}
294+ Interfaces, // this includes the LCL widgetset
295+ Forms, Unit1, tachartlazaruspkg
296+ { you can add units after this };
297+
298+{$R *.res}
299+
300+begin
301+ RequireDerivedFormResource := True;
302+ Application.Initialize;
303+ Application.CreateForm(TForm1, Form1);
304+ Application.Run;
305+end.
306+```
307+
308+### unit1.pas
309+
310+``` pascal
311+unit Unit1;
312+
313+{$mode objfpc}{$H+}
314+
315+interface
316+
317+uses
318+ Classes, SysUtils, FileUtil, TAGraph, TASeries, TATools, Forms, Controls,
319+ Graphics, Dialogs, ComCtrls, types;
320+
321+type
322+
323+ { TForm1 }
324+
325+ TForm1 = class(TForm)
326+ Chart1: TChart;
327+ ChartToolset1: TChartToolset;
328+ ChartToolset1DataPointClickTool1: TDataPointClickTool;
329+ ChartToolset1DataPointClickTool2: TDataPointClickTool;
330+ ChartToolset1PanMouseWheelTool_Hor: TPanMouseWheelTool;
331+ ChartToolset1PanMouseWheelTool_Vert: TPanMouseWheelTool;
332+ ChartToolset1ZoomMouseWheelTool_iso: TZoomMouseWheelTool;
333+ ChartToolset1ZoomMouseWheelTool_Hor: TZoomMouseWheelTool;
334+ ChartToolset1ZoomMouseWheelTool_Vert: TZoomMouseWheelTool;
335+ SinSeries: TLineSeries;
336+ CosSeries: TLineSeries;
337+ SinCosSeries: TLineSeries;
338+ ToolBar1: TToolBar;
339+ ResetToolButton: TToolButton;
340+ ZoomToolbutton: TToolButton;
341+ PanToolbutton: TToolButton;
342+ procedure ChartToolset1DataPointClickTool1PointClick(
343+ ATool: TChartTool; APoint: TPoint);
344+ procedure ChartToolset1DataPointClickTool2PointClick(
345+ ATool: TChartTool; APoint: TPoint);
346+ procedure FormCreate(Sender: TObject);
347+ procedure ResetToolButtonClick(Sender: TObject);
348+ procedure ZoomPanToolbuttonClick(Sender: TObject);
349+ private
350+ { private declarations }
351+ public
352+ { public declarations }
353+ end;
354+
355+var
356+ Form1: TForm1;
357+
358+implementation
359+
360+{$R *.lfm}
361+
362+{ TForm1 }
363+
364+procedure TForm1.FormCreate(Sender: TObject);
365+const
366+ N = 100;
367+ MIN = -10;
368+ MAX = 10;
369+var
370+ i: Integer;
371+ x: Double;
372+begin
373+ for i:=0 to N - 1 do begin
374+ x := MIN + (MAX - MIN) * i / (N - 1);
375+ SinSeries.AddXY(x, sin(x));
376+ CosSeries.AddXY(x, cos(x));
377+ SinCosSeries.AddXY(x, sin(x)*cos(x));
378+ end;
379+end;
380+
381+procedure TForm1.ResetToolButtonClick(Sender: TObject);
382+begin
383+ Chart1.ZoomFull;
384+end;
385+
386+procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
387+ ATool: TChartTool; APoint: TPoint);
388+var
389+ x,y: Double;
390+begin
391+ with ATool as TDatapointClickTool do
392+ if (Series <> nil) then
393+ with (Series as TLineSeries) do begin
394+ x := GetXValue(PointIndex);
395+ y := GetYValue(PointIndex);
396+// Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
397+ ListSource.Item[PointIndex]^.Text := Format('x = %f'#13#10'y = %f', [x,y]);
398+ ParentChart.Repaint;
399+ end;
400+end;
401+
402+procedure TForm1.ChartToolset1DataPointClickTool2PointClick(
403+ ATool: TChartTool; APoint: TPoint);
404+begin
405+ with ATool as TDatapointClickTool do
406+ if (Series <> nil) then
407+ with (Series as TLineSeries) do begin
408+ ListSource.Item[PointIndex]^.Text := '';
409+ ParentChart.Repaint;
410+ end;
411+end;
412+
413+procedure TForm1.ZoomPanToolbuttonClick(Sender: TObject);
414+begin
415+ ChartToolset1ZoomMouseWheelTool_iso.Enabled := ZoomToolbutton.Down;
416+ ChartToolset1ZoomMouseWheelTool_vert.Enabled := ZoomToolbutton.Down;
417+ ChartToolset1ZoomMouseWheelTool_hor.Enabled := ZoomToolbutton.Down;
418+
419+ ChartToolset1PanMouseWheelTool_vert.Enabled := PanToolbutton.Down;
420+ ChartToolset1PanMouseWheelTool_hor.Enabled := PanToolbutton.Down;
421+end;
422+
423+end.
424+```
425+
426+### unit1.lfm
427+
428+``` pascal
429+object Form1: TForm1
430+ Left = 554
431+ Height = 284
432+ Top = 341
433+ Width = 347
434+ Caption = 'Form1'
435+ ClientHeight = 284
436+ ClientWidth = 347
437+ OnCreate = FormCreate
438+ LCLVersion = '1.1'
439+ object Chart1: TChart
440+ Left = 0
441+ Height = 258
442+ Top = 26
443+ Width = 347
444+ AxisList = <
445+ item
446+ Grid.Color = clSilver
447+ Minors = <>
448+ Title.LabelFont.Orientation = 900
449+ Title.LabelFont.Style = [fsBold]
450+ Title.Visible = True
451+ Title.Caption = 'y axis'
452+ end
453+ item
454+ Grid.Color = clSilver
455+ Alignment = calBottom
456+ Minors = <>
457+ Title.LabelFont.Style = [fsBold]
458+ Title.Visible = True
459+ Title.Caption = 'x axis'
460+ end>
461+ BackColor = clWhite
462+ ExtentSizeLimit.UseXMax = True
463+ ExtentSizeLimit.UseXMin = True
464+ ExtentSizeLimit.UseYMax = True
465+ ExtentSizeLimit.XMax = 20
466+ ExtentSizeLimit.XMin = 0.01
467+ ExtentSizeLimit.YMax = 2
468+ Foot.Brush.Color = clBtnFace
469+ Foot.Font.Color = clBlue
470+ Legend.Alignment = laBottomCenter
471+ Legend.ColumnCount = 3
472+ Legend.Visible = True
473+ Title.Brush.Color = clBtnFace
474+ Title.Font.Color = clBlue
475+ Title.Font.Style = [fsBold]
476+ Title.Text.Strings = (
477+ 'My first chart'
478+ )
479+ Title.Visible = True
480+ Toolset = ChartToolset1
481+ Align = alClient
482+ ParentColor = False
483+ object SinSeries: TLineSeries
484+ Marks.Format = '%2:s'
485+ Marks.LinkPen.Color = clGray
486+ Marks.Style = smsLabel
487+ Title = 'y=sin(x)'
488+ LinePen.Color = clRed
489+ end
490+ object CosSeries: TLineSeries
491+ Marks.Format = '%2:s'
492+ Marks.LinkPen.Color = clGray
493+ Marks.Style = smsLabel
494+ Title = 'y=cos(x)'
495+ LinePen.Color = clBlue
496+ end
497+ object SinCosSeries: TLineSeries
498+ Marks.Format = '%2:s'
499+ Marks.LinkPen.Color = clGray
500+ Marks.Style = smsLabel
501+ Title = 'y=sin(x)*cos(x)'
502+ LinePen.Color = clGreen
503+ end
504+ end
505+ object ToolBar1: TToolBar
506+ Left = 0
507+ Height = 26
508+ Top = 0
509+ Width = 347
510+ Caption = 'ToolBar1'
511+ EdgeBorders = [ebBottom]
512+ ShowCaptions = True
513+ TabOrder = 1
514+ object ZoomToolbutton: TToolButton
515+ Left = 1
516+ Top = 0
517+ Caption = 'Zoom'
518+ Down = True
519+ Grouped = True
520+ OnClick = ZoomPanToolbuttonClick
521+ Style = tbsCheck
522+ end
523+ object PanToolbutton: TToolButton
524+ Left = 41
525+ Top = 0
526+ Caption = 'Pan'
527+ Grouped = True
528+ OnClick = ZoomPanToolbuttonClick
529+ Style = tbsCheck
530+ end
531+ object ResetToolButton: TToolButton
532+ Left = 69
533+ Top = 0
534+ Caption = 'Reset'
535+ OnClick = ResetToolButtonClick
536+ end
537+ end
538+ object ChartToolset1: TChartToolset
539+ left = 153
540+ top = 66
541+ object ChartToolset1ZoomMouseWheelTool_iso: TZoomMouseWheelTool
542+ ZoomFactor = 1.1
543+ end
544+ object ChartToolset1ZoomMouseWheelTool_Hor: TZoomMouseWheelTool
545+ Shift = [ssAlt]
546+ ZoomFactor = 1.1
547+ ZoomRatio = 0.90909090909091
548+ end
549+ object ChartToolset1ZoomMouseWheelTool_Vert: TZoomMouseWheelTool
550+ Shift = [ssShift]
551+ ZoomRatio = 1.1
552+ end
553+ object ChartToolset1PanMouseWheelTool_Hor: TPanMouseWheelTool
554+ Shift = [ssAlt]
555+ LimitToExtent = [pdLeft, pdUp, pdRight, pdDown]
556+ WheelUpDirection = pdLeft
557+ end
558+ object ChartToolset1PanMouseWheelTool_Vert: TPanMouseWheelTool
559+ Shift = [ssShift]
560+ LimitToExtent = [pdLeft, pdUp, pdRight, pdDown]
561+ WheelUpDirection = pdDown
562+ end
563+ object ChartToolset1DataPointClickTool1: TDataPointClickTool
564+ Shift = [ssLeft]
565+ OnPointClick = ChartToolset1DataPointClickTool1PointClick
566+ end
567+ object ChartToolset1DataPointClickTool2: TDataPointClickTool
568+ Shift = [ssRight]
569+ OnPointClick = ChartToolset1DataPointClickTool2PointClick
570+ end
571+ end
572+end
573+```
574+
575+---
576+*From the Free Pascal wiki, page "TAChart Tutorial: Chart Tools/de", as it stood on 2022-10-18 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).*

Back to history