Show Menu
ARGOMENTI×

Utilizzo dei grafici in Interactive Communications

Un grafico o un grafico è una rappresentazione visiva dei dati. Condensa grandi quantità di informazioni in formato visivo facile da capire, consentendo ai destinatari della comunicazione interattiva di visualizzare, interpretare e analizzare meglio i dati complessi.
Durante la creazione di una comunicazione interattiva, è possibile aggiungere grafici per rappresentare visivamente dati bidimensionali dal modello dati del modulo di comunicazione interattiva. Il componente Grafico consente di aggiungere e configurare i seguenti tipi di grafici: Torta, Colonna, Anello, Barre, Linea, Linea e Punto, Punto, Area e Quadrante.

Aggiungere e configurare il grafico in una comunicazione interattiva

Per aggiungere e configurare un grafico in una comunicazione interattiva, effettuate le seguenti operazioni:
  1. Toccate Componenti dalla barra laterale della comunicazione interattiva.
  2. Trascinare il componente Grafico su uno dei seguenti componenti:
    • Canale di stampa: Area Target o campo immagine
    • Canale Web: Pannello o area Target
  3. Toccate il componente grafico nell’editor delle comunicazioni interattive e selezionate Configura ( configura_icona ) dalla barra degli strumenti del componente.
    Le proprietà del grafico vengono visualizzate nel riquadro a sinistra.
    Proprietà di base di un grafico del tipo di linea nel canale di stampa
    Proprietà di base di un grafico del tipo di linea nel canale Web
  4. Configura le proprietà del grafico in base al tipo di canale.
  5. (Solo canale di stampa) Nelle Impostazioni ​agente, specificare se è obbligatorio per l'agente utilizzare questo grafico. Se è obbligatorio che l'opzione Agente utilizzi questo grafico non sia selezionata, l'agente può toccare l'icona occhio per il grafico nella scheda Contenuto dell'interfaccia utente dell'agente per mostrare o nascondere il grafico.
  6. Toccate per salvare le proprietà del grafico.
    Toccate Anteprima per visualizzare l’aspetto e i dati associati al grafico. Toccate Modifica per riconfigurare le proprietà del grafico.

Configurare le proprietà del grafico

