Verwenden von Diagrammen mit interaktiver Kommunikation

Ein Diagramm ist eine visuelle Darstellung von Daten. Es verdichtet große Mengen an Informationen in ein leicht verständliches visuelles Format, sodass die Empfänger der interaktiven Kommunikation komplexe Daten besser visualisieren, interpretieren und analysieren können.

Beim Erstellen einer interaktiven Kommunikation können Sie Diagramme hinzufügen, um zweidimensionale Daten vom Formulardatenmodell der Vorlage für die interaktive Kommunikation visuell darzustellen. Mit der Diagrammkomponente können Sie die folgenden Arten von Diagrammen hinzufügen und konfigurieren: Torten-, Spalten-, Ring-, Balken-, Linien-, Linien- und Punkt-, Punkt-, Flächen- und Quadrantendiagramm

Hinzufügen und Konfigurieren eines Diagramms in einer interaktiven Kommunikation

Führen Sie die folgenden Schritte aus, um ein Diagramm in einer interaktiven Kommunikation hinzuzufügen und zu konfigurieren:

  1. Tippen Sie auf Komponenten aus dem Sidekick der interaktiven Kommunikation.

  2. Ziehen Sie die Diagrammkomponente per Drag-and-Drop auf eine der folgenden Komponenten:

    • Druckkanal: Zielbereich oder Bildfeld
    • Web-Kanal: Bedienfeld oder Zielbereich
  3. Tippen Sie auf die Diagrammkomponente im Editor für interaktive Kommunikation und wählen Sie Konfigurieren ( configure_icon) in der Symbolleiste „Komponenten“.

    Die Diagrammeigenschaften werden im linken Bereich angezeigt.

    Grundlegende Eigenschaften eines Zeilentypdiagramms im Druckkanal

    Grundlegende Eigenschaften eines Zeilentypdiagramms im Druckkanal

    Grundlegende Eigenschaften eines Zeilentypdiagramms im Webkanal

    Grundlegende Eigenschaften eines Zeilentypdiagramms im Webkanal

  4. Konfigurieren Sie die Diagrammeigenschaften basierend auf dem Kanaltyp.

  5. (Nur Druckkanal) Legen Sie in den Agenteneinstellungen fest, ob der Agent dieses Diagramm verwenden muss. Wenn die Option Obligatorisch für Agenten, dieses Diagramm zu verwenden nicht ausgewählt ist, kann der Agent zum Ein- bzw. Ausblenden des Diagramms auf das Augensymbol für das Diagramm auf der Registerkarte Inhalt der Benutzeroberfläche für Agenten tippen.

    chart_agentproperties

  6. Tippen Sie auf done_icon, um die Tabelleneigenschaften zu speichern.

    Tippen Sie auf Vorschau, um das Erscheinungsbild und die mit der Grafik verknüpften Daten anzuzeigen. Tippen Sie auf Bearbeiten, um die Eigenschaften des Diagramms neu zu konfigurieren.

Konfigurieren von Diagrammeigenschaften

Konfigurieren Sie beim Erstellen von Diagrammen für Druck- und Web-Kanäle die folgenden Eigenschaften:

Feld Beschreibung Kanaltyp
Name Bezeichner für das Diagrammelement. Der in diesem Feld angegebene Name des Diagramms ist nicht im Diagramm sichtbar. Er wird verwendet, wenn von anderen Komponenten, Skripten und SOM-Ausdrücken auf das Element verwiesen wird. Druck und Web
Diagrammtyp Gibt den Diagrammtyp an, den Sie erstellen möchten. Die verfügbaren Optionen sind Torten-, Spalten-, Ring-, Balken-, Linien-, Linien- und Punkt-, Punkt- und Flächendiagramm. Druck und Web
Serie > Multiserie Wählen Sie diese Option, um mehrere Serien für die auf der X- und Y-Achse dargestellten Sammlungselemente des Formulardatenmodells hinzuzufügen. Druck und Web
Serie > Datenmodellobjekt Name des Sammlungselements des Formulardatenmodells, das dem Diagramm mehrere Serien hinzufügen soll.
Wählen Sie eine übergeordnete Objekteigenschaft des Formulardatenmodells für die Eigenschaften, die auf der X- und Y-Achse dargestellt werden, um eine aussagekräftige Serie zu bilden. Das Datenmodellobjekt, das Sie binden, muss vom Typ Zahl, Zeichenfolge oder Datum sein.
Druck und Web
Gestapelt anzeigen Auswählen, um die Werte jeder Serie übereinander zu stapeln. Druck und Web
X-Achse > Titel Name für die X-Achse. Druck und Web
X-Achse > Datenmodellobjekt

