TAChart Tutorial: Chart Tools/de: what changed

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

Old	New		Line
1	1		## Einführung
2	2
3	3		![](/wiki-images/c/c6/ZoomPan06.png)
4	4
5	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	6
7	7		- in eine Datenreihe mit sehr, sehr vielen Datenpunkten hineinzoomen, um mehr Details zu sehen,
8	8		- den sichtbaren Ausschnitt verschieben,
9	9		- Anzeigen von Datenwerten für die Datenreihen, oder Bestimmen von charakterischen Parametern aus dem Plot.
10	10
11	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	12
13	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	14
15	15		## Vorbereitung
16	16
17	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	18
19	19		![](/wiki-images/2/2f/Tachart_getting_started_step6.png)
20	20
21	21		## Zoomen und Verschieben - der leichte Weg
22	22
23	23		### Zoomen
24	24
25	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	26
27	27		![](/wiki-images/3/34/ZoomPan01.png) ![](/wiki-images/f/f8/ZoomPan02.png)
28	28
29	29		Man kann diesen Vorgang wiederholen, um tiefer und tiefer in den Chart hineinzuzoomen.
30	30
31	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	32
33	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	34
35	35		### Verschieben
36	36
37	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	38
39	39		![](/wiki-images/8/8b/ZoomPan03.png)
40	40
41	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	42
43	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	44
45	45		## Grundlegendes über die Chart-Tools
46	46
47	47		### Was sind die Chart-Tools?
48	48
49	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	50
51	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	52
53	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	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	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	56
57	57		### Eigenschaften der Chart-Tools
58	58
59	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	60
61	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	62
63	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	64
65	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	66
67	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	68
69	69		### TChartToolset
70	70
71	71		![](/wiki-images/9/9c/TChartToolset-Icon2.png)
72	72
73	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	74
75	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	76
77	77		## Zoomen mit dem Mausrad
78	78
79	79		Aber jetzt genug mit der Theorie! Es ist Zeit für ein praktisches Beispiel.
80	80
81	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	82
83	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	84
85	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	86
87	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	88
89	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	90
91	91		![](/wiki-images/2/29/ChartToolset_Editor.png)
92	92
93	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	94
95	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	96
97	97		#### Einige Eigenschaften
98	98
99	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	100
101	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	102
103	103		#### Verwendung von ExtentSizeLimit
104	104
105	105		![](/wiki-images/a/a3/ZoomPan04.png)
106	106
107	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	108
109	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	110
111	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	112
113	113		#### Horizontales und vertikales Zoomen
114	114
115	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 `ZoomFactorZoomRatio` 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	116
117	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	118
119	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	120
121	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	122
123	123		## Verschieben mit dem Mausrad
124	124
125	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	126
127	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	128
129	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	130
131	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	132
133	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	134
135	135		- `Grouped = true`
136	136		- `Style = tbsCheck`
137	137
138	138		und weise ihrem `OnClick`-Ereignis den folgenden Code zu:
139	139
140	140		``` pascal
141	141		procedure TForm1.ZoomPanToolbuttonClick(Sender: TObject);
142	142		begin
143	143		ChartToolset1ZoomMouseWheelTool_iso.Enabled := ZoomToolbutton.Down;
144	144		ChartToolset1ZoomMouseWheelTool_vert.Enabled := ZoomToolbutton.Down;
145	145		ChartToolset1ZoomMouseWheelTool_hor.Enabled := ZoomToolbutton.Down;
146	146
147	147		ChartToolset1PanMouseWheelTool_vert.Enabled := PanToolbutton.Down;
148	148		ChartToolset1PanMouseWheelTool_hor.Enabled := PanToolbutton.Down;
149	149		end;
150	150		```
151	151
152	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	153
154	154		Einige Beobachtungen, wenn das Programm läuft:
155	155
156	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	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	158		- Vielleicht möchtest du die Geschwindigkeit des Verschiebens verändern? Passe hierzu den Wert der Eigenschaft `Step` an.
159	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	160
161	161		``` pascal
162	162		procedure TForm1.ResetToolButtonClick(Sender: TObject);
163	163		begin
164	164		Chart1.ZoomFull;
165	165		end;
166	166		```
167	167
168	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	169
170	170		![](/wiki-images/1/18/ZoomPan04a.png)
171	171
172	172		## Datenwerte aus der Datenreihe auslesen
173	173
174	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	175
176	176		### Ein TDataPointClickTool verwenden
177	177
178	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	179
180	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	181
182	182		``` pascal
183	183		procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
184	184		ATool: TChartTool; APoint: TPoint);
185	185		var
186	186		x, y: Double;
187	187		begin
188	188		with ATool as TDatapointClickTool do
189	189		if (Series is TLineSeries) then
190	190		with TLineSeries(Series) do begin
191	191		x := GetXValue(PointIndex);
192	192		y := GetYValue(PointIndex);
193	193		Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
194	194		end
195	195		else
196	196		Statusbar1.SimpleText := '';
197	197		end;
198	198		```
199	199
200	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	201
202	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	203
204	204		![](/wiki-images/4/49/ZoomPan05.png)
205	205
206	206		### Anzeigen von permanenten Labels
207	207
208	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	209
210	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	211
212	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	213
214	214		``` pascal
215	215		type
216	216		TChartDataItem = object
217	217		X, Y: Double;
218	218		Text: String;
219	219		// ...
220	220		end;
221	221		```
222	222
223	223		Um den Inhalt des `Text`-Feldes zu verändern, der einem Datenpunkt mit vorgegebenem `Index` zugewiesen ist, verwenden wir folgenden Code:
224	224
225	225		``` pascal
226	226		ListSource.Item[index]^.Text := 'some text';
227	227		```
228	228
229	229		In neueren Lazarus-Versionen gibt es dafür zur Vereinfachtung auch die Methode `SetText`:
230	230
231	231		``` pascal
232	232		ListSource.SetText(index, 'some text');
233	233		```
234	234
235	235		(Du kannst mehr über `TChartListSource` in dem [[TAChart Tutorial: ListChartSource, Logarithmic Axis, Fitting\|betreffenden Tutorial]] erfahren.)
236	236
237	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	238
239	239		``` pascal
240	240		procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
241	241		ATool: TChartTool; APoint: TPoint);
242	242		var
243	243		x, y: Double;
244	244		begin
245	245		with ATool as TDatapointClickTool do
246	246		if (Series <> nil) then
247	247		with (Series as TLineSeries) do begin
248	248		x := GetXValue(PointIndex);
249	249		y := GetYValue(PointIndex);
250	250		{ --- die nächste Zeile wurde entferne --- }
251	251		// Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
252	252		{ --- die nächste Zeile wirde hinzugefügt --- }
253	253		ListSource.Item[PointIndex]^.Text := Format('x = %f'#13#10'y = %f', [x,y]);
254	254		ParentChart.Repaint;
255	255		// in neueren Lazarus-Versionen kann man stattdessen auch die folgende Zeile verwenden (die schon das Repaint enthält):
256	256		// ListSource.SetText(PointIndex, Format('x = %f'#13#10'y = %f', [x,y]));
257	257		end;
258	258		end;
259	259		```
260	260
261	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	262
263	263		Dieselben Änderungen müssen an allen drei Datenreihen des Chart vorgenommen werden.
264	264
265	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	266
267	267		![](/wiki-images/c/c6/ZoomPan06.png)
268	268
269	269		### Permanente Labels entfernen
270	270
271	271		Gelegentlich wirst du feststellen, dass du einen falschen Datenpunkt angeklickt hast, und willst deshalb das Label entfernen.
272	272
273	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	274
275	275		## Ähnliche Tutorials
276	276
277	277		- [[TAChart Tutorial: Getting started]]: erklärt, wie der hier verwendete Chart erzeugt wurde.
278	278		- [[TAChart Tutorial: ListChartSource, Logarithmic Axis, Fitting]]: diskutiert die Verwendung der `Marks` von Datenreihen.
279	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	280
281	281		## Quell-Code
282	282
283	283		### project.lpr
284	284
285	285		``` pascal
286	286		program project1;
287	287
288	288		{$mode objfpc}{$H+}
289	289
290	290		uses
291	291		{$IFDEF UNIX}{$IFDEF UseCThreads}
292	292		cthreads,
293	293		{$ENDIF}{$ENDIF}
294	294		Interfaces, // this includes the LCL widgetset
295	295		Forms, Unit1, tachartlazaruspkg
296	296		{ you can add units after this };
297	297
298	298		{$R *.res}
299	299
300	300		begin
301	301		RequireDerivedFormResource := True;
302	302		Application.Initialize;
303	303		Application.CreateForm(TForm1, Form1);
304	304		Application.Run;
305	305		end.
306	306		```
307	307
308	308		### unit1.pas
309	309
310	310		``` pascal
311	311		unit Unit1;
312	312
313	313		{$mode objfpc}{$H+}
314	314
315	315		interface
316	316
317	317		uses
318	318		Classes, SysUtils, FileUtil, TAGraph, TASeries, TATools, Forms, Controls,
319	319		Graphics, Dialogs, ComCtrls, types;
320	320
321	321		type
322	322
323	323		{ TForm1 }
324	324
325	325		TForm1 = class(TForm)
326	326		Chart1: TChart;
327	327		ChartToolset1: TChartToolset;
328	328		ChartToolset1DataPointClickTool1: TDataPointClickTool;
329	329		ChartToolset1DataPointClickTool2: TDataPointClickTool;
330	330		ChartToolset1PanMouseWheelTool_Hor: TPanMouseWheelTool;
331	331		ChartToolset1PanMouseWheelTool_Vert: TPanMouseWheelTool;
332	332		ChartToolset1ZoomMouseWheelTool_iso: TZoomMouseWheelTool;
333	333		ChartToolset1ZoomMouseWheelTool_Hor: TZoomMouseWheelTool;
334	334		ChartToolset1ZoomMouseWheelTool_Vert: TZoomMouseWheelTool;
335	335		SinSeries: TLineSeries;
336	336		CosSeries: TLineSeries;
337	337		SinCosSeries: TLineSeries;
338	338		ToolBar1: TToolBar;
339	339		ResetToolButton: TToolButton;
340	340		ZoomToolbutton: TToolButton;
341	341		PanToolbutton: TToolButton;
342	342		procedure ChartToolset1DataPointClickTool1PointClick(
343	343		ATool: TChartTool; APoint: TPoint);
344	344		procedure ChartToolset1DataPointClickTool2PointClick(
345	345		ATool: TChartTool; APoint: TPoint);
346	346		procedure FormCreate(Sender: TObject);
347	347		procedure ResetToolButtonClick(Sender: TObject);
348	348		procedure ZoomPanToolbuttonClick(Sender: TObject);
349	349		private
350	350		{ private declarations }
351	351		public
352	352		{ public declarations }
353	353		end;
354	354
355	355		var
356	356		Form1: TForm1;
357	357
358	358		implementation
359	359
360	360		{$R *.lfm}
361	361
362	362		{ TForm1 }
363	363
364	364		procedure TForm1.FormCreate(Sender: TObject);
365	365		const
366	366		N = 100;
367	367		MIN = -10;
368	368		MAX = 10;
369	369		var
370	370		i: Integer;
371	371		x: Double;
372	372		begin
373	373		for i:=0 to N - 1 do begin
374	374		x := MIN + (MAX - MIN) * i / (N - 1);
375	375		SinSeries.AddXY(x, sin(x));
376	376		CosSeries.AddXY(x, cos(x));
377	377		SinCosSeries.AddXY(x, sin(x)*cos(x));
378	378		end;
379	379		end;
380	380
381	381		procedure TForm1.ResetToolButtonClick(Sender: TObject);
382	382		begin
383	383		Chart1.ZoomFull;
384	384		end;
385	385
386	386		procedure TForm1.ChartToolset1DataPointClickTool1PointClick(
387	387		ATool: TChartTool; APoint: TPoint);
388	388		var
389	389		x,y: Double;
390	390		begin
391	391		with ATool as TDatapointClickTool do
392	392		if (Series <> nil) then
393	393		with (Series as TLineSeries) do begin
394	394		x := GetXValue(PointIndex);
395	395		y := GetYValue(PointIndex);
396	396		// Statusbar1.SimpleText := Format('%s: x = %f, y = %f', [Title, x, y]);
397	397		ListSource.Item[PointIndex]^.Text := Format('x = %f'#13#10'y = %f', [x,y]);
398	398		ParentChart.Repaint;
399	399		end;
400	400		end;
401	401
402	402		procedure TForm1.ChartToolset1DataPointClickTool2PointClick(
403	403		ATool: TChartTool; APoint: TPoint);
404	404		begin
405	405		with ATool as TDatapointClickTool do
406	406		if (Series <> nil) then
407	407		with (Series as TLineSeries) do begin
408	408		ListSource.Item[PointIndex]^.Text := '';
409	409		ParentChart.Repaint;
410	410		end;
411	411		end;
412	412
413	413		procedure TForm1.ZoomPanToolbuttonClick(Sender: TObject);
414	414		begin
415	415		ChartToolset1ZoomMouseWheelTool_iso.Enabled := ZoomToolbutton.Down;
416	416		ChartToolset1ZoomMouseWheelTool_vert.Enabled := ZoomToolbutton.Down;
417	417		ChartToolset1ZoomMouseWheelTool_hor.Enabled := ZoomToolbutton.Down;
418	418
419	419		ChartToolset1PanMouseWheelTool_vert.Enabled := PanToolbutton.Down;
420	420		ChartToolset1PanMouseWheelTool_hor.Enabled := PanToolbutton.Down;
421	421		end;
422	422
423	423		end.
424	424		```
425	425
426	426		### unit1.lfm
427	427
428		-	~~``` pascal~~
	428	+	``` lfm