Configura le seguenti proprietà durante la creazione di grafici per la stampa e i canali Web:
Campo Descrizione Tipo canale
Nome Identificatore per l’elemento grafico. Il nome del grafico specificato in questo campo non è visibile nel grafico. Viene utilizzato per fare riferimento all'elemento di altri componenti, script ed espressioni SOM. Stampa e Web
Tipo di grafico Tipo di grafico da generare. Le opzioni disponibili sono Torta, Colonna, Anello, Barre, Linea, Linea e Punto, Punto e Area. Stampa e Web
Serie > Serie multiple Selezionare questa opzione per aggiungere più serie agli elementi della raccolta dei dati del modulo tracciati sull'asse X e sull'asse Y. Stampa e Web
Serie > Oggetto modello dati Nome dell'elemento di raccolta dati del modulo per aggiungere più serie al grafico. Scegliere una proprietà dell'oggetto modello dati modulo padre per le proprietà tracciate sull'asse X e sull'asse Y per creare una serie significativa. L'oggetto del modello dati associato deve essere di tipo Numero, Stringa o Data. Stampa e Web
Mostra impilati Scegli di impilare i valori di ciascuna serie uno sopra l'altro. Stampa e Web
Asse X > Titolo Titolo per l’asse X. Stampa e Web
Asse X > Oggetto modello dati
Nome dell'elemento di raccolta dati del modulo da tracciare sull'asse X.
Scegliere due proprietà di tipo raccolta/array dello stesso oggetto del modello dati padre che abbiano un significato in relazione l'una all'altra per eseguire il grafico sull'asse X e Y di un grafico. L'oggetto del modello dati associato deve essere di tipo Numero, Stringa o Data.
Stampa e Web
Asse Y > Titolo Titolo per l’asse Y. Stampa e Web
Asse Y > Oggetto modello dati
Elemento di raccolta dei dati del modulo da tracciare sull'asse Y. Nel canale Stampa, l'oggetto del modello dati per l'asse Y deve essere di tipo Number.
Scegliere due proprietà di tipo raccolta/array dello stesso oggetto del modello dati padre che abbiano un significato in relazione l'una all'altra per eseguire il grafico sull'asse X e Y di un grafico.
Stampa e Web
Asse Y > Funzione Funzione statistica/personalizzata da utilizzare per l'elaborazione dei valori sull'asse y. Stampa e Web
Nascondi oggetto Selezionare questa opzione per nascondere il grafico nell'output finale. Stampa e Web
Titolo Titolo del grafico. Stampa
Altezza Altezza del grafico, in pixel. Stampa
Larghezza Larghezza del grafico, in pixel. È possibile controllare la larghezza del grafico nel canale Web utilizzando il livello di stile o applicando un tema. Stampa
Interruzione di pagina obbligatoria prima Selezionare questa opzione per aggiungere un'interruzione di pagina obbligatoria prima del grafico e posizionare il grafico sopra una nuova pagina. Stampa
Interruzione di pagina obbligatoria dopo Selezionare questa opzione per aggiungere un'interruzione di pagina obbligatoria dopo il grafico e posizionare il contenuto che segue il grafico sopra una nuova pagina. Stampa
Rientro Rientro del grafico a sinistra della pagina. Stampa
Suggerimento
Formato in cui la descrizione comando viene visualizzata al passaggio del mouse su un punto dati del grafico nel canale Web. Il valore predefinito è ${x}(${y}). A seconda del tipo di grafico, quando si posiziona il mouse su un punto, una barra o una sezione del grafico, le variabili ${x}e ${y} vengono sostituite dinamicamente con i valori corrispondenti sull'asse X e sull'asse Y e visualizzati nella descrizione comandi.
Per disattivare la descrizione comandi, lasciare vuoto il campo Descrizione . Questa opzione non è applicabile ai grafici a linee e a superfici. Ad esempio, vedere Esempio 1: Output grafico in stampa e Web .
Web
Configurazioni specifiche per i grafici
Oltre alle configurazioni comuni, sono disponibili le seguenti configurazioni specifiche per i grafici:
  • Mostra legenda: Mostra una legenda per il grafico a torta o a torta quando è attivato.
  • Posizione della legenda: Specifica la posizione della legenda rispetto al grafico. Le opzioni disponibili sono Destra, Sinistra, In alto e In basso. Si consiglia di utilizzare la legenda sul lato destro del canale di stampa.
  • Raggio interno: Disponibile per i grafici ad anello per specificare il raggio (in pixel) del cerchio interno nel grafico.
  • Colore linea: Disponibile per i grafici Linea, Linea e Punto e Area, per specificare il colore della linea nel grafico.
  • Colore punto: Disponibile per i grafici Punto e Linea e Punto per specificare il colore dei punti nel grafico.
  • Colore area: Disponibile per i grafici ad area per specificare il colore dell'area sotto la linea del grafico.
  • Punto di riferimento > Tipo di binding: Disponibile per i grafici quadranti per specificare il tipo di binding per il punto di riferimento. Utilizzare la proprietà statica dell'oggetto testo o modello dati per definire il valore per il punto di riferimento.
  • Punto di riferimento > asse X: Disponibile per i grafici quadranti se si seleziona Statico dall'elenco a discesa Tipo di binding per specificare il valore dell'asse X per il punto di riferimento.
  • Punto di riferimento > asse Y: Disponibile per i grafici quadranti se si seleziona Statico dall'elenco a discesa Tipo di binding per specificare il valore dell'asse Y per il punto di riferimento.
  • Punto di riferimento > Oggetto del modello dati per le serie: Disponibile per i grafici Quadrante con più serie se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Definisci le proprietà oggetto modello dati del modulo per identificare la serie per il punto di riferimento.
  • Punto di riferimento > Valore oggetto modello dati per le serie: Disponibile per i grafici Quadrante con più serie se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Utilizzare la proprietà dell'oggetto modello dati modulo per le serie e il valore definito in questo campo per identificare le serie per il punto di riferimento.
  • Punto di riferimento > Oggetto del modello dati per il punto di riferimento: Disponibile per i grafici quadranti se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Definire una proprietà dell'oggetto modello dati modulo di pari livello con le proprietà tracciate sull'asse X e sull'asse Y. Inoltre, per più serie, definire una proprietà dell'oggetto modello dati che sia un'entità figlia della proprietà dell'oggetto modello dati definita per la serie.
  • Punto di riferimento > Valore oggetto modello dati per punto di riferimento: Disponibile per i grafici quadranti se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di binding. Utilizzare la proprietà dell'oggetto modello dati modulo per il punto di riferimento e il valore definito in questo campo per identificare il punto di riferimento per il grafico. Etichette quadranti > In alto a sinistra: Disponibile per i grafici Quadrante per specificare il nome del quadrante in alto a sinistra.
  • Etichette quadranti > In alto a destra: Disponibile per i grafici Quadrante per specificare il nome del quadrante in alto a destra.
  • Etichette quadranti > In basso a destra: Disponibile per i grafici Quadrante per specificare il nome del quadrante inferiore destro.
  • Etichette quadranti > In basso a sinistra: Disponibile per i grafici Quadrante per specificare il nome del quadrante in basso a sinistra.
