Sie sehen sich Hilfeinhalte der folgenden Version an:

Mithilfe von Diagrammen in einer interaktiven Kommunikation können Sie große Informationsmengen zu einem einfach zu analysierenden und zu verstehenden visuellen Format zusammenfassen

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 folgende Arten von Diagrammen hinzufügen und konfigurieren:

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

Hinzufügen und Konfigurieren eines Diagramms in einer interaktiven Kommunikation

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

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

    • Druckkanal: Zielbereich  und Bildfeld
    • Webkanal: Teilfenster und Zielbereich

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

  2. Tippen Sie auf die Diagrammkomponente im Editor der interaktiven Kommunikation und wählen Sie aus der Symbolleiste Konfigurieren ().

    Die Eigenschaften-Seitenleiste wird mit den Grundeigenschaften des Diagramms im Fokus 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

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

    • Name*: Name des Diagrammobjekts. Der Name des Diagramms, das Sie hier angeben, wird nicht in der Diagrammausgabe angezeigt, wird jedoch in Regeln verwendet, um auf das Diagramm zu verweisen. 
    • Diagrammtyp: Geben Sie den Diagrammtyp an: Kreis-, Spalten-, Ring, Linien-, Linien- und Punkt-, Punkt- oder Flächendiagramm.  
    • Objekt ausblenden: Wählen Sie diese Option, um das Diagramm in der endgültigen Ausgabe auszublenden.   
    • Geben Sie Folgendes für die X-Achse und Y-Achse an:
      • Titel: Geben Sie die Titel für die X- und Y-Achse an, die in der interaktiven Kommunikation angezeigt werden sollen. 
      • Datenmodellobjekt*: Klicken Sie auf „Durchsuchen“ und wählen Sie die Datenmodellobjekte für die X- und Y-Achse des Diagramms aus dem Formulardatenmodell, das beim Erstellen der interaktiven Kommunikation angegeben wurden. 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.   
      • Funktion: Um statistische Funktionen zur Berechnung der Werte auf der Achse zu verwenden, wählen Sie die Funktion für die X/Y-Achse. Weitere Informationen zu Funktionen finden Sie unter Funktionen im Diagramm verwenden und Beispiel 2: Anwendung von Summen- und Mittelwertfunktionen in einem Liniendiagramm.

    Hinweis:

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

    Weitere Informationen zu Diagrammeigenschaften finden Sie unter Grundlegende Eigenschaften in Diagrammen

  4. (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 auf das Augensymbol für das Diagramm auf der Registerkarte „Inhalt“ der Benutzeroberfläche für Agenten zum Anzeigen/Ausblenden des Diagramms tippen. 

    Chart_AgentProperties
  5. Tippen Sie in der Eigenschaftenseitenleiste auf .

    Erstellen Sie eine Vorschau, um das Erscheinungsbild und die Daten des Diagramms anzuzeigen. Kehren Sie zurück, um die Eigenschaften des Diagramms bei Bedarf 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 „Grundeinstellungen“ definieren Sie die Art des Diagramms, die Quellformulardatenmodelleigenschaften, die Daten enthalten, die Beschriftungen, die auf der X-Achse und Y-Achse des Diagramms dargestellt werden können, und optional auch die statistische Funktion, um die Werte für die grafische Darstellung auf dem Diagramm zu berechnen.

Im Folgenden werden die Mindestanforderungen für grundlegenden Eigenschaften mit Hilfe 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.

Um dies zu erreichen, müssen Sie Folgendes angeben:

  • Diagrammtyp - in diesem Beispiel Spalte für den Druckkanal und Kreis für den Webkanal
  • Datenmodellobjekte als Quelle für die X- und Y-Achse des Diagramms - in diesem Beispiel Transaktionsbetrag für X-Achse und Ausgabenname für die Y-Achse
  • Titel für die X- und Y-Achse (nur für das Spaltendiagramm im Druckkanal in diesem Beispiel) - in diesem Beispiel Betrag ($) für die X-Achse und Ausgabe für die Y-Achse.
  • Beschriftungsrichtung (nur für das Säulendiagramm im Druckkanal in diesem Beispiel) - in diesem Beispiel Nach links neigen
  • Quickinfo wird angezeigt, wen mit der Maus auf eine Ausgabe gezeigt wird (nur Web) - in diesem Beispiel ${x}: $ ${y}, was als [Ausgabebezeichnung] angezeigt wird (Beispiel: Besuch im Vergnügungspark: $ 315)
Säulendiagramm in Druckausgabe einer interaktiven Kommunikation
Säulendiagramm in Druckausgabe einer interaktiven Kommunikation

A. Y-Achse - Der aus der Formulardatenmodelleigenschaft abgerufene Betrag und Titeleigenschaft ist auf Betrag ($) festgelegt B. Beschriftungsrichtung der X-Achse ist auf „Nach links geneigt“ eingestellt C. X-Achse - Beschreibung für Ausgabe, die aus der Formulardatenmodelleigenschaft und der Titeleigenschaft abgerufen wurde, die auf „Ausgabe“ festgelegt ist 
Ringdiagramm in Webausgabe einer interaktiven Kommunikation
Ringdiagramm in Webausgabe einer interaktiven Kommunikation

A. Die Eigenschaft „Innerer Radius“ des Kreisdiagramms wird festgelegt B. Die Eigenschaft „Legende anzeigen“ ist ausgewählt und die Eigenschaft „Legendenposition“ ist auf „Rechts“ eingestellt C. QuickInfo zeigt Details des Elements beim Mouseover an - Quickinfo ist auf ${x}: $ ${y} 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.

Liniendiagramm ohne Funktion mit drei „Bed and Breakfast“-Transaktionen
Liniendiagramm ohne Funktion mit drei „Bed and Breakfast“-Transaktionen

Summenfunktion

Sie können die Summenfunktion anwenden, um Werte mehrerer Instanzen derselben Dateneigenschaft zusammenzufassen, und sie nur einmal anzeigen. Im folgenden Diagramm wird die Summenfunktion beispielsweise auf die Y-Achse angewendet, um die Summe 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.  

creditcardchartsumfunctioncopy

Häufigkeitsfunktion

Gibt die Anzahl der Werte auf der X- oder Y-Achse für einen bestimmten Wert auf der anderen Achse an. Bei Anwendung der Häufigkeitsfunktion auf der Y-Achse (Amount/TransAmount) zeigt das Diagramm an, dass drei „Bed & Breakfast“-Transaktionen und ein Rest der Transaktionsarten dreimal aufgetreten sind.

creditcardchartfrequencyfunctioncopy

Grundlegende Eigenschaften in Diagrammen

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

Name

Ein Bezeichner für das Diagrammelement. Der Name ist im Diagramm nicht sichtbar, jedoch nützlich, wenn von anderen Komponenten, Skripts und SOM-Ausdrücken auf das Element verwiesen wird.

Titel (nur Druckkanal)

Gibt den Titel des Diagramms an.

Diagrammtyp

Gibt den Diagrammtyp an, den Sie erstellen möchten. Die verfügbaren Optionen sind Torten-, Spalten-, Ring-, Linien-, Linien- und Punktdiagramme, Punkt- und Bereichsdiagramme und Balkendiagramme (Webkanal). Weitere Informationen finden Sie unter Beispiel 1: Diagrammausgabe in Druck und Web

X-Achse > Titel

Gibt den Namen für die X-Achse an.

X-Achse > Datenmodellobjekt *

Geben Sie den Namen des Datenmodellsammlungselements 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 zu verwenden ist.Weitere Informationen zu Funktionen finden Sie unter Funktionen in Diagramm verwenden und Beispiel 2: Anwendung von Summen- und Mittelwertfunktionen in einem Liniendiagramm.

X-Achse > Beschriftungsrichtung

Beschriftungsrichtung auf dem Diagramm im Druckkanal.Wenn Sie die Richtung der Beschriftung als „Benutzerdefinierte Drehung“ wählen, erscheint ein Feld „Benutzerdefinierter Drehwinkel (Grad)“. Im Feld „Benutzerdefinierter Drehwinkel (Grad)“ können Sie den Drehwinkel in Schritten von 15 Grad wählen.

Y-Achse > Titel

Gibt den Namen für die Y-Achse an.

Y-Achse > Datenmodellobjekt *

Gibt das Formulardatenmodellsammlungselement an, das auf der Y-Achse dargestellt werden soll.Im Druckkanal muss das Datenmodellobjekt für die Y-Achse vom Typ „Number“ sein.

Y-Achse > Funktion

Gibt die statistische/benutzerdefinierte Funktion an, die für die Berechnung der Werte auf der Y-Achse zu verwenden ist.Weitere Informationen zu Funktionen finden Sie unter Funktionen in Diagramm verwenden und Beispiel 2: Anwendung von Summen- und Mittelwertfunktionen in einem Liniendiagramm.

Legende anzeigen

Zeigt eine Legende für das Torten- oder Kreisdiagramm an, wenn es aktiviert ist.

Legendenposition

Legt die Position der Legende in Bezug auf das Diagramm fest. 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.

Hinweis:

Sie können die Breite des Diagramms im Webkanal mithilfe der Stil-Ebene oder durch Anwenden eines Designs steuern.

Quickinfo (Nur Webkanal)

Legt das Format fest, 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 QuickInfos 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-Klassen-Feld an, um benutzerdefinierte Stile im 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 oben auf einer neuen Seite einzufügen.

Obligatorischer Seitenumbruch Nach (nur Druckkanal)

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.

Einzug (nur Druckkanal)

Geben Sie den Einzug des Diagramms links auf der Seite an.

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.

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.

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.

FunctionChart

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 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 der clientseitigen Bibliotheken.
  2. Um die benutzerdefinierte Funktion in der Dropdownliste „Funktion“ anzuzeigen, erstellen Sie in CRXDe Lite einen Koten nt:unstructured im Apps-Ordener mit den folgenden Eigenschaften:
    • Fügen Sie die Eigenschaft guideComponentType mit dem Wert wie fd/af/reducer hinzu. (obligatorisch)
    • 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.

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