NAME
Quiq::PlotlyJs::TimeSeries::DiagramGroup - Erzeuge Zeitreihen-Plots auf Basis von Plotly.js
BASE CLASS
DESCRIPTION
Diese Klasse ist ein Perl-Wrapper für die Erzeugung für Zeitreihen-Plots auf Basis von Plotly.js.
Dokumentation und Beispiele: https://plotly.com/javascript/
Zeitformate: https://github.com/d3/d3/blob/master/API.md#time-formats-d3-time-format
Leeres Diagramm
Ein Konstuktoraufruf ohne jegliche Angaben, also auch ohne Daten, ergibt ein leeres Diagramm. Die X-Achse umfasst den (willkürlich gewählten) Zeitbereich von 2000-01-01 00:00:00
bis 2001-01-01 00:00:00
. Die Y-Achse umfasst den (willkürlich gewählten) Wertebereich -1
bis 4
.
Diagramm-Höhe
Die Diagramm-Höhe kann im div-Container, in der Layout-Konfiguration oder in beiden gesetzt werden. Die Auswirkungen:
Wird die Höhe nur beim div-Container gesetzt, füllt Plotly die Höhe immer ganz aus. Wird z.B. der Rangeslider entfernt, rendert Plotly das Diagramm neu, so dass es wieder die gesamte Höhe ausfüllt. D.h. der Plotbereich wird höher. Der Inhalt des Diagramms ist nicht statisch. Das wollen wir nicht.
Wird die Höhe nur in der Layout-Konfiguration gesetzt, hat der div-Container zunächst die Höhe 0, bis das Diagramm (typischerweise im ready-Handler) aufgebaut wird. Das wollen wir auch nicht.
Wird die Höhe im div-Container und in der Layout-Konfiguration gesetzt, ist der Bereich des Diagramms auf der Seite sofort sichtbar, der Inhalt kann aber aber statisch gehalten werden, indem beide Angaben gemeinsam geändert werden.
Unterer Rand
Im unteren Rand ist die Beschriftung der X-Achse und der Rangeslider angesiedelt. Die Beschriftung hat einen Platzbedarf von 55 Pixeln, die Dicke des Rangesliders ist auf 20% der Plothöhe eingestellt. Wir nutzen folgende Formel, um aus der Höhe des Diagramms die Höhe des unteren Rands zu berechnen:
bottomMargin = (height - 300) / 50 * 10 + 110;
Das ergibt folgende Werte (height->marginBottom):
250->100, 300->110, 350->120, 400->130, 450->140,...
Wenn wir den Rangeslider entfernen, reduzieren wir die Höhe des Diagramms und den unteren Rand um
marginBottom - 55
Titel-Positionierung
Der Diagramm-Titel wird per Default leider ungünstig positioniert, daher positionieren wir ihn selbst. Damit der Titel oberhalb des Plot-Bereichs positioniert werden kann, muss im Layout container
als Bezugsbereich vereinbart werden:
title: {
yref: 'container',
yanchor => 'top',
y => $y0,
}
Hierbei ist $y0 ein Wert zwischen 0 und 1, der die vertikale Position innerhalb des Diagramms festlegt. 1 -> ganz oben unter dem Rand, 0 -> ganz unten unter (!) dem Rand.
Ändert sich die Höhe des Diagramms, muss der Wert y auf die neue Höhe y1 umgerechnet werden:
y1 = 1 - (height0 * (1 - y0) / height1);
Raum unter der Achse einfärben
Ist beim Trace-Layout das Füllen unter der Achse angegeben mit
fill: 'tozeroy',
fillcolor: '#e0e0e0',
wird der Y-Wertebereich nach unten bis 0 ausgedehnt, wenn kein Y-Wertebereich explizit vorgegeben ist. Ist für die Y-Achse (Diagramm-Layout!) explizit ein Wertebereich vorgegeben
range => [900,1000],
findet die Ausdehnung bis 0 nicht statt, der Raum unter der Kurve wird dennoch wie gewünscht gefüllt.
EXAMPLE
(Folgendes Diagramm erscheint in HTML - außer auf metacpan.org, da der HTML-Code dort gestrippt wird. Es zeigt 720 Messwerte einer Windgeschwindigkeits-Messung)
METHODS
Konstruktor
new() - Instantiiere Objekt
Synopsis
$dgr = $class->new(@attVal);
Attributes
- height => $n (Default: 300)
-
Höhe des einzelnen Diagramms in Pixeln.
- name => $name (Default: 'dgr')
-
Name der Diagramm-Gruppe. Der Name wird als CSS-Id für den äußeren Container der Diagramm-Gruppe genutzt.
- parameters => \@parameters
-
Liste der Parameter-Objekte. Die Paramater-Objekte sind vom Typ Quiq::PlotlyJs::TimeSeries::Parameter.
Returns
Objekt
Description
Instantiiere ein Objekt der Klasse und liefere eine Referenz auf dieses Objekt zurück.
Objektmethoden
html() - Generiere HTML
Synopsis
$html = $dgr->html($h);
Returns
HTML-Code (String)
Description
Liefere den HTML-Code der Diagramm-Gruppe.
htmlDiagram() - Generiere HTML für ein Diagramm
Synopsis
$html = $dgr->htmlDiagram($h,$i);
Arguments
Returns
HTML-Code (String)
Description
Genererie den HTML-Code für ein Diagramm und liefere diesen zurück.
jsDiagram() - Generiere JavaScript für ein Diagramm
Synopsis
$js = $dgr->jsDiagram($i,$par);
Arguments
Returns
JavaScript-Code (String)
Description
Genererie den JavaScript-Code für ein Diagramm und liefere diesen zurück.
VERSION
1.185
AUTHOR
Frank Seitz, http://fseitz.de/
COPYRIGHT
Copyright (C) 2020 Frank Seitz
LICENSE
This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.