Stampa e Web

Usa funzioni nel grafico

È possibile configurare un grafico in modo da utilizzare le funzioni statistiche per calcolare i valori dai dati di origine per il grafico. Applicando le funzioni in un grafico, è possibile stampare dati non forniti direttamente dal modello dati del modulo.
Mentre il componente Grafico include alcune funzioni integrate, è possibile scrivere funzioni Funzioni personalizzate nel canale web personalizzate e renderle disponibili per l'uso nella configurazione grafico del canale Web.
Per impostazione predefinita, con il componente Grafico sono disponibili le seguenti funzioni:
Media (media) Restituisce la media dei valori sull'asse X o Y per un dato valore sull'altro asse.
Somma Restituisce la somma di tutti i valori sull'asse X o Y per un valore specificato sull'altro asse.
Massimo Restituisce il massimo dei valori sull'asse X o Y per un valore specificato sull'altro asse.
Frequenza Restituisce il numero di valori sull'asse X o Y per un valore specificato sull'altro asse.
Intervallo Restituisce la differenza tra il massimo e il minimo dei valori sull'asse X o Y per un dato valore sull'altro asse.
Mediano Restituisce il valore che separa i valori più alti e i valori più bassi a metà dell'asse X o Y per un valore specificato sull'altro asse.
Minimo Restituisce il minimo dei valori sull'asse X o Y per un valore specificato sull'altro asse.
Modalità Restituisce il valore con la maggior parte delle occorrenze sull'asse X o Y per un valore specificato sull'altro asse.

Funzioni personalizzate nel canale web

Oltre a utilizzare le funzioni predefinite nei grafici, è possibile scrivere funzioni personalizzate in JavaScript™ e renderle disponibili nell'elenco delle funzioni del componente Grafico per il canale Web.
Una funzione utilizza una matrice o più valori e un nome di categoria come input e restituisce un valore. Ad esempio:
Multiply(valueArray, category) {
 var val = 1;
 _.each(valueArray, function(value) {
 val = val * value;
 });
 return val;
}

Dopo aver scritto una funzione personalizzata, effettuate le seguenti operazioni per renderla disponibile per la configurazione del grafico:
  1. Aggiungere la funzione personalizzata nella libreria client associata alla comunicazione interattiva pertinente. Per ulteriori informazioni, vedere Configurazione dell'azione Invia e Utilizzo delle librerie lato client.
  2. Per visualizzare la funzione personalizzata nel menu a discesa Funzione, in CRXDe Lite create un nt:unstructured nodo nella cartella delle app con le seguenti proprietà:
    • Aggiungi proprietà guideComponentType con valore fd/af/reducer . (mandatory)
    • Aggiungete proprietà value a un nome completo della funzione JavaScript™ personalizzata. (obbligatorio) e impostarne il valore sul nome della funzione personalizzata, ad esempio Moltiplica.
    • Aggiungere una proprietà jcr:description con il valore che si desidera visualizzare come nome della funzione personalizzata visualizzata nell'elenco a discesa Funzione. Ad esempio, Moltiplica .
    • Aggiungi proprietà qtip con valore che sarà una breve descrizione della funzione personalizzata. Viene visualizzata come una descrizione quando si passa il puntatore sul nome della funzione nell'elenco a discesa Funzione .
  3. Fate clic su Salva tutto per salvare la configurazione.
La funzione è ora disponibile per l'utilizzo nel grafico.

Esempio 1: Output grafico in stampa e Web

Nella scheda Base è possibile definire il tipo di grafico, le proprietà del modello dati del modulo di origine che contengono dati, le etichette da tracciare sull'asse X e sull'asse Y del grafico ed eventualmente la funzione statistica per calcolare i valori per il grafico.
Comprendiamo in dettaglio le informazioni minime richieste nelle proprietà di base, con l'aiuto di un'istruzione scheda generata utilizzando una comunicazione interattiva. Tenere presente che si desidera generare un grafico per rappresentare l'importo di spese diverse nell'istruzione. È possibile utilizzare diversi tipi di grafici per la stampa e l'output Web della comunicazione interattiva.

