Grafici moduli adattivi af-charts
Un grafico o un grafico è una rappresentazione visiva dei dati. Consente di condensare grandi quantità di informazioni in un formato visivo di facile comprensione, consentendo di visualizzare, interpretare e analizzare in modo migliore dati complessi.
Il pacchetto di componenti aggiuntivi per AEM Forms fornisce un componente grafico pronto all’uso. Puoi utilizzare nei moduli adattivi e nei documenti per la rappresentazione visiva di dati bidimensionali in pannelli ripetibili e tabelle. Il componente Grafico consente di aggiungere e configurare i seguenti tipi di grafici:
- Torta
- Colonna
- Anello
- Barra
- Linea
- Linea e punto
- Punto
- Area
Il componente Grafico supporta e fornisce funzioni statistiche incorporate - somma, media, massimo, minimo, modalità, mediana, intervallo e frequenza - per calcolare e tracciare i valori su un grafico. Oltre alle funzioni pronte all’uso, puoi scrivere funzioni personalizzate e renderle disponibili per l’utilizzo nei grafici.
Vediamo ora come aggiungere e configurare il componente Grafico:
Aggiungi grafico add-chart
Per impostazione predefinita, il componente Grafico è disponibile nella barra laterale dell’AEM. In modalità di authoring, puoi trascinare il componente Grafico dalla barra laterale AEM al modulo o al documento adattivo. Quando rilasci il componente, questo crea un segnaposto per un grafico.
Configura grafico configure-chart
Per configurare il grafico, fare clic sul componente Grafico e fare clic su
Base basic
Nella scheda Base, puoi configurare le seguenti proprietà:
- Nome elemento: identificatore dell'elemento grafico nella struttura del contenuto JCR. Non è visibile nel grafico, ma è utile quando si fa riferimento all’elemento da altri componenti, script ed espressioni SOM.
- Tipo di grafico: specifica il tipo di grafico che si desidera generare. Le opzioni disponibili sono Torta, Anello, Barra, Colonna, Linea, Linea e Punto, Punto e Area. Nell'esempio, il tipo di grafico è Colonna.
- Nome riga ripetuto o nome pannello per Data Source: specifica il nome elemento della riga tabella o del pannello ripetibile da cui verranno originati i dati. Nell'esempio, statementDetails è il nome dell'elemento della riga ripetibile nella tabella Statement Details.
- Asse X > Titolo: specifica il titolo dell'asse X. Nell'esempio, il titolo dell'asse X è Categoria.
- Asse X > Campo: specifica il nome elemento del campo (o di una cella in una tabella) da tracciare sull'asse X. Nell’esempio, le categorie sono configurate sull’asse X. Il nome dell'elemento per la cella della tabella nella colonna Categoria della tabella di esempio è categoria.
- Asse X > Usa funzione: specifica la funzione statistica da utilizzare per calcolare i valori sull'asse X. Nell’esempio, l’opzione selezionata è Nessuno. Per ulteriori informazioni sulle funzioni, vedere Utilizzare le funzioni nel grafico.
- Asse Y > Titolo: specifica il titolo dell'asse Y. Nell'esempio, il titolo dell'asse Y è Spesa.
- Asse Y > Campo: specifica il nome elemento del campo (o della cella in una tabella) da tracciare sull'asse Y. Nell’esempio, configura la quantità sull’asse Y. Il nome dell'elemento per la cella della tabella nella colonna Importo della tabella di esempio è importo.
- Asse Y > Usa funzione: specifica la funzione statistica da utilizzare per calcolare i valori sull'asse Y. Nell’esempio, viene aggiunto l’importo speso in ciascuna categoria e il valore calcolato viene tracciato sull’asse Y. Pertanto, selezionare Somma dall'elenco a discesa Usa funzione. Per ulteriori informazioni sulle funzioni, vedere Utilizzare le funzioni nel grafico.
- Posizione legenda: specifica la posizione della legenda rispetto al grafico. Le opzioni disponibili sono Right, Left, Top e Bottom.
- Mostra legenda: se abilitata, mostra una legenda per il grafico.
- Descrizione: specifica il formato in cui la descrizione viene visualizzata al passaggio del mouse su un punto dati nel grafico. 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. Come mostrato nell'esempio seguente, la descrizione viene visualizzata come Negozi al dettaglio(5870) quando si punta il mouse sulla colonna Negozi al dettaglio. Per disattivare la descrizione, lasciare vuoto il campo Descrizione. Questa opzione non è applicabile ai grafici a linee e a superficie.
- Configurazioni specifiche per il grafico: oltre alle configurazioni comuni, è disponibile la seguente configurazione specifica per il grafico:
- 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 valore esadecimale del colore per la linea nel grafico.
- Colore punto: disponibile per i grafici Punto e Linea e Punto per specificare il valore esadecimale del colore per i punti nel grafico.
- Colore area: disponibile per i grafici ad area per specificare il valore esadecimale del colore per l'area sotto la riga nel grafico.
- Classe CSS: specificare il nome di una classe CSS nel campo di classe CSS per applicare uno stile personalizzato al grafico.
Configurazione configuration
Nella scheda Base è possibile definire il tipo di grafico, il pannello di origine o la riga della tabella che contiene i dati, i valori 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 contenute in questa scheda, con l’aiuto di un esempio di tabella ripetibile nell’estratto conto di una carta di credito. Si supponga di voler generare un grafico per rappresentare e correlare le spese totali in diverse categorie nella sezione dei dettagli rendiconto di un rendiconto della carta di credito, come illustrato di seguito.
A questo scopo, è necessario tracciare le categorie sull'asse X e, sull'asse Y, tracciare la spesa totale in ciascuna categoria.
L’estratto conto della carta di credito utilizzato in questo esempio è un documento modulo adattivo e la sezione dei dettagli dell’estratto conto è una tabella che si presenta come segue nella modalità di creazione.
Consideriamo i seguenti requisiti e condizioni per la generazione del grafico:
-
Nel grafico viene visualizzata la spesa totale in ciascuna categoria della tabella Dettagli rendiconto.
-
Il tipo di grafico è Colonna, anche se è possibile scegliere qualsiasi altro tipo di grafico, a seconda delle necessità.
-
La riga Tabella nella tabella Dettagli istruzione è ripetibile. Puoi configurarlo nel campo Impostazioni ripetizione delle proprietà della riga della tabella.
-
Il nome elemento per la riga è Dettagli istruzione. Puoi configurarlo nelle proprietà della riga di tabella.
-
Il nome dell'elemento per la cella della tabella nella colonna Categoria è categoria. Puoi specificarlo in linea. Seleziona la cella e tocca il pulsante Modifica.
-
Il nome dell'elemento per la cella della tabella nella colonna Importo è importo. Inoltre, la cella della tabella nella colonna Importo è una casella numerica.
-
Con la configurazione specificata, l'istogramma nell'esempio verrà visualizzato come segue. Ogni colore rappresenta una categoria e nel grafico vengono sommati i singoli elementi o importi di una categoria.
La legenda e la punta dell'utensile vengono visualizzate nel modo seguente.
Attribuzione stile styling
In modalità Stile è possibile configurare la larghezza, in percentuale della larghezza totale disponibile nel modulo o nel documento, e l'altezza, in pixel, per il grafico. Altre opzioni includono testo, sfondo, bordo, effetti e sostituzioni CSS.
Per passare alla modalità stile, nella barra degli strumenti della pagina, tocca>>Stile.
Utilizzare le funzioni nel grafico use-functions
È possibile configurare un grafico in modo da utilizzare le funzioni statistiche per calcolare i valori dai dati di origine per il plottaggio sul grafico. Anche se il componente Grafico dispone di alcune funzioni incorporate, è possibile scriverle e renderle disponibili per l'utilizzo nella configurazione del grafico.
Funzioni predefinite default-functions
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
Funzioni personalizzate custom-functions
Oltre a utilizzare le funzioni predefinite nei grafici, è possibile scrivere funzioni personalizzate in JavaScript e renderle disponibili nell'elenco delle funzioni nel componente Grafico.
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 al modulo o al documento adattivo.
-
In CRXDE Lite, crea un nodo nt:unstructured nella cartella delle app con le seguenti proprietà:
- Impostare guideComponentType su fd/af/reducer. (obbligatorio)
- Impostare il valore su un nome completo della funzione JavaScript personalizzata. (obbligatorio)
- Impostare jcr:description su un nome significativo. Viene visualizzato nell'elenco a discesa Usa funzione. Ad esempio, Moltiplica.
- Impostare qtip su una breve descrizione della funzione. Viene visualizzata come descrizione quando si passa il puntatore sul nome della funzione nell'elenco a discesa Usa funzione.
- Fai clic su Salva tutto per salvare la configurazione.
- La funzione è ora disponibile per l’utilizzo nel grafico.
Aggiorna grafico automaticamente auto-refresh-chart
Un grafico viene aggiornato automaticamente quando gli utenti eseguono una delle operazioni seguenti:
- Aggiunge o rimuove un'istanza del pannello dell'origine dati o della riga di tabella.
- Modificate qualsiasi valore tracciato sull'asse X o Y nel pannello dell'origine dati o nella riga della tabella.
- Modificare il tipo di grafico.
Utilizza il tipo di grafico nelle regole dei moduli adattivi chart-in-rules
La proprietà chartType specifica il tipo di grafico. I valori possibili sono torta, ciambella, barra, linea, punto di linea, punto e area. Si tratta di una proprietà scrivibile che consente di utilizzarla in regole per moduli adattivi per modificare le configurazioni dei grafici. Comprendiamolo con l'aiuto di un esempio.
Considera di aver configurato un istogramma. Si desidera tuttavia anche fornire agli utenti un'opzione per selezionare un tipo di grafico diverso da un elenco a discesa e ridisegnare il grafico. È possibile ottenere questo risultato utilizzando la proprietà chartType in una regola nel modo seguente:
-
Trascina un componente elenco a discesa dalla barra laterale AEM nel modulo adattivo.
-
Seleziona il componente e tocca
-
Specifica un titolo per l’elenco a discesa. Selezionare ad esempio il tipo di grafico.
-
Aggiungi i tipi di grafico supportati nella sezione Elementi, per popolare l’elenco a discesa. Fai clic su Fine.
-
Seleziona il componente a discesa e tocca
In questo esempio, il nome elemento del componente grafico è myChart.
In alternativa, puoi scrivere le seguenti regole nell’editor di codice.
Per ulteriori informazioni sulla scrittura delle regole, vedere Editor regole
-
Fai clic su Fine per salvare la regola.
È ora possibile selezionare un tipo di grafico dall'elenco a discesa e fare clic su aggiorna per ridisegnare il grafico.