Grafici moduli adattivi af-charts

Immagine_protagonista

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:

  1. Torta
  2. Colonna
  3. Anello
  4. Barra
  5. Linea
  6. Linea e punto
  7. Punto
  8. 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

NOTE
Prima di configurare il grafico, accertati che il pannello o la riga di tabella per cui stai configurando il grafico sia impostato su ripetibile. Nella scheda Impostazioni ripetizione della finestra di dialogo Modifica componente è possibile specificare il conteggio minimo e massimo per la riga ripetibile del pannello o della tabella.

Per configurare il grafico, fai clic sul componente Grafico e fai clic su Impostazioni per aprire la finestra di dialogo Modifica grafico. La finestra di dialogo include le schede Titolo e testo, Configurazione, Opzioni avanzate e Stile, che consentono di configurare il grafico.

Base basic

Nella scheda Base, puoi configurare le seguenti proprietà:

Proprietà grafico

  • 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 o nome pannello ripetuto per l'origine dati: specifica il nome dell’elemento della riga della 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 dell'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 dell'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 selezionata, mostra una legenda per il grafico.
  • Descrizione: specifica il formato in cui la descrizione comando viene visualizzata al passaggio del mouse su una coordinata 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 dinamicamente 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 Retail Stores (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 del grafico.
  • Colore linea: disponibile per i grafici a linee, a linee, a punti e ad area per specificare il valore esadecimale del colore della linea nel grafico.
  • Colore punto: disponibile per i grafici Punto e Linea e Punto per specificare il valore esadecimale del colore per i punti del grafico.
  • Colore area: disponibile per i grafici a superficie per specificare il valore esadecimale del colore per l’area sotto la linea del grafico.
  • Classe CSS: specifica il nome di una classe CSS nel campo della classe CSS per applicare al grafico uno stile personalizzato.

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.

Dettagli rendiconto

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.

Authoring dei dettagli dell’istruzione

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.

    Grafico

La legenda e la punta dell'utensile vengono visualizzate nel modo seguente.

Descrizione comando legenda grafico

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.

Proprietà del grafico disponibili per lo 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.

NOTE
È possibile utilizzare le funzioni per calcolare i valori dell'asse X o dell'asse Y in un 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:

  1. Aggiungi la funzione personalizzata nella libreria client associata al modulo o al documento adattivo.

  2. In CRXDE Liti, crea un nodo nt:unstructured nella cartella delle app con le seguenti proprietà:

    • Impostare guideComponentType su fd/af/reducer. (obbligatorio)
    • Imposta il valore su un nome completo della funzione JavaScript personalizzata. (obbligatorio)
    • Impostare jcr:description su un nome significativo. Viene visualizzato nel Usa funzione elenco a discesa. 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.
    • Clic Salva tutto per salvare la configurazione.
    • La funzione è ora disponibile per l’utilizzo nel grafico.

Funzione personalizzata

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 manipolare 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:

  1. Trascina un componente elenco a discesa dalla barra laterale AEM nel modulo adattivo.

  2. Seleziona il componente e tocca Impostazioni .

  3. Specifica un titolo per l’elenco a discesa. Selezionare ad esempio il tipo di grafico.

  4. Aggiungi i tipi di grafico supportati nella sezione Elementi, per popolare l’elenco a discesa. Clic Fine.
    Selezione dell’elenco a discesa del grafico

  5. Seleziona il componente a discesa e tocca Testo alternativo . Nell’editor delle regole, scrivi una regola nell’editor delle regole visive come mostrato di seguito.
    Impostazione delle regole del grafico

    In questo esempio, il nome dell’elemento del componente grafico è grafico personale.

    In alternativa, puoi scrivere le seguenti regole nell’editor di codice.

    Regole del grafico

    Per ulteriori informazioni sulla scrittura delle regole, consulta Editor regole

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

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