Utilizzo dei grafici nelle comunicazioni interattive using-charts-in-interactive-communications
Un grafico o un grafico è una rappresentazione visiva dei dati. Concentra grandi quantità di informazioni in un formato visivo di facile comprensione, 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 i dati bidimensionali provenienti dal modello per dati modulo della comunicazione interattiva. Il componente Grafico consente di aggiungere e configurare i seguenti tipi di grafici: Torta, Colonna, Anello, Barra, Linea, Linea e Punto, Punto, Area e Quadrante.
Aggiungere e configurare un grafico in una comunicazione interattiva add-and-configure-chart-in-an-interactive-communication
Per aggiungere e configurare un grafico in una comunicazione interattiva, effettua le seguenti operazioni:
-
Seleziona Componenti dalla barra laterale della comunicazione interattiva.
-
Trascina la Grafico a uno dei seguenti componenti:
- Canale di stampa: area di destinazione o campo Immagine
- Canale web: pannello o area di destinazione
-
Seleziona il componente grafico nell’editor di comunicazione interattiva e seleziona Configura ( ) dalla barra degli strumenti Componente.
Le proprietà del grafico vengono visualizzate nel riquadro sinistro.
Proprietà di base di un grafico a linee nel canale di stampa
Proprietà di base di un grafico a linee nel canale web
-
Configurare proprietà grafico in base al tipo di canale.
-
(Solo canale di stampa) In Impostazioni agente, specifica se l'agente deve obbligatoriamente utilizzare questo grafico. Se i È Obbligatorio Per L’Agente Utilizzare Questo Grafico non è selezionata, l'agente può selezionare l'icona dell'occhio per il grafico nel Contenuto nell’interfaccia utente dell’agente per mostrare o nascondere il grafico.
-
Seleziona per salvare le proprietà del grafico.
Seleziona Anteprima per visualizzare l'aspetto e i dati associati al grafico. Seleziona Modifica per riconfigurare le proprietà del grafico.
Configurare le proprietà del grafico configure-chart-properties
Configura le seguenti proprietà durante la creazione di grafici per i canali di stampa e web:
Utilizzare le funzioni nel grafico use-functions-in-chart
È possibile configurare un grafico in modo da utilizzare le funzioni statistiche per calcolare i valori dai dati di origine per il plottaggio sul grafico. Applicando le funzioni in un grafico, è possibile tracciare i dati che non vengono forniti direttamente dal modello dati del modulo.
Il componente Grafico include alcune funzioni incorporate, ma puoi scrivere funzioni personalizzate e renderle disponibili per l’utilizzo nella configurazione del grafico nel 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 determinato valore sull'altro asse.
Somma Restituisce la somma di tutti i valori sull'asse X o Y per un determinato valore sull'altro asse.
Massimo Restituisce il massimo dei valori sull'asse X o Y per un determinato valore sull'altro asse.
Frequenza Restituisce il numero di valori sull'asse X o Y per un determinato valore sull'altro asse.
Intervallo Restituisce la differenza tra il valore massimo e il valore minimo sull'asse X o Y per un determinato valore sull'altro asse.
Mediana Restituisce il valore che separa i valori più alti e più bassi a metà sull'asse X o Y per un determinato valore sull'altro asse.
Minimo Restituisce il minimo dei valori sull'asse X o Y per un determinato valore sull'altro asse.
Modalità Restituisce il valore con la maggior parte delle occorrenze sull'asse X o Y per un determinato valore sull'altro asse.
Per ulteriori informazioni, consulta Esempio 2: applicazione delle funzioni Somma e Frequenza in un grafico a linee.
Funzioni personalizzate nel canale web customfunctionsweb
Oltre a utilizzare le funzioni predefinite nei grafici, è possibile scrivere funzioni personalizzate in JavaScript™ e renderle disponibili nell’elenco delle funzioni nel componente Grafico per il canale web.
Una funzione accetta 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, eseguire le operazioni seguenti per renderla disponibile per l'utilizzo nella configurazione del grafico:
-
Aggiungi la funzione personalizzata nella libreria client associata alla comunicazione interattiva pertinente. Per ulteriori informazioni, consulta Configurazione dell’azione Invia e Utilizzo delle librerie lato client.
-
Per visualizzare la funzione personalizzata nel menu a discesa Funzione, in CRXDe Lite, crea un’
nt:unstructured
nella cartella apps con le seguenti proprietà:-
Aggiungi proprietà
guideComponentType
con valore comefd/af/reducer
. (obbligatorio) -
Aggiungi proprietà
value
a un nome completo della funzione JavaScript™ personalizzata. (obbligatorio) e impostarne il valore sul nome della funzione personalizzata, ad esempio Moltiplica. -
Aggiungi proprietà
jcr:description
con il valore che si desidera visualizzare come nome della funzione personalizzata visualizzata nel menu a discesa Funzione. Ad esempio: Moltiplica. -
Aggiungi proprietà
qtip
con un valore che sarà una breve descrizione della funzione personalizzata. Viene visualizzato come descrizione comando quando si passa il puntatore sul nome della funzione nel Funzione elenco a discesa.
-
-
Clic Salva tutto per salvare la configurazione.
La funzione è ora disponibile per l’utilizzo nel grafico.
Esempio 1: output del grafico in stampa e sul Web chartoutputprintweb
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 e, facoltativamente, la funzione statistica per calcolare i valori da tracciare sul grafico.
Comprendiamo in dettaglio le informazioni minime richieste nelle proprietà di base, con l’aiuto di un estratto conto generato utilizzando una comunicazione interattiva. Si supponga di voler generare un grafico per rappresentare l'importo delle spese diverse nel rendiconto. Desideri utilizzare diversi tipi di grafici per la stampa e l’output web della comunicazione interattiva.
Grafico a colonne per la stampa columnchartprint
A questo scopo, specifica le seguenti proprietà:
- Nome - Specificare il nome del grafico.
- Tipo di grafico - Seleziona Colonna dall’elenco a discesa.
- Titolo - Specificare il tipo di spesa per l'asse X e l'importo della transazione per l'asse Y.
- Oggetti modello dati : seleziona le proprietà dell’oggetto modello dati per creare associazioni di dati per l’asse X (tipo di spesa) e l’asse Y (importo transazione).
Istogramma nel canale di stampa di una comunicazione interattiva
Grafico ad anello per il web donutchartweb
A questo scopo, specifica le seguenti proprietà:
- Nome - Specificare il nome del grafico.
- Tipo di grafico - Seleziona Anello dall’elenco a discesa.
- Oggetti modello dati : seleziona le proprietà dell’oggetto modello dati per creare associazioni di dati per l’asse X (tipo di spesa) e l’asse Y (importo transazione).
- Raggio interno - Specificate il valore Raggio interno (Inner Radius) come 150 per specificare il raggio (in pixel) del cerchio interno del grafico.
- Descrizione - Utilizza il ${x}(${y}) per visualizzare la descrizione comando. La descrizione comando viene visualizzata come: 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 applicationsumfrequency
Applicando le funzioni in un grafico, è possibile tracciare i dati che non vengono forniti direttamente dal modello dati del modulo. In questo esempio, utilizziamo un esempio di estratto conto della carta di credito per capire come le funzioni Somma e Frequenza possono essere applicate al grafico.
Grafico a linee senza funzione con due transazioni "Debito per AirBnB"
Funzione Somma sum-function
Puoi applicare la funzione sum per sommare i valori di più istanze della stessa proprietà dati e mostrarla una sola volta. Ad esempio, nel grafico seguente, la funzione Somma viene applicata sull'asse Y per sommare l'importo dei due debiti per le transazioni AirBnB (2050 e 1050) e visualizzare una sola transazione (3100).
La funzione Somma può rendere il grafico più utile quando si desidera fascicolare e visualizzare la somma per molte istanze della stessa proprietà di dati.
Funzione di frequenza frequency-function
La funzione Frequenza restituisce il numero di valori dell'asse Y per un determinato valore sull'altro asse. Con l'applicazione della funzione Frequenza sull'asse Y (Importo transazione), il grafico mostra che ci sono state due occorrenze di debito per le transazioni AirBnB e una occorrenza di resto dei tipi di transazioni.
Esempio 3: grafico a quadranti a più serie nel web example-multi-series-quadrant-chart-in-web
Il grafico rappresenta l’importo delle transazioni eseguite in un determinato intervallo di date. Il grafico a quadrante consente di dividere l'area del grafico in quattro sezioni etichettate. Il carattere utilizza un punto di riferimento statico per l'asse X e l'asse Y. Utilizzare la funzione a serie multiple per separare i dati in base al nome della banca.
A questo scopo, specifica le seguenti proprietà:
-
Nome: Specificare il nome del grafico.
-
Tipo di grafico: Seleziona Quadrante dall’elenco a discesa.
-
Seleziona la Serie multiple casella di controllo.
-
Oggetto modello dati: specifica la proprietà 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 modello dati: Selezionare le proprietà dell'oggetto modello dati per creare associazioni dati per l'asse X (Data transazione) e l'asse Y (Importo transazione).
-
In Punto di riferimento sezione, seleziona Statico come Tipo di binding.
-
Specificate i valori per i punti di riferimento dell'asse X e dell'asse Y.
-
Specificate le etichette dei quadranti Superiore sinistro, Superiore destro, Inferiore destro e Inferiore sinistro.
-
Seleziona la Mostra legende per visualizzare i codici colore per i nomi delle banche.