Grafico a colonne per Stampa

A questo scopo, specificate le seguenti proprietà:
  • Nome - Specificate il nome per il grafico.
  • Tipo grafico - Seleziona Colonna dall'elenco a discesa.
  • Titolo - Specifica il tipo di spesa per l'asse X e l'importo della transazione per l'asse Y.
  • Oggetti modello dati - Selezionare le proprietà dell'oggetto modello dati per creare binding dei dati per l'asse X (tipo di spesa) e l'asse Y (importo transazione).
Grafico a colonne nel canale di stampa di una comunicazione interattiva

Grafico a torta per il Web

A questo scopo, specificate le seguenti proprietà:
  • Nome - Specificate il nome per il grafico.
  • Tipo di grafico - Selezionare Anello dall'elenco a discesa.
  • Oggetti modello dati - Selezionare le proprietà dell'oggetto modello dati per creare binding dei dati per l'asse X (tipo di spesa) e l'asse Y (importo transazione).
  • Raggio interno - Specificate il valore Raggio interno come 150 per specificare il raggio (in pixel) del cerchio interno nel grafico.
  • Descrizione : utilizzate il formato predefinito $($) per visualizzare la descrizione comandi. La descrizione comandi viene visualizzata come segue: Tipo di spesa (importo transazione). Esempio: Debito per Bitcoin(10000).
Grafico ad anello nel canale web di una comunicazione interattiva

Esempio 2: Applicazione delle funzioni Somma e Frequenza in un grafico a linee

Applicando le funzioni in un grafico, è possibile stampare dati non forniti direttamente dal modello dati del modulo. In questo esempio, utilizziamo un esempio di rendiconto sulla carta di credito per comprendere in che modo le funzioni Somma e Frequenza possono essere applicate al grafico.
Grafico a linee senza funzione con due transazioni "Debit for AirBnB"

Sum, funzione

È possibile applicare la funzione sum per aggiungere valori di più istanze della stessa proprietà di dati e visualizzarla una sola volta. Ad esempio, nel grafico seguente, la funzione Somma è applicata sull'asse Y per sommare l'importo dei due Debiti per le transazioni AirBnB (2050 e 1050) e mostrare solo una transazione (3100).
La funzione Somma può rendere il grafico più utile quando si desidera raccogliere e visualizzare la somma per molte istanze della stessa proprietà data.

Funzione di frequenza

La funzione Frequenza restituisce il numero di valori dell'asse Y per un dato valore sull'altro asse. Con l'applicazione della funzione Frequenza sull'asse Y (Importo transazione), il grafico mostra che sono state rilevate due occorrenze di Debit per le transazioni AirBnB e una occorrenza degli altri tipi di transazioni.

Esempio 3: Quadrante multiserie in Web

Il grafico rappresenta l'importo delle transazioni eseguite in un determinato intervallo di date. Il grafico Quadrante consente di dividere l'area del grafico in quattro sezioni etichettate. Il carrello utilizza un punto di riferimento statico per gli assi X e Y. Utilizzate la funzione serie multipla per separare i dati in base al nome della banca.
A questo scopo, specificate le seguenti proprietà:
  • Nome: Specifica il nome del grafico.
  • Tipo di grafico: Selezionare Quadrante dall'elenco a discesa.
  • Selezionate la casella di controllo Serie ​multiple.
  • Oggetto modello dati: Specificare la proprietà dell'oggetto modello dati per la serie. La proprietà dell'oggetto modello dati per il nome della banca è un elemento padre delle proprietà dell'oggetto modello dati tracciate sull'asse X e sull'asse Y.
  • Oggetti del modello dati: Selezionare le proprietà dell'oggetto modello dati per creare binding dei dati per l'asse X (Data transazione) e l'asse Y (Importo transazione).
  • Nella sezione Punto di riferimento, selezionare Static come tipo di binding.
  • Specificate i valori per i punti di riferimento dell’asse X e dell’asse Y.
  • Specificate le etichette del quadrante per i quadranti In alto a sinistra, In alto a destra, In basso a destra e In basso a sinistra.
  • Selezionare la casella di controllo Mostra legende per visualizzare i codici colore per i nomi bancari.