429	429		object Form1: TForm1
430	430		Left = 554
431	431		Height = 284
432	432		Top = 341
433	433		Width = 347
434	434		Caption = 'Form1'
435	435		ClientHeight = 284
436	436		ClientWidth = 347
437	437		OnCreate = FormCreate
438	438		LCLVersion = '1.1'
439	439		object Chart1: TChart
440	440		Left = 0
441	441		Height = 258
442	442		Top = 26
443	443		Width = 347
444	444		AxisList = <
445	445		item
446	446		Grid.Color = clSilver
447	447		Minors = <>
448	448		Title.LabelFont.Orientation = 900
449	449		Title.LabelFont.Style = [fsBold]
450	450		Title.Visible = True
451	451		Title.Caption = 'y axis'
452	452		end
453	453		item
454	454		Grid.Color = clSilver
455	455		Alignment = calBottom
456	456		Minors = <>
457	457		Title.LabelFont.Style = [fsBold]
458	458		Title.Visible = True
459	459		Title.Caption = 'x axis'
460	460		end>
461	461		BackColor = clWhite
462	462		ExtentSizeLimit.UseXMax = True
463	463		ExtentSizeLimit.UseXMin = True
464	464		ExtentSizeLimit.UseYMax = True
465	465		ExtentSizeLimit.XMax = 20
466	466		ExtentSizeLimit.XMin = 0.01
467	467		ExtentSizeLimit.YMax = 2
468	468		Foot.Brush.Color = clBtnFace
469	469		Foot.Font.Color = clBlue
470	470		Legend.Alignment = laBottomCenter
471	471		Legend.ColumnCount = 3
472	472		Legend.Visible = True
473	473		Title.Brush.Color = clBtnFace
474	474		Title.Font.Color = clBlue
475	475		Title.Font.Style = [fsBold]
476	476		Title.Text.Strings = (
477	477		'My first chart'
478	478		)
479	479		Title.Visible = True
480	480		Toolset = ChartToolset1
481	481		Align = alClient
482	482		ParentColor = False
483	483		object SinSeries: TLineSeries
484	484		Marks.Format = '%2:s'
485	485		Marks.LinkPen.Color = clGray
486	486		Marks.Style = smsLabel
487	487		Title = 'y=sin(x)'
488	488		LinePen.Color = clRed
489	489		end
490	490		object CosSeries: TLineSeries
491	491		Marks.Format = '%2:s'
492	492		Marks.LinkPen.Color = clGray
493	493		Marks.Style = smsLabel
494	494		Title = 'y=cos(x)'
495	495		LinePen.Color = clBlue
496	496		end
497	497		object SinCosSeries: TLineSeries
498	498		Marks.Format = '%2:s'
499	499		Marks.LinkPen.Color = clGray
500	500		Marks.Style = smsLabel
501	501		Title = 'y=sin(x)*cos(x)'
502	502		LinePen.Color = clGreen
503	503		end
504	504		end
505	505		object ToolBar1: TToolBar
506	506		Left = 0
507	507		Height = 26
508	508		Top = 0
509	509		Width = 347
510	510		Caption = 'ToolBar1'
511	511		EdgeBorders = [ebBottom]
512	512		ShowCaptions = True
513	513		TabOrder = 1
514	514		object ZoomToolbutton: TToolButton
515	515		Left = 1
516	516		Top = 0
517	517		Caption = 'Zoom'
518	518		Down = True
519	519		Grouped = True
520	520		OnClick = ZoomPanToolbuttonClick
521	521		Style = tbsCheck
522	522		end
523	523		object PanToolbutton: TToolButton
524	524		Left = 41
525	525		Top = 0
526	526		Caption = 'Pan'
527	527		Grouped = True
528	528		OnClick = ZoomPanToolbuttonClick
529	529		Style = tbsCheck
530	530		end
531	531		object ResetToolButton: TToolButton
532	532		Left = 69
533	533		Top = 0
534	534		Caption = 'Reset'
535	535		OnClick = ResetToolButtonClick
536	536		end
537	537		end
538	538		object ChartToolset1: TChartToolset
539	539		left = 153
540	540		top = 66
541	541		object ChartToolset1ZoomMouseWheelTool_iso: TZoomMouseWheelTool
542	542		ZoomFactor = 1.1
543	543		end
544	544		object ChartToolset1ZoomMouseWheelTool_Hor: TZoomMouseWheelTool
545	545		Shift = [ssAlt]
546	546		ZoomFactor = 1.1
547	547		ZoomRatio = 0.90909090909091
548	548		end
549	549		object ChartToolset1ZoomMouseWheelTool_Vert: TZoomMouseWheelTool
550	550		Shift = [ssShift]
551	551		ZoomRatio = 1.1
552	552		end
553	553		object ChartToolset1PanMouseWheelTool_Hor: TPanMouseWheelTool
554	554		Shift = [ssAlt]
555	555		LimitToExtent = [pdLeft, pdUp, pdRight, pdDown]
556	556		WheelUpDirection = pdLeft
557	557		end
558	558		object ChartToolset1PanMouseWheelTool_Vert: TPanMouseWheelTool
559	559		Shift = [ssShift]
560	560		LimitToExtent = [pdLeft, pdUp, pdRight, pdDown]
561	561		WheelUpDirection = pdDown
562	562		end
563	563		object ChartToolset1DataPointClickTool1: TDataPointClickTool
564	564		Shift = [ssLeft]
565	565		OnPointClick = ChartToolset1DataPointClickTool1PointClick
566	566		end
567	567		object ChartToolset1DataPointClickTool2: TDataPointClickTool
568	568		Shift = [ssRight]
569	569		OnPointClick = ChartToolset1DataPointClickTool2PointClick
570	570		end
571	571		end
572	572		end
573	573		```
574	574
575	575		---
576	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