Verwenden von Diagrammen mit interaktiver Kommunikation

Mithilfe von Diagrammen in einer interaktiven Kommunikation können Sie große Mengen von Informationen zu einem einfach zu analysierenden und verständlichen visuellen Format zusammenfassen

Ein Diagramm oder Diagramm ist eine visuelle Darstellung von Daten. Sie fasst große Mengen von Informationen in ein leicht verständliches visuelles Format zusammen, 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:

• Kreisdiagramm
• Spalte
• Donut
• Balken (nur Webkanal)
• Line
• Linie und Punkt
• Punkt
• Bereich

Hinzufügen und Konfigurieren eines Diagramms in einer interaktiven Kommunikation

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

1. Ziehen Sie die Diagrammkomponente aus den Komponenten in der AEM Seitenleiste in einen der folgenden Druck- oder Webkanäle einer interaktiven Kommunikation:

   • Druckkanal: Zielbereich und Bildfeld
   • Webkanal: Bereich und Zielbereich

   Die abgelegte Diagrammkomponente erstellt einen Platzhalter für ein Diagramm.

2. Tippen Sie auf die Diagrammkomponente im Editor für interaktive Kommunikation und wählen Sie in der Komponenten-Symbolleiste die Option Konfigurieren ( ).

   Die Seitenleiste Eigenschaften wird mit den grundlegenden Eigenschaften des Diagramms angezeigt.

   
   Abbildung: Grundlegende Eigenschaften eines Liniendiagramms im Druckkanal

   
   Abbildung: Grundlegende Eigenschaften eines Linientypdiagramms im Webkanal

3. Konfigurieren Sie die grundlegenden Eigenschaften des Diagramms für den Druckkanal und den Webkanal. Neben den allgemeinen Eigenschaften gibt es Eigenschaften, die spezifisch für den Druck- und Webkanal und den Diagrammtyp sind.

   • Name: Name des Diagrammobjekts. Der Name des Diagramms, das Sie hier angeben, erscheint nicht in der Diagrammausgabe, sondern wird in Regeln verwendet, um auf das Diagramm zu verweisen.

   • Diagrammtyp: Geben Sie den Diagrammtyp an: Kreis-, Spalten-, Ring-, Linien-, Linien- und Punkt-, Punkt- oder Bereichsdiagramm.

   • Objekt ausblenden: Wählen Sie diese Option aus, um die Grafik in der endgültigen Ausgabe auszublenden.

   • Geben Sie Folgendes an für x-Achse und y-Achse:

     • Titel: Geben Sie die Titel für die X- und Y-Achse an, die in der interaktiven Kommunikation angezeigt werden sollen.
     • **Datenmodellobjekt ***: Suchen Sie nach Datenmodellobjekten für die X- und Y-Achse des Diagramms und wählen Sie sie aus dem Formulardatenmodell aus, das beim Erstellen der interaktiven Kommunikation angegeben wurde. 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.
     • Funktion: Um die Werte auf der Achse mithilfe statistischer Funktionen zu berechnen, wählen Sie Funktion für die X/Y-Achse. Weitere Informationen zu Funktionen finden Sie unter Funktionen im Diagramm verwenden und Beispiel 2: Anwendung der Summen- und Mittelfunktionen in einem Liniendiagramm.
   HINWEIS

   Für den Druckkanal sollte das Datenmodellobjekt, das Sie binden, auf der X-Achse vom Typ Zahl, Zeichenfolge oder Datum sein. Auf der Y-Achse sollte das Datenmodellobjekt, das Sie binden, vom Typ Zahl sein. Es wird empfohlen, die rechte Legende im Druckkanal zu verwenden.

   Weitere Informationen zu Diagrammeigenschaften finden Sie unter Grundlegende Eigenschaften in Diagrammen.

4. (Nur Druckkanal) Geben Sie in den Agenteneinstellungen an, ob es für den Agenten obligatorisch ist, dieses Diagramm zu verwenden. Wenn i Es ist erforderlich, dass der Agent dieses Diagramm verwendet nicht ausgewählt ist, kann der Agent auf das Augensymbol für das Diagramm auf der Registerkarte Inhalt der Benutzeroberfläche des Agenten tippen, um das Diagramm ein-/auszublenden.

   

5. Tippen Sie in der Seitenleiste "Eigenschaften"auf .

   Vorschau, um das Erscheinungsbild und die Daten des Diagramms anzuzeigen. Kehren Sie bei Bedarf zurück, um die Eigenschaften des Diagramms neu zu konfigurieren.

6. Kehren Sie zu anderen Änderungen in der interaktiven Kommunikation zurück.

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.

