Diagrammkomponente in adaptiven Formularen und Dokumenten

Sie sehen sich Hilfeinhalte der folgenden Version an:

Vorsicht:

Adaptive Dokumente werden für den produktiven Einsatz im Rahmen eines "gated"-Programms unterstützt. Wenn Sie vorhaben, adaptive Dokumente in einer Produktionsumgebung zu verwenden, wenden Sie sich an das AEM Forms-Team unter DL-forms_documents@adobe.com.

Ein Diagramm ist eine visuelle Darstellung von Daten. So können Sie große Mengen an Informationen übersichtlich darstellen und komplexe Daten besser visualisieren, auswerten und analysieren.

Das AEM Forms Add-On-Paket bietet eine voreingestellte Diagrammkomponente. Sie können diese in Ihren adaptiven Formularen und Dokumenten für die visuelle Darstellung zweidimensionaler Daten in wiederholbaren Bereichen und Tabellenzeilen verwenden. Mit der Diagrammkomponente können Sie folgende Arten von Diagrammen hinzufügen und konfigurieren:

Kreisdiagramm
Donut
Balken
Säule
Linie
Linie und Punkt
Punkt
Bereich

Die Diagrammkomponente unterstützt und bietet integrierte statistische Funktionen – Summe, Mittelwert, Maximum, Minimum, Modus, Median, Bereich und Häufigkeit – an, um Werte in einem Diagramm zu berechnen und darzustellen. Zusätzlich zu den Funktionen im Lieferumfang können Sie Ihre eigenen benutzerdefinierten Funktionen verfassen und für die Verwendung in den Diagrammen freigeben.

Als Nächstes sehen wir, wie die Diagrammkomponente hinzugefügt und konfiguriert wird.

Die Diagrammkomponente steht in der AEM-Seitenleiste standardmäßig zur Verfügung. Sie können die Diagrammkomponente von der AEM-Seitenleiste im Bearbeitungsmodus auf das adaptive Dokument oder Formular ziehen und ablegen. Wenn Sie die Komponente ablegen, erstellt sie einen Platzhalter für ein Diagramm.

Hinweis:

Bevor Sie das Diagramm konfigurieren, sorgen Sie dafür, dass das Fenster oder die Tabellenzeile, für die Sie es konfigurieren, auf wiederholbar eingestellt ist. Sie können die minimalen und maximalen Werte für wiederholbare Bedienfelder oder Tabellenzeilen in der Registerkarte Wiederholungseinstellungen im Dialogfeld Komponente bearbeiten angeben.

Um das Diagramm zu konfigurieren, klicken Sie mit der rechten Maustaste auf die Diagrammkomponente und dann auf Bearbeiten, um das Dialogfeld zum Bearbeiten der Komponente zu öffnen. Das Dialogfeld enthält Registerkarten wie „Titel und Text“, „Konfiguration“, „Erweiterte Optionen“ und „Formatieren“, mit denen Sie das Diagramm konfigurieren können.

Auf der Registerkarte „Standard“ können Sie die folgenden Eigenschaften konfigurieren:

Elementname

Ein Bezeichner für das Diagrammelement in der JCR-Inhaltstruktur. Es ist zwar im Diagramm nicht sichtbar, jedoch nützlich, wenn von anderen Komponenten, Skripts und SOM-Ausdrücken auf das Element verwiesen wird.

Diagrammtyp

Gibt den Diagrammtyp an, den Sie erstellen möchten. Die verfügbaren Optionen sind Tortendiagramm, Ringdiagramm, Balken- und Säulendiagramme, Linien-, Linien- und Punktdiagramme sowie Punkt- und Bereichsdiagramme. In diesem Beispiel ist der Diagrammtyp Säule.

Sich wiederholender Zeilenname für Datenquelle

Gibt den Elementnamen der Tabellenzeile oder des wiederholbaren Bereich an, aus dem die Daten bezogen werden. In diesem Beispiel ist statementDetails der Elementname der wiederholbaren Zeile in der Detailtabelle der Auszüge.

