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:

  1. Selezionare Componenti dalla barra laterale della comunicazione interattiva.

  2. Trascina e rilascia il componente Grafico in uno dei seguenti componenti:

    • Canale di stampa: area di destinazione o campo Immagine
    • Canale web: pannello o area di destinazione
  3. Seleziona il componente grafico nell'editor comunicazioni interattive e seleziona Configura ( icona_configurazione ) dalla barra degli strumenti del 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 di stampa

    Proprietà di base di un grafico a linee nel canale Web

    Proprietà di base di un grafico a linee nel canale web

  4. Configura le proprietà del grafico in base al tipo di canale.

  5. (Solo canale di stampa) In Impostazioni agente, specificare se è obbligatorio per l'agente utilizzare questo grafico. Se l'opzione t è obbligatoria per l'agente per l'utilizzo di questo grafico non è selezionata, l'agente può selezionare l'icona dell'occhio per il grafico nella scheda Content dell'interfaccia utente agente per mostrare o nascondere il grafico.

    chart_agentproperties

  6. Seleziona icona_fine per salvare le proprietà del grafico.

    Selezionare Anteprima per visualizzare l'aspetto e i dati associati al grafico. Selezionare 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:

Campo
Descrizione
Tipo di canale
Nome
Identificatore dell'elemento del grafico. Il nome del grafico specificato in questo campo non è visibile nel grafico. Viene utilizzato quando si fa riferimento all’elemento da altri componenti, script ed espressioni SOM.
Stampa e Web
Tipo di grafico
Tipo di grafico che si desidera generare. Le opzioni disponibili sono Torta, Colonna, Anello, Barra, Linea, Linea e Punto, Punto e Area.
Stampa e Web
Serie > Serie multiple
Selezionare questa opzione per aggiungere più serie per gli elementi della raccolta del modello dati del modulo tracciati sull'asse X e sull'asse Y.
Stampa e Web
Series > Oggetto modello dati
Nome dell'elemento di raccolta del modello dati del modulo per aggiungere più serie al grafico.
Scegliere una proprietà dell'oggetto modello dati del modulo padre per le proprietà tracciate sull'asse X e sull'asse Y per creare una serie significativa. L’oggetto modello dati associato deve essere di tipo Numerico, 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 del modello dati del modulo da tracciare sull'asse X.

Scegliete due proprietà di tipo insieme/array dello stesso oggetto modello dati padre che sono significative in relazione tra loro per tracciare sull'asse X e Y di un grafico. L’oggetto modello dati associato deve essere di tipo Numerico, 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 modello dati modulo da tracciare sull’asse Y. Nel canale di stampa, l’oggetto modello dati per l’asse Y deve essere di tipo Numerico.

Scegliete due proprietà di tipo insieme/array dello stesso oggetto modello dati padre che sono significative in relazione tra loro per tracciare sull'asse X e Y di un grafico.

Stampa e Web
Asse Y > Funzione
Funzione statistica/personalizzata da utilizzare per calcolare i 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. Potete 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 all'inizio di una nuova pagina.
Stampa
Interruzione di pagina obbligatoria dopo
Selezionare questa opzione per aggiungere un'interruzione di pagina obbligatoria dopo il grafico e inserire il contenuto che segue il grafico nella parte superiore di una nuova pagina.
Stampa
Rientro
Rientro del grafico a sinistra della pagina.
Stampa
Suggerimento

Formato in cui la descrizione viene visualizzata al passaggio del mouse su un punto dati nel 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 in modo dinamico con i valori corrispondenti sull'asse X e sull'asse Y e visualizzate nella descrizione comando.

Per disattivare la descrizione comando, lasciare la descrizione campo vuoto. Questa opzione non è applicabile ai grafici a linee e a superficie. Ad esempio, vedere Esempio 1: output grafico in stampa e Web.

Web
Configurazioni specifiche per il grafico