Anhand eines Kreditkartenauszugs, der mit einer interaktiven Kommunikation generiert wurde, werden wir die erforderlichen Informationen in den grundlegenden Eigenschaften im Detail verstehen. Angenommen, Sie möchten ein Diagramm erstellen, in dem die Höhe der verschiedenen Ausgaben in der Anweisung dargestellt wird. Sie möchten verschiedene Arten von Diagrammen für die Druck- und Webausgabe der interaktiven Kommunikation verwenden.

Dazu müssen Sie Folgendes angeben:

• Diagrammtyp - in diesem Beispiel Spalte für den Druckkanal und Ringdiagramm für den Webkanal

• Datenmodellobjekte als Quelle für die X- und Y-Achse des Diagramms - in diesem Beispiel Transaktionsbetrag für die X-Achse und Ausgabenname für die Y-Achse.

• Titel für die X- und Y-Achse (für das Säulentypdiagramm im Druckkanal nur in diesem Beispiel) - in diesem Beispiel Betrag ($) für die X-Achse und Kosten für die Y-Achse.

• Beschriftungsrichtung (nur für das Diagramm vom Typ Spalte im Druckkanal in diesem Beispiel) - in diesem Beispiel Tilt Left

• QuickInfo zur Anzeige bei der Maus über eine Ausgabe (nur Webkanal) - in diesem Beispiel ${x}: $ ${y}, das als [Expense Label: $ Amount] (Beispiel: Besuch des Themenparks: $ 315)

Abbildung: Spaltendiagramm in der Druckausgabe einer interaktiven Kommunikation

A. Y-Achse - Aus der Eigenschaft des Formulardatenmodells abgerufener Betrag und die Eigenschaft Titel auf Betrag ($) B. Beschriftungsrichtung der X-Achse auf Linksbündig eingestellt C. X-Achse - Ausgabenbeschreibung, die aus der Eigenschaft des Formulardatenmodells und der Eigenschaft Titel abgerufen wird, die auf "Spesenkonto"eingestellt ist

Abbildung: Ringdiagramm in der Webausgabe einer interaktiven Kommunikation

A. Die Eigenschaft "Innerer Radius"des Donuts ist festgelegt. B. Die Eigenschaft "Legende anzeigen"ist ausgewählt und die Eigenschaft "Legendenposition"ist auf "Rechts"festgelegt. C. QuickInfo zeigt die Details des Elements beim Bewegen der Maus an - QuickInfo ist auf ${x} festgelegt: $ $

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.

Abbildung: Liniendiagramm ohne Funktion mit drei "Bed and Breakfast"-Transaktionen

Sum-Funktion

Sie können die Funktion sum anwenden, um Werte mehrerer Instanzen derselben Dateneigenschaft hinzuzufügen und sie nur einmal anzuzeigen. Im folgenden Diagramm wird beispielsweise die Summenfunktion auf die Y-Achse angewendet, um den Betrag der drei Bed and Breakfast-Transaktionen ($99.45, $78 und $12) zu addieren und nur eine Transaktion ($189.45) anzuzeigen.

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

Häufigkeitsfunktion

Die Funktion Frequenz gibt die Anzahl der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse zurück. Mit der Anwendung der Frequenzfunktion auf der y-Achse (Amount/TransAmount) zeigt das Diagramm an, dass es drei Vorkommen von Bed and Breakfast-Transaktionen und ein Vorkommen von restlichen Transaktionen gegeben hat.

Grundlegende Eigenschaften in Diagrammen

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

Name Eine Kennung für das Diagrammelement. Der Name ist nicht im Diagramm sichtbar, aber hilfreich, wenn von anderen Komponenten, Skripten und SOM-Ausdrücken auf das Element verwiesen wird.

Titel (nur Druckkanal) Gibt den Titel des Diagramms an.

Diagrammtyp Gibt den Typ des Diagramms an, das Sie generieren möchten. Die verfügbaren Optionen sind Kreis, Spalte, Ringdiagramm, Balken (nur Webkanal), Linie, Linie und Punkt, Punkt und Bereich. Weitere Informationen finden Sie unter Beispiel 1: Diagrammausgabe in Druck und Web.

X-Achse > Titel Gibt den Titel für die X-Achse an.

X-Achse > Datenmodellobjekt * Geben Sie den Namen des Formulardatenmodellsammlungselements an, das auf der X-Achse dargestellt werden soll.

X-Achse > Funktion Gibt die statistische/benutzerdefinierte Funktion an, die für die Berechnung der Werte auf der X-Achse verwendet werden soll. Weitere Informationen zu Funktionen finden Sie unter Verwenden von Funktionen in Grafik und Beispiel 2: Anwendung der Summen- und Mittelfunktionen in einem Liniendiagramm.