Name des Formulardatenmodellsammlungselements, das auf der X-Achse abgetragen werden soll.

Wählen Sie zwei Sammlungs-/Array-Typ-Eigenschaften desselben übergeordneten Datenmodellobjekts, die in Bezug zueinander bedeutungsvoll sind, um sie auf der X- und Y-Achse eines Diagramms darzustellen. Das Datenmodellobjekt, das Sie binden, muss vom Typ Zahl, Zeichenfolge oder Datum sein.

Druck und Web
Y-Achse > Titel Name für die Y-Achse. Druck und Web
Y-Achse > Datenmodellobjekt

Formulardatenmodellsammlungselement, das auf der Y-Achse abgetragen werden soll. Im Druckkanal muss das Datenmodellobjekt für die Y-Achse vom Typ Zahl sein.

Wählen Sie zwei Sammlungs-/Array-Typ-Eigenschaften desselben übergeordneten Datenmodellobjekts, deren Beziehung zueinander bedeutungsvoll ist, um sie auf der X- und Y-Achse eines Diagramms darzustellen.

Druck und Web
Y-Achse > Funktion Statistische/benutzerdefinierte Funktion, die für die Berechnung der Werte auf der Y-Achse zu verwenden ist. Druck und Web
Objekt ausblenden Wählen Sie diese Option, um das Diagramm in der endgültigen Ausgabe auszublenden. Druck und Web
Titel Titel des Diagramms. Druck
Höhe Höhe des Diagramms in Pixel. Druck
Breite Breite des Diagramms in Pixel. Sie können die Breite des Diagramms im Webkanal mithilfe der Stil-Ebene oder durch Anwenden eines Designs steuern. Druck
Obligatorischer Seitenumbruch vor Wählen Sie diese Option aus, um vor dem Diagramm einen obligatorischen Seitenumbruch hinzuzufügen und das Diagramm oben auf einer neuen Seite einzufügen. Druck
Obligatorischer Seitenumbruch nach Wählen Sie diese Option aus, um vor dem Diagramm einen obligatorischen Seitenumbruch hinzuzufügen und das Diagramm oben auf einer neuen Seite einzufügen. Druck
Einzug Einzug des Diagramms links auf der Seite. Druck
QuickInfo

Format, in dem die QuickInfo beim Mouseover auf einem Datenpunkt im Diagramm in Webkanal 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 in der Quickinfo bewegen.

Wenn Sie QuickInfo deaktivieren möchten, lassen Sie das Feld Quickinfo leer. Diese Option ist nicht auf Linien- und Bereichsdiagramme anwendbar. Beispiel: Beispiel 1: Diagrammausgabe in Druck und Web.

Web
Diagrammspezifische Konfigurationen

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

  • Legende anzeigen: Zeigt eine Legende für das Torten- oder Ringdiagramm an, wenn aktiviert.
  • Legendenposition: Legt die Position der Legende in Bezug auf das Diagramm fest. Die verfügbaren Optionen sind rechts, links, oben und unten. Es wird empfohlen, die rechte Legende im Druckkanal zu verwenden.
  • 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 Liniendiagramme, Linien- und Punktdiagramme sowie Bereichsdiagramme, um den hexadezimalen Farbwert für die Linie im Diagramm anzugeben.
  • Punktfarbe: Verfügbar für Punktdiagramme sowie Linien- und 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.
  • Referenzpunkt und Bindungstyp: Verfügbar für Quadrantendiagramme, um den Bindungstyp für den Referenzpunkt angeben. Verwenden Sie die statische Text- oder Datenmodellobjekteigenschaft, um den Wert für den Referenzpunkt zu definieren.
  • Bezugspunkt > X-Achse: Verfügbar für Quadrantendiagramme, wenn Statisch aus der Dropdown-Liste „Bindungstyp“ ausgewählt wird, um den Wert der X-Achse für den Referenzpunkt anzugeben.
  • Bezugspunkt > Y-Achse: Verfügbar für Quadrantendiagramme, wenn Statisch aus der Dropdown-Liste „Bindungstyp“ ausgewählt wird, um den Wert der Y-Achse für den Referenzpunkt anzugeben.
  • Referenzpunkt und Datenmodellobjekt für Serie: Verfügbar für Quadrantendiagramme mit mehreren Serien, wenn Sie Datenmodellobjekt aus der Dropdown-Liste „Bindungstyp“ auswählen. Definieren Sie die Formulareigenschaft des Formdatenmodells, um die Serie für den Referenzpunkt zu identifizieren.
  • Referenzpunkt und Datenmodellobjektwert für Serie: Verfügbar für Quadrantendiagramme mit mehreren Serien, wenn Sie Datenmodellobjekt aus der Dropdown-Liste „Bindungstyp“ auswählen. Die Eigenschaft des Formulardatenmodellobjekts für Serien und der in diesem Feld angegebene Wert werden verwendet, um die Serie für den Referenzpunkt zu identifizieren.
  • Referenzpunkt > Datenmodellobjekt für Referenzpunkt: Verfügbar für Quadrantendiagramme, wenn Datenmodellobjekt aus der Dropdown-Liste „Bindungstyp“ ausgewählt wird. Definieren Sie eine Objekteigenschaft des Formulardatenmodells, die eine Geschwister-Entität der auf der X-Achse und der Y-Achse dargestellten Eigenschaften darstellt. Definieren Sie für mehrere Serien außerdem eine Datenmodellobjekteigenschaft, die eine untergeordnete Entität der für die Serie definierten Datenmodellobjekteigenschaft ist.
  • Referenzpunkt > Datenmodellobjektwert für Referenzpunkt: Verfügbar für Quadrantendiagramme, wenn Datenmodellobjekt aus der Dropdown-Liste „Bindungstyp“ ausgewählt wird. Verwenden Sie die Objekteigenschaft des Formulardatenmodells für den Referenzpunkt und den in diesem Feld definierten Wert, um den Referenzpunkt für das Diagramm zu identifizieren.
    Quadrantenbeschriftungen > Oben links: Verfügbar für Quadrantendiagramme, um den Namen für den Quadranten oben links anzugeben.
  • Quadrantenbeschriftungen > Oben rechts: Verfügbar für Quadrantendiagramme, um den Namen für den Quadranten oben rechts anzugeben.
  • Quadranten Beschriftungen > Unten rechts: Verfügbar für Quadrantendiagramme, um den Namen für den Quadranten unten rechts anzugeben.
  • Quadranten Beschriftungen > Unten links: Verfügbar für Quadrantendiagramme, um den Namen für den Quadranten unten links anzugeben.
Druck und Web

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. Durch Anwenden von Funktionen in einem Diagramm können Sie Daten darstellen, die nicht direkt vom Formulardatenmodell bereitgestellt werden.

Funktionen in Diagrammen

Auch wenn die Diagrammkomponente mit einigen eingebauten Funktionen ausgestattet ist, können Sie eigene Funktionen schreiben und sie für die Verwendung in der Diagrammkonfiguration im Web-Kanal verfügbar machen.

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 zurück.

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

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

Häufigkeit Gibt die Anzahl der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse zurück.

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

Median Gibt den Wert zurück, der höhere und niedrigere Werte auf der X- oder Y-Achse bei einem bestimmten Wert auf der anderen Achse in der Mitte trennt.

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

Modus Gibt den Wert mit den meisten Vorkommnissen auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse zurück.

Weitere Informationen finden Sie in Beispiel 2: Anwendung von Summen- und Häufigkeitsfunktionen in einem Liniendiagramm.

Benutzerdefinierte Funktionen im Web-Kanal

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 mit der entsprechenden interaktiven Kommunikation verknüpft ist. Weitere Informationen finden Sie unter Konfigurieren der Sendeaktion und Verwenden von Client-seitigen Bibliotheken.

  2. Um die benutzerdefinierte Funktion in der Dropdownliste „Funktion“ anzuzeigen, erstellen Sie in CRXDe Lite einen nt:unstructured-Knoten im Apps-Ordener mit den folgenden Eigenschaften:

    • Fügen Sie die Eigenschaft guideComponentType mit einem Wert wie fd/af/reducer hinzu. (mandatory)

    • Fügen Sie die Eigenschaft value zu einem vollständig qualifizierten Namen der benutzerdefinierten JavaScript™-Funktion hinzu. (obligatorisch) und setzen Sie den Wert auf den Namen der benutzerdefinierten Funktion, z. B. Multiplizieren, fest.

    • Fügen Sie die Eigenschaft jcr:description mit dem Wert hinzu, den Sie als Name der benutzerdefinierten Funktion anzeigen möchten, die in der Dropdown-Liste „Funktion“ angezeigt wird. Beispiel:Multiplizieren.

    • Fügen Sie die Eigenschaft qtip mit einem Wert hinzu, der eine kurze Beschreibung der benutzerdefinierten Funktion darstellt. Es wird als QuickInfo angezeigt, wenn der Mauszeiger über den Funktionsnamen in der Dropdown-Liste Funktion bewegt wird.

  3. Klicken Sie auf Alle speichern, um die Konfiguration zu speichern.

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

Beispiel 1: Diagrammausgabe in Druck und Web

Auf der Registerkarte „Grundeinstellungen“ definieren Sie die Art des Diagramms, die Quellformulardatenmodelleigenschaften, die Daten enthalten, sowie die Beschriftungen, die auf der X-Achse und Y-Achse des Diagramms dargestellt werden können. Optional definieren Sie hier auch die statistische Funktion, um die Werte für die grafische Darstellung auf dem Diagramm zu berechnen.

Im Folgenden wird das Minimum der erfoderlichen Informationen in den Grundeinstellungen anhand des Beispiels einer Kreditkartenabrechnung, die mit einer interaktiven Kommunikation erstellt wurde, detailliert erläutert. Wenn Sie ein Diagramm generieren möchten, um die Höhe der verschiedenen Ausgaben in der Abrechnung darzustellen. Sie können verschiedene Diagrammarten für Druck- und Webausgabe der interaktiven Kommunikation verwenden.

Säulendiagramm zum Ausdrucken

Um dies zu erreichen, geben Sie die folgenden Eigenschaften an:

  • Name - Geben Sie den Namen für das Diagramm an.
  • Diagrammtyp - Wählen Sie Säulen aus der Dropdown-Liste aus.
  • Titel - Geben Sie für die X-Achse „Art der Ausgabe“ und für die Y-Achse „Transaktionsbetrag“ an.
  • Datenmodellobjekte - Wählen Sie die Eigenschaften der Datenmodellobjekte aus, um Datenbindungen für die X-Achse (Art der Ausgabe) und die Y-Achse (Transaktionsbetrag) zu erstellen.

Säulendiagramm in der Druckausgabe einer interaktiven Kommunikation

Säulendiagramm in der Druckausgabe einer interaktiven Kommunikation

Ringdiagramm für Webausgabe

Um dies zu erreichen, geben Sie die folgenden Eigenschaften an:

  • Name - Geben Sie den Namen für das Diagramm an.
  • Diagrammtyp - Wählen Sie Ring aus der Dropdown-Liste aus.
  • Datenmodellobjekte - Wählen Sie die Eigenschaften der Datenmodellobjekte aus, um Datenbindungen für die X-Achse (Art der Ausgabe) und die Y-Achse (Transaktionsbetrag) zu erstellen.
  • Innerer Radius - Geben Sie 150 als Wert für den inneren Radius an, um den Radius (in Pixel) des inneren Kreises des Diagramms festzulegen.
  • QuickInfo - Verwenden Sie das Standardformat ${x}(${y}) zur Anzeige der QuickInfo. Die QuickInfo wird wie folgt angezeigt: Art der Ausgabe (Transaktionsbetrag). Beispiel: Debit für Bitcoin (10000).

