NAME
Quiq::PlotlyJs::TimeSeries - Erzeuge Zeitreihen-Plot 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/
EXAMPLE
(Folgendes Diagramm erscheint in HTML - außer auf meta::cpan, da der HTML-Code dort gestrippt wird - es zeigt 720 Messwerte einer Windgeschwindigkeits-Messung)
METHODS
Konstruktor
new() - Instantiiere Objekt
Synopsis
$plt = $class->new(@attVal);
Attributes
- axisColor => $color (Default: '#b0b0b0')
-
Farbe der Achsenlinien.
- background => $color
-
Hintergrundfarbe.
- class => $class (Default: 'plotly-timeseries')
-
CSS-Klasse des div-Containers. Kann zur Definition eines Rahmens, von Außenabständen usw. genutzt werden.
- color => $color (Default: 'rgb(255,0,0,1)')
-
Farbe der Kurve. Alle Schreibweisen, die in CSS erlaubt sind, sind zulässig, also NAME, #XXXXXX oder rgb(NNN,NNN,NNN).
- fillColor => $color (Default: 'rgb(230,230,230,01)'
-
Farbe zwischen Kurve und X-Achse.
- gridColor => $color (Default: 'rgb(230,230,230,01)'
-
Gitter-Farbe.
- height (Default: 450 Default von plotly.js)
-
Höhe des Plot in Pixeln.
- marginBottom => $n (Default: 135)
-
Unterer Rand in Pixeln.
- marginLeft => $n
-
Linker Rand in Pixeln.
- marginRight => $n
-
Rechter Rand in Pixeln.
- marginTop => $n (Default: 70)
-
Oberer Rand in Pixeln.
- mode => $mode (Default: 'lines')
-
Art der Kurvendarstellung: 'lines', 'markers', 'text', 'none'. Die ersteren drei können auch mit '+' verbunden werden.
- name => $name (Default: 'plot')
-
Name des Plot. Der Name wird als CSS-Id für den Div-Container und als Variablenname für die JavaScript-Instanz verwendet.
- plotBackground => $color
-
Hintergrundfarbe des Plot-Bereichs.
- plotBox => $bool (Default: 1)
-
Zeichne eine Box um den Plotbereich. Die Box hat die Farbe der Achsen (siehe axisColor).
- shape => 'spline'|'linear'|'hv'|'vh'|'hvh'|'vhv' (Default: 'spline')
-
Legt die Linienform fest.
- title => $str
-
Titel des Plot. Wird über das Diagramm gesetzt. Typischerweise der Name des gemessenen Parameters.
- x => \@x (Default: [])
-
Referenz auf Array der Zeit-Werte (bevorzugt in JavaScript-Epoch).
- xSpikeFormat => $timeFormat ('%Y-%m-%d %H:%M:%S')
-
Format der Spike-Beschriftung für die X-Koordinate. Siehe: https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format.
- xTickFormat => $timeFormat ('%Y-%m-%d %H:%M')
-
Format der Zeitachsen-Beschriftung. Siehe: https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format.
- y => \@y (Default: [])
-
Referenz auf Array der Y-Werte (Weltkoordinaten).
- yMin => $val
-
Kleinster Wert auf der Y-Achse. Der Default 'undefined' bedeutet, dass der Wert aus den Daten ermittelt wird.
- yMax => $val
-
Größter Wert auf der Y-Achse. Der Default 'undefined' bedeutet, dass der Wert aus den Daten ermittelt wird.
- ySide => 'left'|'right' (Default: 'left' Default von plotly.js)
- yTitle => $str
-
Beschriftung an der Y-Achse. Typischerweise die Einheit des gemessenen Parameters.
Returns
Objekt
Description
Instantiiere ein Objekt der Klasse und liefere eine Referenz auf dieses Objekt zurück.
Klassenmethoden
cdnUrl() - Liefere CDN URL
Synopsis
$url = $this->cdnUrl;
Returns
URL (String)
Description
Liefere den CDN URL der neusten Version von Plotly.js.
Objektmethoden
html() - Generiere HTML
Synopsis
$html = $ch->html($h);
Returns
HTML-Code (String)
Description
Liefere den HTML-Code der Plot-Instanz.
js() - Generiere JavaScript
Synopsis
$js = $ch->js;
Returns
JavaScript-Code (String)
Description
Liefere den JavaScript-Code für die Erzeugung Plot-Instanz.
VERSION
1.184
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.