X-Achse > Titel

Gibt den Namen für die x-Achse an. In diesem Beispiel ist der Name für die X-Achse Kategorie.

X-Achse > Feld

Gibt den Elementnamen des auf der X-Achse abzubildenden Felds (oder Zelle in einer Tabelle) an. Im Beispiel werden Kategorien auf der X-Achse konfiguriert. Der Elementname für die Zelle in der Spalte der Beispieltabelle ist Kategorie.

X-Achse > Funktion verwenden

Gibt die statistische Funktion an, die für die Berechnung der Werte auf der X-Achse zu verwenden ist. In diesem Beispiel ist die gewählte Option Ohne. Weitere Informationen zu den Funktionen finden Sie unter Funktionen im Diagramm verwenden.

Y-Achse > Titel

Gibt den Namen für die Y-Achse an. In diesem Beispiel ist der Name für die Y-Achse Spesenkonto.

Y-Achse > Feld

Gibt den Elementnamen des auf der Y-Achse abzubildenden Felds (oder Zelle in einer Tabelle) an. Im Beispiel konfigurieren Sie den Betrag auf der Y-Achse.Der Elementname für die Zelle in der Betrag-Spalte der Beispieltabelle ist Betrag.

Y-Achse > Funktion verwenden

Gibt die statistische Funktion an, die für die Berechnung der Werte auf der Y-Achse zu verwenden ist. In diesem Beispiel wird der Betrag aus jeder Kategorie zusammengerechnet und der berechnete Wert wird auf der Y-Achse abgebildet. Wählen Sie also die Option Summe aus der Dropdown-Liste Funktion verwenden. Weitere Informationen zu den Funktionen finden Sie unter Funktionen im Diagramm verwenden.

Legendenposition

Legt die Position der Legende in Bezug auf das Diagramm fest. Die verfügbaren Optionen sind rechts, links, oben und unten.

Legende anzeigen

Zeigen Sie eine Legende für das Diagramm an, wenn diese Option aktiviert ist.

QuickInfo

Legt das Format fest, in dem die QuickInfo auf dem Mauszeiger über einem Datenpunkt im Diagramm angezeigt wird. Der Standardwert ist ${x}(${y}). Je nach Diagrammtyp werden die Variablen ${x}und ${y} dynamisch durch die entsprechenden Werte für die X-Achse und Y-Achse ersetzt und in der QuickInfo angezeigt, wenn Sie die Maus über einen Punkt, ein Segment oder einen Balken im Diagramm bewegen. Wie im folgenden Beispiel wird QuickInfo als Einzelhandel(5870) angezeigt, wenn Sie den Mauszeiger in die Spalte Einzelhandelsgeschäfte halten.

Wenn Sie QuickInfos deaktivieren möchten, lassen Sie das Feld „Quickinfo“ leer. Diese Option ist nicht auf Linien- und Bereichsdiagramme anwendbar.

Diagrammspezifische Konfigurationen

Neben den allgemeinen Konfigurationen sind die folgenden spezifischen Diagrammkonfiguration verfügbar:

Innerer Radius: Für Ringdiagramme verfügbar, um den Radius (in Pixeln) für den inneren Kreis des Diagramms anzugeben.
Linienfarbe: Verfügbar für Linien-, Linien- und Punkt- sowie Bereichsdiagramme, um den hexadezimalen Farbwert für die Linie im Diagramm anzugeben.
Punktfarbe: Verfügbar für Punkt- und Liniendiagramme sowie Punktdiagramme, um den hexadezimalen Farbwert für den Punkt im Diagramm anzugeben.
Linienfarbe: Verfügbar für Bereichsdiagramme, um den hexadezimalen Farbwert für den Bereich unter der Linie im Diagramm anzugeben.

CSS-Klasse

Geben Sie den Namen einer CSS-Klasse im CSS-Klassen-Feld an, um benutzerdefinierte Stile im Diagramm anzuwenden.