Oltre alle configurazioni comuni, sono disponibili le seguenti configurazioni specifiche per i grafici:

  • Mostra legenda: Se abilitata, mostra una legenda per il grafico a torta o ad anello.
  • Posizione legenda: Specifica la posizione della legenda rispetto al grafico. Le opzioni disponibili sono Right, Left, Top e Bottom. Utilizza la legenda a destra nel 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 a linee, a linee, a punti e ad 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 associazione: Disponibile per i grafici a quadrante per specificare il tipo di associazione per il punto di riferimento. Utilizzare la proprietà dell'oggetto modello dati o testo statico per definire il valore per il punto di riferimento.
  • Punto di riferimento > Asse X: Disponibile per i grafici a quadrante se si seleziona Statico dall'elenco a discesa Tipo di associazione per specificare il valore dell'asse X per il punto di riferimento.
  • Punto di riferimento > Asse Y: Disponibile per i grafici a quadrante se si seleziona Statico dall'elenco a discesa Tipo di associazione per specificare il valore dell'asse Y per il punto di riferimento.
  • Punto di riferimento > Oggetto modello dati per serie: Disponibile per grafici a quadrante a serie multiple se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di associazione. Definisci la proprietà dell’oggetto modello dati del modulo per identificare la serie per il punto di riferimento.
  • Punto di riferimento > Valore oggetto modello dati per serie: Disponibile per grafici a quadrante a serie multiple se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di associazione. Utilizzare la proprietà object del modello dati del modulo per la serie e il valore definito in questo campo per identificare la serie per il punto di riferimento.
  • Punto di riferimento > Oggetto modello dati per punto di riferimento: Disponibile per i grafici a quadrante se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di associazione. Definisci una proprietà dell’oggetto modello dati del modulo di pari livello rispetto alle proprietà tracciate sull’asse X e sull’asse Y. Inoltre, per le serie multiple, definire una proprietà oggetto modello dati che sia un'entità figlio della proprietà oggetto modello dati definita per la serie.
  • Punto di riferimento > Valore oggetto modello dati per punto di riferimento: Disponibile per grafici a quadrante se si seleziona Oggetto modello dati dall'elenco a discesa Tipo di associazione. Utilizzare la proprietà dell'oggetto modello dati del modulo per il punto di riferimento e il valore definito in questo campo per identificare il punto di riferimento per il grafico.
    Etichette quadrante > In alto a sinistra: Disponibile per i grafici quadrante per specificare il nome del quadrante in alto a sinistra.
  • Etichette quadrante > In alto a destra: Disponibile per i grafici quadrante per specificare il nome del quadrante in alto a destra.
  • Etichette quadrante > In basso a destra: Disponibile per i grafici quadrante per specificare il nome del quadrante in basso a destra.
  • Etichette quadrante > In basso a sinistra: Disponibile per i grafici quadrante per specificare il nome del quadrante in basso a sinistra.
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.

Funzioni nei grafici

Sebbene il componente Grafico includa alcune funzioni incorporate, è possibile 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, vedere 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:

  1. Aggiungi la funzione personalizzata nella libreria client associata alla comunicazione interattiva pertinente. Per ulteriori informazioni, vedere Configurazione dell'azione di invio e Utilizzo delle librerie lato client.

  2. Per visualizzare la funzione personalizzata nel menu a discesa Funzione, in CRXDe Lite, crea un nodo nt:unstructured nella cartella delle app con le seguenti proprietà:

    • Aggiungere la proprietà guideComponentType con valore come fd/af/reducer. (obbligatorio)

    • Aggiungere la proprietà value a un nome completo della funzione JavaScript™ personalizzata. (obbligatorio) e impostarne il valore sul nome della funzione personalizzata, ad esempio Moltiplica.

    • Aggiungere la proprietà jcr:description con il valore che si desidera visualizzare come nome della funzione personalizzata visualizzata nel menu a discesa Funzione. Ad esempio, Moltiplica.

    • Aggiungere la 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 nell'elenco a discesa Funzione.

  3. Fai clic su 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 - Selezionare 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 associazioni dati per l'asse X (Tipo di spesa) e l'asse Y (Importo transazione).

Istogramma nel canale di stampa di una comunicazione interattiva

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 - Selezionare Anello dall'elenco a discesa.
  • Oggetti modello dati - Selezionare le proprietà dell'oggetto modello dati per creare associazioni dati per l'asse X (Tipo di spesa) e l'asse Y (Importo transazione).
  • Raggio interno - Specificare il valore di Raggio interno come 150 per specificare il raggio (in pixel) del cerchio interno nel grafico.
  • Descrizione - Utilizzare il formato predefinito ${x}(${y}) per visualizzare la descrizione. 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

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 Debit for AirBnB

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.

Somma grafico a linee

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.

Frequenza grafico a linee

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: Selezionare Quadrante dall'elenco a discesa.

  • Selezionare la casella di controllo Serie multiple.

  • Oggetto modello dati: specificare 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).

  • Nella sezione Punto di riferimento, selezionare Static come tipo di associazione.

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

  • Selezionare la casella di controllo Mostra legende per visualizzare i codici colore per i nomi delle banche.

Grafici quadranti

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2