Diagramme in adaptiven Formularen af-charts

Ein Diagramm oder Graph 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 vorkonfigurierte Diagrammkomponente. Sie können diese in Ihren adaptiven Formularen und Dokumenten für die visuelle Darstellung zweidimensionaler Daten in wiederholbaren Bedienfeldern und Tabellen verwenden. Mit der Diagrammkomponente können Sie folgende Arten von Diagrammen hinzufügen und konfigurieren:

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

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

Hinzufügen eines Diagramms add-chart

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

Konfigurieren eines Diagramms configure-chart

Um das Diagramm zu konfigurieren, klicken Sie auf die Diagrammkomponente und dann auf . Daraufhin wird das Dialogfeld „Diagramm bearbeiten“ geöffnet. Es enthält etwa die Registerkarten „Titel und Text“, „Konfiguration“, „Erweiterte Optionen“ und „Formatieren“, mit denen Sie das Diagramm konfigurieren können.

Allgemein basic

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

Konfiguration configuration

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 Formulardokument und der detaillierte Bereich eine Tabelle, die im Authoring-Modus wie folgt aussieht.

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

Die Legende und QuickInfo werden wie folgt angezeigt.

Stile styling

Im Stilmodus 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 Stilmodus umzuschalten,  tippen Sie auf >> Stile.

Verwenden von Funktionen im Diagrammen use-functions

Sie können ein Diagramm so konfigurieren, dass es mithilfe statistischer Funktionen Werte aus den Quelldaten für die Darstellung im Diagramm berechnet. 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.

Standardfunktionen default-functions

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

Benutzerdefinierte Funktionen custom-functions

Neben der Verwendung der Standardfunktionen in Diagrammen können Sie benutzerdefinierte Funktionen in JavaScript schreiben und in der Liste der Funktionen in der Diagrammkomponente verfügbar machen.

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

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

Nachdem Sie eine benutzerdefinierte Funktion geschrieben haben, führen Sie die folgenden Schritte aus, um sie für die Verwendung in der Diagrammkonfiguration verfügbar zu machen:

Automatische Aktualisierung des Diagramms auto-refresh-chart

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

Verwenden des Diagrammtyps in adaptiven Formularregeln chart-in-rules

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 Benutzenden 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:

Jetzt können Sie einen Diagrammtyp aus der Dropdown-Liste auswählen. Wenn Sie dann auf „Aktualisieren“ klicken, wird das Diagramm neu gezeichnet.