In der Registerkarte „Grundeinstellungen“ definieren Sie die Art des Diagramms, Quellbedienfelds bzw. der Tabellenzeile, die Daten, die Werte, die auf der X-Achse und Y-Achse des Diagramms angezeigt werden können, und je nachdem auch die statistische Funktion, um die Werte für die grafische Darstellung auf dem Diagramm zu berechnen.

Im Folgenden werden wir im Einzelnen auf die Informationen eingehen, die zu dieser Registerkarte gehören und als Beispiel eine wiederholbare Tabelle in einem Kreditkartenauszug geben. Nehmen wir an, dass Sie ein Diagramm erstellen möchten, um die Gesamtkosten in den verschiedenen Kategorien im detaillierten Bereich eines Kreditkartenauszugs wie unten dargestellt anzuzeigen und zu erkennen.

Dazu müssen Sie Kategorien auf der x-Achse und der y-Achse ebenso wie die Gesamtausgaben in jeder Kategorie grafisch darstellen.

Der Kreditkartenauszug, der in diesem Beispiel verwendet wird, ist ein adaptives Dokument und der detaillierte Bereich eine Tabelle, die im Authoringmodus wie folgt aussieht.

Gehen wir einmal davon aus, dass die folgenden Anforderungen und die Bedingungen für das Generieren des Diagramms von Bedeutung sind:

Das Diagramm zeigt die Gesamtkosten in jeder Kategorie in der Tabelle mit den Einzelheiten des Auszugs an.
Der Diagrammtyp ist Säule, es kann aber auch ein anderer Diagrammtyp ausgewählt werden.
Die Tabellenzeile ist wiederholbar. Sie können dies im Bedienfeld Wiederholungseinstellungen der Tabellenzeileneigenschaften konfigurieren.
Der Elementname für die Zeile lautet statementDetails. Sie können dies in den Eigenschaften von Tabellenzeilen konfigurieren.
Der Elementname für die Zelle in der Spalte „Kategorie“ ist Kategorie.Sie können dies online angeben. Wählen Sie die Zelle aus und tippen Sie auf die Schaltfläche „Bearbeiten“.
Der Elementname für die Zelle in der Spalte „Betrag“ lautet Betrag. Die Tabellenzelle in der Spalte „Betrag“ im Bedienfeld ist außerdem ein numerisches Feld.

Mit der angegebenen Konfiguration wird das Säulendiagramm im Beispiel wie folgt angezeigt. Jede Farbe stellt eine Kategorie dar und einzelne Zeileneinträge oder Werte für eine Kategorie werden im Diagramm addiert.

Die Legende und QuickInfo werden wie folgt angezeigt.

Im „Stile“-Modus können Sie die Breite des Diagramms als Prozentsatz der Gesamtbreite im Formular oder Dokument und die Höhe in Pixeln festlegen. Außerdem haben Sie die Möglichkeit, Text, Hintergrund, Ränder, Effekte und CSS-Überschreibungen anzubringen.

Um in der Seitensymbolleiste auf den Formatierungs-Modus umzuschalten, tippen Sie auf > Stile.

Verfügbare Diagrammeigenschaften für Formatierung

Sie können das Diagramm so konfigurieren, dass Sie mit statistischen Funktionen Werte aus Quelldaten zur grafischen Darstellung im Diagramm berechnen können. Die Diagrammkomponente verfügt bereits über einige integrierte Funktionen, allerdings können Sie auch eigene Funktionen erstellen und für die Verwendung in der Diagrammkonfiguration freigeben.

Hinweis:

Sie können Funktionen verwenden, um Werte für die X- bzw. Y-Achse in einem Diagramm zu berechnen.

Die folgenden Funktionen sind standardmäßig in der Diagrammkomponente verfügbar:

Mittelwert (Durchschnitt)

Gibt den Durchschnitt der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Summe

Gibt die Summe aller Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Maximum

Gibt das Maximum der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Häufigkeit

Gibt die Anzahl der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Bereich

Gibt die Differenz zwischen dem Maximum und Minimum der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Median

