Sie sehen sich Hilfeinhalte der folgenden Version an:

charts_hero image_update

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.

Diagramm hinzufügen

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.

Diagramm konfigurieren

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.

Basic

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

Konfigurierbare Diagrammeigenschaften

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.  

Konfiguration

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.

statement-details

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

statement-details-authoring

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.  

chart

Die Legende und QuickInfo werden wie folgt angezeigt.

chart-legent-tooltip

Formatierung

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

Funktionen im Diagramm verwenden

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.

Standardfunktionen

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.

Benutzerdefinierte Funktionen

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:

  1. Fügen Sie die benutzerdefinierte Funktion in der Client-Bibliothek hinzu, die dem adaptiven Formular oder dem Dokument zugeordnet ist.
  2. 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.
  3. Klicken Sie auf Alle speichern, um die Konfiguration zu speichern.
Die Funktion steht nun zur Verwendung im Diagramm zur Verfügung.
custom-function

Automatische Aktualisierung des Diagramms

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.

Verwenden Sie den Diagrammtyp in adaptiven Formularregeln

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:

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

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

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

  4. 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
  5. Wählen Sie die Dropdownkomponente und tippen Sie auf . Im Regel-Editor können Sie im visuellen Regeleditor wie unten dargestellt eine Regel verfassen.

    Festlegen von Diagrammregeln

    In diesem Beispiel ist der Elementname der Diagrammkomponente myChart.

    Alternativ können Sie die folgende Regel im Code-Editor erstellen.

    chart-code-rule

    Weitere Informationen zum Erstellen von Regeln finden Sie im Regeleditor.

  6. Klicken Sie auf Fertig, um die Änderungen zu speichern.

Jetzt können Sie einen Diagrammtyp aus der Dropdown-Liste auswählen und auf „Aktualisieren“ klicken, um die Grafik neu zu zeichnen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie