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, Ringdiagramm, Balken, Linie, Linie und Punkt, Punkt, Bereich und Quadrant.

Hinzufügen und Konfigurieren von Diagrammen in interaktiver Kommunikation

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

  1. Tippen Sie im Sidekick der interaktiven Kommunikation auf Komponenten .

  2. Ziehen Sie die Komponente Diagramm in eine der folgenden Komponenten:

    • Druckkanal: Zielbereich oder Bildfeld
    • Webkanal: Bereich oder Zielbereich
  3. Tippen Sie auf die Diagrammkomponente im Editor für interaktive Kommunikation und wählen Sie Konfigurieren ( configure_icon) aus der Komponenten-Symbolleiste.

    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) Geben Sie unter Agenteneinstellungen an, ob es für den Agenten obligatorisch ist, dieses Diagramm zu verwenden. Wenn die Option t Ist erforderlich, damit der Agent dieses Diagramm verwenden kann, kann der Agent auf das Augensymbol für das Diagramm auf der Registerkarte​[!UICONTROL Inhalt]​der Benutzeroberfläche des Agenten tippen, um das Diagramm ein- oder auszublenden.

    chart_agentproperties

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

    Tippen Sie auf Vorschau , um das Erscheinungsbild und die mit dem Diagramm 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 Webkanäle die folgenden Eigenschaften:

Feld Beschreibung Kanaltyp
Name Kennung für das Diagrammelement. Der Name des in diesem Feld angegebenen Diagramms ist nicht im Diagramm sichtbar. Sie wird verwendet, wenn von anderen Komponenten, Skripten und SOM-Ausdrücken auf das Element verwiesen wird. Druck und Web
Diagrammtyp Typ des Diagramms, das Sie generieren möchten. Die verfügbaren Optionen sind Torten, Spalten, Ringdiagramm, Balken, Linien, Linien und Punkte, Punkt und Bereich. Druck und Web
Serie > Multiserie Wählen Sie diese Option, um mehrere Reihen für die auf der X- und Y-Achse dargestellten Sammlungselemente des Formulardatenmodells hinzuzufügen. Druck und Web
Serie > Datenmodellobjekt Name des Collection-Elements des Formulardatenmodells, das dem Diagramm mehrere Reihen hinzufügen soll.
Wählen Sie eine übergeordnete Formulardatenmodellobjekteigenschaft für die Eigenschaften, die auf der X- und Y-Achse dargestellt werden, um eine aussagekräftige Reihe 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 Titel für die X-Achse. Druck und Web
X-Achse > Datenmodellobjekt

Name des auf der X-Achse abzubildenden Kollektionselements des Formulardatenmodells.

Wählen Sie zwei Sammlungs-/Array-Typ-Eigenschaften desselben übergeordneten Datenmodellobjekts aus, die im Verhältnis zueinander aussagekräftig 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 Titel für die Y-Achse. Druck und Web
Y-Achse > Datenmodellobjekt

Auf der Y-Achse abzuzeichnendes Datenmodellsammlungselement. Im Druckkanal sollte das Datenmodellobjekt für die Y-Achse vom Typ Zahl sein.

Wählen Sie zwei Sammlungs-/Array-Typ-Eigenschaften desselben übergeordneten Datenmodellobjekts aus, die im Verhältnis zueinander aussagekräftig sind, um sie auf der X- und Y-Achse eines Diagramms darzustellen.

Druck und Web
Y-Achse > Funktion Statistische/benutzerdefinierte Funktion zur Berechnung der Werte auf der y-Achse. Druck und Web
Objekt ausblenden Wählen Sie diese Option aus, um die Grafik 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 von links auf der Seite. Druck
QuickInfo

Format, in dem die QuickInfo beim Bewegen der Maus über einen Datenpunkt im Diagramm im Webkanal angezeigt wird. Der Standardwert ist ${x}(${y}). Je nach Diagrammtyp werden die Variablen ${x}und ${y} dynamisch durch die entsprechenden Werte auf der X-Achse und Y-Achse ersetzt und in der QuickInfo angezeigt, wenn Sie die Maus auf einen Punkt, einen Balken oder ein Segment im Diagramm zeigen.

Um die QuickInfo zu deaktivieren, lassen Sie das Feld Tooltip leer. Diese Option ist nicht auf Linien- und Bereichsdiagramme anwendbar. Siehe beispielsweise 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 diese Option aktiviert ist.
  • Legendenposition: Gibt die Position der Legende in Bezug auf das Diagramm an. Die verfügbaren Optionen sind rechts, links, oben und unten. Es wird empfohlen, die rechte Legende im Druckkanal zu verwenden.
  • Innerer Radius: Verfügbar für Ringdiagramme, um den Radius (in Pixel) des inneren Kreises im Diagramm anzugeben.
  • Linienfarbe: Verfügbar für Linien-, Linien- und Punkt- sowie Flächendiagramme, um die Farbe für die Linie im Diagramm anzugeben.
  • Punktfarbe: Verfügbar für Punktdiagramme und Linien- und Punktdiagramme, um die Farbe für die Punkte im Diagramm anzugeben.
  • Bereichsfarbe: Verfügbar für Bereichsdiagramme , um die Farbe für den Bereich unter der Linie im Diagramm anzugeben.
  • Referenzpunkt > Bindungstyp: Verfügbar für Quadrantendiagramme zum Angeben des Bindungstyps für den Referenzpunkt. 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 Sie aus der Dropdown-Liste Bindungstyp die Option Staticate auswählen, um den X-Achsenwert für den Referenzpunkt anzugeben.
  • Bezugspunkt > Y-Achse: Verfügbar für Quadrantendiagramme, wenn Sie aus der Dropdown-Liste Bindungstyp die Option Staticate auswählen, um den Y-Achsenwert für den Referenzpunkt anzugeben.
  • Referenzpunkt > Datenmodellobjekt für Serie: Verfügbar für mehrere Serien-Quadrantendiagramme, wenn Sie in der Dropdown-Liste "Bindungstyp"die Option Datenmodellobjekt auswählen. Definieren Sie die Formulareigenschaft des Formdatenmodells, um die Serie für den Referenzpunkt zu identifizieren.
  • Referenzpunkt > Datenmodellobjektwert für Serie: Verfügbar für mehrere Serien-Quadrantendiagramme, wenn Sie in der Dropdown-Liste "Bindungstyp"die Option Datenmodellobjekt auswählen. Verwenden Sie die Objekteigenschaft des Formulardatenmodells für Reihen und den in diesem Feld definierten Wert, um die Reihe für den Referenzpunkt zu identifizieren.
  • Referenz-Punkt > Datenmodellobjekt für Referenzpunkt: Verfügbar für Quadrantendiagramme, wenn Sie Datenmodellobjekt aus der Dropdown-Liste Bindungstyp auswählen. Definieren Sie eine Objekteigenschaft des Formulardatenmodells, die mit den Eigenschaften gleicht, die auf der X- und Y-Achse dargestellt werden. Definieren Sie außerdem für mehrere Reihen eine Datenmodellobjekteigenschaft, die eine untergeordnete Entität der für die Serie definierten Datenmodellobjekteigenschaft ist.
  • Reference Point > Data Model Object Value for Reference Point: Verfügbar für Quadrantendiagramme, wenn Sie Datenmodellobjekt aus der Dropdown-Liste Bindungstyp auswählen. 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.
    Quadranten Beschriftungen > Oben links: Verfügbar für Quadrantendiagramme, um den Namen für den Quadranten oben links anzugeben.
  • Quadranten Beschriftungen > 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

Während die Diagrammkomponente einige integrierte Funktionen enthält, können Sie benutzerdefinierte Funktionen schreiben und sie für die Verwendung in der Diagrammkonfiguration im Webkanal verfügbar machen.

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

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

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

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

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

​RangeGibt 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.

​MedianGibt den Wert zurück, der auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse die höheren und niedrigeren Werte in der Hälfte trennt.

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

​ModeGibt den Wert mit den meisten Vorkommen auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse zurück.

Weitere Informationen finden Sie unter Beispiel 2: Anwendung von Summen- und Frequenzfunktionen in einem Liniendiagramm.

Benutzerdefinierte Funktionen im Webkanal

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 Client-seitiger Bibliotheken.

  2. Um die benutzerdefinierte Funktion in der Dropdown-Liste "Funktion"anzuzeigen, erstellen Sie in CRXDe Lite einen Knoten nt:unstructured im Ordner "apps"mit den folgenden Eigenschaften:

    • Fügen Sie die Eigenschaft guideComponentType mit dem Wert 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, der als Name der benutzerdefinierten Funktion angezeigt werden soll, der in der Dropdown-Liste Funktion angezeigt wird. Beispiel:Multiplizieren.

    • Fügen Sie die Eigenschaft qtip mit dem 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 Allgemein definieren Sie den Diagrammtyp, die Eigenschaften des Datenmodells des Quellformulars, die Daten enthalten, die Beschriftungen, die auf der X- und Y-Achse des Diagramms dargestellt werden sollen, und optional die statistische Funktion, um die Werte für die grafische Darstellung im Diagramm zu berechnen.

Im Folgenden werden die in den grundlegenden Eigenschaften erforderlichen Informationen mithilfe eines Kartenauszugs, der mithilfe einer interaktiven Kommunikation generiert wurde, detailliert beschrieben. 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 für Druck

Geben Sie dazu die folgenden Eigenschaften an:

  • Name - Geben Sie den Namen für das Diagramm an.
  • Diagrammtyp - Wählen Sie in der Dropdown-Liste die Option ​Spalten aus.
  • Titel - Geben Sie den Ausgabentyp für die X-Achse und den Transaktionsbetrag für die Y-Achse an.
  • Datenmodellobjekte - Wählen Sie die Eigenschaften des Datenmodellobjekts aus, um Datenbindungen für die X-Achse (Ausgabetyp) und die Y-Achse (Transaktionsbetrag) zu erstellen.

Spaltendiagramm im Druckkanal einer interaktiven Kommunikation

Spaltendiagramm im Druckkanal einer interaktiven Kommunikation

Ringdiagramm für Web

Geben Sie dazu die folgenden Eigenschaften an:

  • Name - Geben Sie den Namen für das Diagramm an.
  • Diagrammtyp - Wählen Sie in der Dropdown-Liste die Option ​Donutt aus.
  • Datenmodellobjekte - Wählen Sie die Eigenschaften des Datenmodellobjekts aus, um Datenbindungen für die X-Achse (Ausgabetyp) und die Y-Achse (Transaktionsbetrag) zu erstellen.
  • Innerer Radius - Geben Sie den Wert "Innerer Radius"als 150 an, um den Radius (in Pixel) des inneren Kreises im Diagramm anzugeben.
  • QuickInfo - Verwenden Sie das Standardformat ${x}(${y}), um die QuickInfo anzuzeigen. Die QuickInfo wird wie folgt angezeigt: Ausgabentyp (Transaktionsbetrag). Beispiel: Schulden für Bitcoin(10000).

Ringdiagramm im Webkanal einer interaktiven Kommunikation

Ringdiagramm im Webkanal 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 Beispiel für einen Kreditkartenauszug, um zu verstehen, wie Summen- und Häufigkeitsfunktionen auf das Diagramm angewendet werden können.

Liniendiagramm ohne Funktion mit zwei "Debit for AirBnB"-Transaktionen

Liniendiagramm ohne Funktion mit zwei "Debit for 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 beispielsweise die Summenfunktion auf der Y-Achse angewendet, um den Betrag der beiden Debit-Vorgänge 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 Funktion Frequenz gibt die Anzahl der Werte der Y-Achse für einen bestimmten Wert auf der anderen Achse zurück. Mit Anwendung der Frequenzfunktion auf der Y-Achse (Transaktionsbetrag) zeigt das Diagramm an, dass es zwei Vorkommen von Debit für AirBnB-Transaktionen und ein Vorkommen von Resttransaktionen gegeben hat.

Liniendiagrammfrequenz

Beispiel 3: Quadrantendiagramm für mehrere Reihen im Web

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

Geben Sie dazu die folgenden Eigenschaften an:

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

  • Diagrammtyp: Wählen Sie aus der Dropdown-Liste die Option ​Quadranten aus.

  • Aktivieren Sie das Kontrollkästchen Mehrere Reihen .

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

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

  • Wählen Sie im Abschnitt Referenzpunkt Statisch als Bindungstyp aus.

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

  • Geben Sie die quadranten 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