Ringdiagramm in der Webausgabe einer interaktiven Kommunikation

Ringdiagramm in der Webausgabe einer interaktiven Kommunikation

Beispiel 2: Anwendung von Summen- und Häufigkeitsfunktionen in einem Liniendiagramm

Durch Anwenden von Funktionen in einem Diagramm können Sie Daten darstellen, die nicht direkt vom Formulardatenmodell bereitgestellt werden. In diesem Beispiel verwenden wir ein Kreditkartenabrechnungsbeispiel, um zu verstehen, wie Summen- und Häufigkeitsfunktionen auf das Diagramm angewendet werden können.

Liniendiagramm ohne Funktion mit zwei „Debit für AirBnB“-Transaktionen

Liniendiagramm ohne Funktion mit zwei „Debit für AirBnB“-Transaktionen

Summenfunktion

Sie können die Summenfunktion anwenden, um Werte mehrerer Instanzen derselben Dateneigenschaft zusammenzufassen, und sie nur einmal anzeigen. Im folgenden Diagramm wird zum Beispiel die Summenfunktion auf die Y-Achse angewendet, um die Summe der drei „Debit für AirBnB“-Transaktionen (2050 und 1050) zu addieren und nur eine Transaktion (3100) anzuzeigen.

Die Summenfunktion kann Diagramme nützlicher machen, wenn Sie die Summe für viele Instanzen derselben Dateneigenschaft sortieren und anzeigen möchten.

Liniendiagrammsumme

Häufigkeitsfunktion

Die Häufigkeitsfunktion gibt die Anzahl der Werte auf der X-Achse für einen bestimmten Wert auf der anderen Achse an. Bei Anwendung der Häufigkeitsfunktion auf der Y-Achse (Transaktionsbetrag) zeigt das Diagramm an, dass zwei „Debit für AirBnB“-Transaktionen und der Rest der Transaktionsarten einmal aufgetreten sind.

Liniendiagrammhäufigkeit

Beispiel 3: Mehrreihen-Quadrantendiagramm in der Webausgabe

Das Diagramm zeigt den Betrag für die Transaktionen, die in einem bestimmten Datumsbereich durchgeführt wurden. Das Quadrantendiagramm bietet die Möglichkeit, den Diagrammbereich in vier beschriftete Abschnitte zu unterteilen. Das Diagramm verwendet einen statischen Bezugspunkt für die X- und Y-Achse. Verwenden Sie die Funktion der mehreren Reihen, um Daten auf Grundlage des Namens der Bank zu sortieren.

Um dies zu erreichen, geben Sie die folgenden Eigenschaften an:

  • Name: Geben Sie den Namen für das Diagramm an.

  • Diagrammtyp: Wählen Sie Quadrant aus der Dropdown-Liste aus.

  • Aktivieren Sie das Kontrollkästchen Mehrere Reihen.

  • Datenmodellobjekt: Geben Sie die Datenmodellobjekteigenschaft für die Reihe an. Die Datenmodellobjekteigenschaft für den Namen der Bank ist ein übergeordnetes Element der Datenmodellobjekteigenschaften, die in der X- und Y-Achse dargestellt werden.

  • Datenmodellobjekte: Wählen Sie die Eigenschaften der Datenmodellobjekte aus, um Datenbindungen für die X-Achse (Transaktionsdatum) und die Y-Achse (Transaktionsbetrag) zu erstellen.

  • Im Abschnitt Referenzpunkt wählen Sie Statisch als Bindungstyp.

  • Geben Sie die Werte für die Referenzpunkte der X- und Y-Achse an.

  • Geben Sie die Beschriftungen für die Quadranten oben links, oben rechts, unten rechts und unten links an.

  • Aktivieren Sie das Kontrollkästchen Legenden anzeigen, um die Farbcodes für die Banknamen anzuzeigen.

Quadrantendiagramme

Auf dieser Seite