X-Achse > Beschriftungsrichtung Richtung des Titels auf dem Diagramm im Druckkanal. Wenn Sie die Richtung der Beschriftung als "Benutzerdefinierte Drehung"wählen, wird das Feld "Benutzerdefinierter Drehwinkel (Grad)"angezeigt. Im Feld Benutzerdefinierter Drehwinkel (Grad) können Sie den Drehwinkel in Schritten von 15 Grad wählen.

Y-Achse > Titel Gibt den Titel für die Y-Achse an.

Y-Achse > Datenmodellobjekt * Gibt das Formulardatenmodellsammlungselement an, das auf der y-Achse dargestellt werden soll. Im Druckkanal sollte das Datenmodellobjekt für die Y-Achse vom Typ Zahl sein.

Y-Achse > Funktion Gibt die statistische/benutzerdefinierte Funktion an, die für die Berechnung der Werte auf der Y-Achse verwendet werden soll. Weitere Informationen zu Funktionen finden Sie unter Verwenden von Funktionen in Grafik und Beispiel 2: Anwendung der Summen- und Mittelfunktionen in einem Liniendiagramm.

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.

Höhe (nur Druckkanal) Höhe des Diagramms in Pixel.

Breite (nur Druckkanal) Breite des Diagramms in Pixel.

QuickInfo (nur Webkanal) Gibt das Format an, in dem die QuickInfo beim Bewegen des Mauszeigers auf einem 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 den Mauszeiger auf einen Punkt, ein Balken oder einen Ausschnitt im Diagramm 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.

CSS-Klasse (nur Webkanal) Geben Sie den Namen einer CSS-Klasse im CSS-Klassenfeld an, um benutzerdefinierte Stile auf das Diagramm anzuwenden.

Obligatorischer Seitenumbruch vor (nur Druckkanal) Wählen Sie diese Option aus, um vor dem Diagramm einen obligatorischen Seitenumbruch hinzuzufügen und das Diagramm auf eine neue Seite zu setzen.

Obligatorischer Seitenumbruch nach (nur Druckkanal) Wählen Sie diese Option aus, um dem Diagramm einen obligatorischen Seitenumbruch hinzuzufügen und den Inhalt dem Diagramm auf einer neuen Seite anzuzeigen.

Einzug (nur Druckkanal) Geben Sie den Einzug des Diagramms links auf der Seite an.

Diagrammspezifische Konfigurationen Zusätzlich zu den allgemeinen Konfigurationen ist die folgende Diagrammkonfiguration verfügbar:

• Innerer Radius: Für Ringdiagramme verfügbar, um den Radius (in Pixel) des inneren Kreises im Diagramm anzugeben.

• Linienfarbe: für Linien-, Linien- und Punkt- sowie Flächendiagramme verfügbar sind, um den hexadezimalen Farbwert für die Linie im Diagramm anzugeben.

• Punktfarbe: für Punkt- und Linien- und Punktdiagramme verfügbar sind, um den hexadezimalen Farbwert für die Punkte im Diagramm anzugeben.

• Bereichsfarbe: für Bereichsdiagramme verfügbar sind, um den hexadezimalen Farbwert für den Bereich unter der Linie im Diagramm anzugeben.

Funktionen im Diagramm verwenden

Sie können ein Diagramm so konfigurieren, dass es mithilfe statistischer Funktionen Werte aus den Quelldaten für die Darstellung im Diagramm berechnet. Durch Anwenden von Funktionen in einem Diagramm können Sie Daten grafisch darstellen, die nicht direkt vom Formulardatenmodell bereitgestellt werden.

Während die Diagrammkomponente einige integrierte Funktionen enthält, können Sie eigene Funktionen schreiben und sie für die Verwendung in der Diagrammkonfiguration im Webkanal zur Verfügung stellen.

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

Benutzerdefinierte Funktionen im Web-Kanal

Neben den Standardfunktionen in Diagrammen können Sie auch benutzerdefinierte Funktionen in JavaScript™ schreiben und in der Funktionsliste der Diagrammkomponente für den Webkanal verfügbar machen.

Eine Funktion akzeptiert ein Array oder Werte und 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:

1. Fügen Sie die benutzerdefinierte Funktion in der Client-Bibliothek hinzu, die mit der relevanten 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 Alle speichern , um die Konfiguration zu speichern.

Die Funktion ist jetzt für die Verwendung im Diagramm verfügbar.

Ressourcen für Business.Adobe.com

Multichannel Communication Auto Text Summarization Style System Embedded Charts Theme Editor Document Generation