Gibt den Wert, der auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse höhere und niedrigere Werte halbiert, an.

Minimum

Gibt das Minimum der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Modus

Gibt den Wert mit den häufigsten Instanzen auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an.

Neben der Verwendung der Standardfunktionen in Diagrammen können Sie benutzerdefinierte Funktionen in JavaScript schreiben und in der Liste der Funktionen in der Diagrammkomponente freigeben.

Eine Funktion akzeptiert ein Array oder Werte und einen Kategorienamen als Eingabe und gibt einen Wert zurück. Beispiel:

Multiply(valueArray, category) {
    var val = 1;
    _.each(valueArray, function(value) {
        val = val * value;
    });
    return val;
}

Wenn Sie eine benutzerdefinierte Funktion geschrieben haben, können Sie die folgenden Schritte ausführen, um sie für die Verwendung in der Diagrammkonfiguration freizugeben:

Fügen Sie die benutzerdefinierte Funktion in der Client-Bibliothek hinzu, die dem adaptiven Formular oder dem Dokument zugeordnet ist.
Erstellen Sie in CRXDe-Lite einen nt:unstructured-Knoten mit den folgenden Eigenschaften im Anwendungsordner:
- Legen Sie guideComponentType auf fd/af/reducer fest. (mandatory)
- Dem Wert muss ein vollständig qualifizierter Name der benutzerdefinierten JavaScript-Funktion zugewiesen werden. (mandatory)
- Weisen Sie jcr:description einen aussagekräftigen Namen zu. Er erscheint in der Dropdown-Liste Funktion verwenden. Beispiel: Multiplizieren.
- Weisen Sie qtip eine kurze Beschreibung der Funktion zu. Es wird als QuickInfo angezeigt, wenn der Zeiger über den Funktionsnamen in der Dropdown-Liste Funktion verwenden bewegt wird.
Klicken Sie auf Alle speichern, um die Konfiguration zu speichern.

Die Funktion steht nun zur Verwendung im Diagramm zur Verfügung.

Ein Diagramm wird automatisch aktualisiert, wenn der Benutzer einen der folgenden Schritte ausführt:

Hinzufügen oder Entfernen einer Instanz des Bedienfelds der Datenquelle oder Tabellenzeile.
Ändern Sie jeden auf der X- oder Y-Achse der Datenquelle oder Tabellenzeile grafisch dargestellten Wert.
Ändern Sie den Diagrammtyp.

Die chartType-Eigenschaft gibt den Typ des Diagramms an. Die möglichen Werte sind Kreisdiagramm, Tortendiagramm, Balken, Linie, Linie und Punkt, Punkt und Bereich. Es handelt sich um eine skriptfähige Eigenschaft. Das bedeutet, dass Sie sie in adaptiven Formularregeln zur Anpassung von Diagrammkonfigurationen verwenden können. Sehen wir uns dazu ein Beispiel an.

Sagen wir, dass Sie ein Säulendiagramm konfiguriert haben. Sie möchten den Benutzern allerdings auch die Möglichkeit bieten, einen anderen Diagrammtyp aus einer Dropdown-Liste auszuwählen und die Kurve neu zu zeichnen. Dies können Sie mithilfe der Eigenschaft chartType in einer Regel wie folgt erzielen:

Ziehen Sie aus der AEM-Seitenleiste eine Dropdown-Listen-Komponente auf das adaptive Formular.

Wählen Sie die Komponente aus und tippen Sie auf .

Geben Sie einen Namen für die Dropdownliste ein. Wählen Sie beispielsweise Diagrammtyp auswählen.

Sie können unterstützte Diagrammtypen im Abschnitt „Elemente“ hinzufügen, um die Dropdownliste zu füllen. Klicken Sie auf Fertig.

Auswählen eines Diagramms aus der Dropdown-Liste

Wählen Sie die Dropdownkomponente und tippen Sie auf . Im Regel-Editor können Sie im visuellen Regeleditor wie unten dargestellt eine Regel verfassen.