Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Utilizzo di Highcharts Usa gli elementi visivi Highcharts per creare tipi di grafici ed elementi visivi personalizzati che utilizzano la [libreria Highcharts Core](https://www.highcharts.com/blog/products/highcharts/). [Le immagini di Highcharts forniscono agli autori di Quick l'accesso diretto all'API Highcharts.](https://api.highcharts.com/highcharts/) Per configurare una visualizzazione Highcharts, gli autori di Quick devono aggiungere uno schema JSON Highcharts all'immagine in Quick. Gli autori possono utilizzare le espressioni Quick per fare riferimento ai campi Quick e alle opzioni di formattazione dello schema JSON utilizzato per generare l'immagine Highcharts. L'editor **Codice del grafico** JSON fornisce assistenza contestuale per il completamento automatico e la convalida in tempo reale per garantire che gli schemi JSON di input siano configurati correttamente. Per garantire la sicurezza, l'editor visivo Highcharts non accetta l'immissione di codice CSS o HTML. JavaScript Per ulteriori informazioni sugli elementi visivi di Highcharts in Amazon Quick, consulta la [Highcharts Visual QuickStart ](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) Guide in. [DemoCentral](https://democentral.learnquicksight.online/#) L'immagine seguente mostra un grafico a forma di rossetto configurato nell'editor JSON di **Chart code** di un file visivo Highcharts in Quick. ![\[alt text not found\]](http://docs.aws.amazon.com/it_it/quick/latest/userguide/images/highcharts-example1.png) [Per altri esempi di immagini che puoi creare con la visualizzazione Highcharts in Quick, vedi Highcharts demos.](https://www.highcharts.com/demo) ## Considerazioni Prima di iniziare a creare immagini Highcharts in Amazon Quick, esamina le seguenti limitazioni che si applicano alle immagini Highcharts. + I seguenti valori JSON non sono supportati nell'editor JSON **Codice del grafico** di Highcharts: + Funzioni + Date: + Valori non definiti + I collegamenti ai file GeoJSON o ad altre immagini non sono supportati per gli elementi visivi Highcharts. + I colori dei campi non sono disponibili per gli elementi visivi Highcharts. I colori del tema predefinito vengono applicati a tutti gli elementi visivi Highcharts. ## Creazione di un elemento visivo Highcharts Utilizza la procedura seguente per creare una visualizzazione di Highcharts in Amazon Quick. 1. Apri la [console Quick](https://quicksight.aws.amazon.com/). 1. Apri l'analisi rapida a cui desideri aggiungere una visualizzazione di Highcharts. 1. Scegli **Aggiungi** sulla barra delle applicazioni, quindi seleziona **Aggiungi elemento visivo**. 1. Nel riquadro **Tipi di elementi visivi**, scegli l'icona dell'elemento visivo Highcharts. Sul foglio di analisi viene visualizzato un elemento visivo vuoto e il riquadro **Proprietà** si apre sulla sinistra. 1. Nel riquadro **Proprietà**, espandi la sezione **Impostazioni di visualizzazione** ed esegui le seguenti azioni: 1. Per **Modifica titolo**, scegli l'icona del pennello, inserisci il titolo che desideri assegnare all'elemento visivo, quindi scegli **SALVA**. In alternativa, scegli l'icona a forma di occhio per nascondere il titolo. 1. (Facoltativo) Per **Modifica sottotitolo**, scegli l'icona del pennello, inserisci il sottotitolo che desideri assegnare all'elemento visivo, quindi scegli **SALVA**. In alternativa, scegli l'icona a forma di occhio per nascondere il sottotitolo. 1. (Facoltativo) Per **Testo alternativo**, aggiungi il testo alternativo che desideri abbia l'elemento visivo. 1. Espandi la sezione **Limite dei punti dati**. In **Numero di punti dati da mostrare**, inserisci il numero di punti dati che desideri visualizzare. Gli elementi visivi Highcharts possono mostrare un massimo di 10.000 punti dati. 1. Espandi la sezione **Codice grafico**. 1. Inserisci uno schema JSON nell'editor JSON di **Codice del grafico**. L'editor fornisce assistenza contestuale per il completamento automatico e la convalida in tempo reale per garantire che il codice JSON di input sia configurato correttamente. Tutti gli errori identificati da Quick possono essere visualizzati nel menu a discesa **Errori**. L'esempio seguente mostra uno schema JSON che crea un grafico a colonne che mostra le vendite dell'anno corrente per settore. ``` { "xAxis": { "categories": ["getColumn", 0] }, "yAxis": { "min": 0, "title": { "text": "Amount ($)" } }, "tooltip": { "headerFormat": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "shared": true, "useHTML": true }, "plotOptions": { "column": { "borderWidth": 0, "grouping": false, "shadow": false } }, "series": [ { "type": "column", "name": "Current Year Sales", "color": "rgba(124,181,236,1)", "data": ["getColumn", 1], "pointPadding": 0.3, "pointPlacement": 0.0 } ] } ``` 1. Scegli **APPLICA CODICE**. Quick converte lo schema JSON in un elemento visivo che appare nell'analisi. Per apportare modifiche all'elemento visivo renderizzato, aggiorna le proprietà appropriate nello schema JSON e scegli **APPLICA CODICE**. 1. (Facoltativo) Apri il menu a discesa **Riferimento** per accedere ai link a materiale di riferimento utile di Highcharts. Quando l'elemento visivo renderizzato soddisfa i tuoi requisiti, chiudi il riquadro delle proprietà. Per ulteriori informazioni sulle espressioni specifiche di Quick Sight che possono essere utilizzate per configurare una visualizzazione Highcharts, consulta. [Linguaggio di espressione Amazon Quick JSON per immagini Highcharts](highchart-expressions.md) ## Funzionalità interattive di Highchart Le visualizzazioni Highchart in Amazon Quick Sight supportano azioni personalizzate, evidenziazione e coerenze di colore dei campi personalizzate, consentendoti di creare grafici interattivi e visivamente coerenti che si integrano perfettamente con altre immagini Quick Sight. ### Operazioni personalizzate Con le azioni personalizzate, puoi definire comportamenti specifici per qualsiasi punto dati nelle visualizzazioni Highchart. Questa funzionalità si integra perfettamente con il framework di azioni esistente di Quick Sight, consentendoti di creare grafici interattivi che rispondono ai clic degli utenti. Il sistema attualmente supporta la selezione di un singolo punto dati, offrendo un controllo preciso sulle interazioni degli utenti. Le azioni personalizzate possono essere implementate su vari tipi di grafici, tra cui grafici a linee, grafici a barre e grafici a barre in pila, tra gli altri. Per implementare azioni personalizzate, dovrai modificare la configurazione JSON di Highcharts. Aggiungi un blocco di eventi alla configurazione della tua serie, specificando l'evento di clic e l'azione corrispondente. Esempio: ``` { "series": [{ "type": "line", "data": ["getColumn", 1], "name": "value", "events": { "click": [ "triggerClick", { "rowIndex": "point.index" } ] } }] ``` Questa configurazione abilita gli eventi di clic sui punti dati del grafico, permettendo a Quick Sight di gestire azioni personalizzate in base ai dati selezionati. ### Evidenziazione tra elementi visivi L'evidenziazione tra elementi visivi migliora l'interattività dei pannelli di controllo creando connessioni visive tra diversi grafici. Quando un utente seleziona elementi in un grafico, gli elementi correlati in altri elementi visivi vengono evidenziati automaticamente, mentre gli elementi non correlati sono oscurati. Questa funzionalità consente agli utenti di identificare rapidamente relazioni e modelli tra più visualizzazioni, migliorando la comprensione e l'analisi dei dati. Per abilitare l'evidenziazione tra elementi visivi e mantenere la coerenza dei colori dei campi, utilizza la clausola `quicksight` nella configurazione JSON di Highcharts. Questa clausola funge da ponte tra il rendering di Highcharts e il sistema di interazione visiva di Quick. Di seguito è riportato un esempio di come configurarla: ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["dataMarkMatch", ["getColumnName", 0], "series.name"], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"] }] } } ``` Questa configurazione utilizza il linguaggio di espressione JSON di Quick Sight per modificare dinamicamente le proprietà visive come l'opacità e il colore in base alle interazioni dell'utente e agli schemi di colori predefiniti. Per scenari più complessi, puoi impostare l'evidenziazione sulla base di più condizioni. Ciò consente un'interattività più sfumata nelle visualizzazioni. L'esempio seguente evidenzia gli elementi in base al trimestre o al giorno della settimana: ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["||", ["dataMarkMatch", "quarter", "series.name"], ["dataMarkMatch", "day_of_week", "point.name"] ], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], }] } } ``` ### Coerenza cromatica a livello di campo Mantenere la coerenza visiva in tutto il pannello di controllo è fondamentale per un'interpretazione efficace dei dati. La funzionalità di coerenza cromatica a livello di campo garantisce che i colori assegnati a dimensioni specifiche persistano in tutti gli elementi visivi del pannello di controllo. Questa coerenza aiuta gli utenti a riconoscere e tenere traccia rapidamente di particolari categorie di dati su diversi tipi e visualizzazioni di grafici, migliorando l'esperienza utente complessiva e la comprensione dei dati. # Linguaggio di espressione Amazon Quick JSON per immagini Highcharts Gli elementi visivi di Highcharts accettano la maggior parte dei [valori JSON validi](https://www.w3schools.com/js/js_json_datatypes.asp), gli operatori aritmetici standard, gli operatori di stringa e gli operatori condizionali. I seguenti valori JSON non sono supportati per gli elementi visivi Highcharts: + Funzioni + Date: + Valori non definiti Gli autori di Quick possono usare il linguaggio di espressioni JSON per creare schemi JSON per una visualizzazione ad alta grafica. Il linguaggio di espressione JSON viene utilizzato per associare JSON ai nostri set di dati per APIs consentire la popolazione dinamica e la modifica delle strutture JSON. Gli sviluppatori possono utilizzare il linguaggio di espressione JSON anche per ampliare e trasformare i dati JSON con espressioni concise e intuitive. Con il linguaggio di espressione JSON, le espressioni sono rappresentate come array, in cui il primo elemento specifica l'operazione e gli elementi successivi sono gli argomenti. Ad esempio, `["unique", [1, 2, 2]]` applica l'operazione `unique` all'array `[1, 2, 2]`, ottenendo `[1, 2]`. Questa sintassi basata su array consente espressioni flessibili, che consentono trasformazioni complesse sui dati JSON. Il linguaggio di espressione JSON supporta *espressioni nidificate*. Le espressioni nidificate sono espressioni che contengono altre espressioni come argomenti. Ad esempio, `["split", ["toUpper", "hello world"], " "]` prima converte la stringa `hello world` in maiuscolo, quindi la divide in una matrice di parole, ottenendo `["HELLO", "WORLD"]`. Utilizza le seguenti sezioni per saperne di più sul linguaggio di espressione JSON per gli elementi visivi Highcharts in Amazon Quick. **Topics** + [Aritmetica](jle-arithmetics.md) + [Operazioni di array](jle-arrays.md) + [Espressioni Amazon Quick](jle-qs-expressions.md) # Aritmetica La tabella seguente mostra le espressioni aritmetiche che possono essere utilizzate con il linguaggio di espressione JSON. | Operation | Expression | Input | Output | | --- | --- | --- | --- | | Addizione | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | Sottrazione | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | Moltiplicazione | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | Divisione | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | Modulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | Potenza | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | Valore assoluto | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Square Root (Radice quadrata) | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | Logaritmo (base 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | Logaritmo naturale | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | Round | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | Floor | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | Ceiling | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | Sinusoidale | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | Coseno | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | Tangente | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # Operazioni di array Il linguaggio di espressione JSON consente la manipolazione generica degli array per le seguenti funzioni: + `map`: applica una funzione di mappatura a ciascun elemento di un array e restituisce un nuovo array con i valori trasformati. Ad esempio, `["map", [1, 2, 3], ["*", ["item"], 2]]` mappa ogni elemento dell'array `[1, 2, 3]` moltiplicandolo per 2. + `filter`: filtra un array in base a una determinata condizione e restituisce un nuovo array contenente solo gli elementi che soddisfano la condizione. Ad esempio, `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` filtra l'array `[1, 2, 3, 4, 5]` in modo da includere solo i numeri pari. + `reduce`: riduce un array a un singolo valore applicando una funzione di riduzione a ciascun elemento e accumulando il risultato. Ad esempio, `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` riduce l'array `[1, 2, 3, 4, 5]` alla somma dei suoi elementi. + `get`: recupera un valore da un oggetto o da un array specificando una chiave o un indice. Ad esempio, `["get", ["item"], "name"]` recupera il valore della proprietà `"name"` dall'elemento corrente. + `unique`: un dato array restituisce solo elementi unici all'interno di questo array. Ad esempio, `["unique", [1, 2, 2]]` restituisce `[1, 2]`. # Espressioni Amazon Quick Amazon Quick offre espressioni aggiuntive per migliorare la funzionalità degli elementi visivi di Highcharts. Utilizza le seguenti sezioni per saperne di più sulle espressioni Quick più comuni per gli elementi visivi di Highcharts. Per ulteriori informazioni sul linguaggio di espressione JSON in Amazon Quick, consulta la [Highcharts Visual QuickStart Guide](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) in. [DemoCentral](https://democentral.learnquicksight.online/#) **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` Usa le espressioni `getColumn` per restituire valori dagli indici di colonna specificati. Ad esempio, la tabella seguente mostra un elenco di prodotti insieme alla relativa categoria e al prezzo. | Product name (Nome del prodotto) | Categoria | Prezzo | | --- | --- | --- | | Prodotto A | Tecnologia | 100 | | Prodotto B | Vendita al dettaglio | 50 | | Prodotto C | Vendita al dettaglio | 75 | La seguente query `getColumn` genera un array che mostra tutti i nomi dei prodotti insieme al relativo prezzo. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` Viene restituito il seguente codice JSON: ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` Puoi anche passare più colonne contemporaneamente per generare un array di array, come mostrato nell'esempio seguente. **Input** ``` { values: ["getColumn", 0, 2] } ``` **Output** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` Analogamente a `getColumn`, è possibile utilizzare le seguenti espressioni per restituire valori di colonna da contenitori o temi di campi: + `getColumnFromGroupBy` restituisce le colonne del gruppo per campo. Il secondo argomento è l'indice della colonna da restituire. Ad esempio, `["getColumnFromGroupBy", 0]` restituisce i valori del primo campo come array. È possibile passare più indici per ottenere un array di array in cui ogni elemento corrisponde al campo nel contenitore di campi Raggruppa per. + `getColumnFromValue` restituisce le colonne dal contenitore di campi Valori. È possibile passare più indici per ottenere un array di array in cui ogni elemento corrisponde al campo nel contenitore di campi Valori. + `getColorTheme`restituisce la palette di colori corrente di un tema Quick, mostrata nell'esempio seguente. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **Esempio** ![\[alt text not found\]](http://docs.aws.amazon.com/it_it/quick/latest/userguide/images/get-column-example.png) `getColumn` può accedere a qualsiasi colonna della tabella: + `["getColumn", 0]`: restituisce l'array `[1, 2, 3, 4, 5, ...]` + `["getColumn", 1]`: restituisce l'array `[1, 1, 1, 1, 1, ...]` + `["getColumn", 2]`: restituisce l'array `[1674, 7425, 4371, ...]` `getColumnFromGroupBy` funziona in modo simile, ma il suo indice è limitato alle colonne nel contenitore di campi Raggruppa per: + `["getColumnFromGroupBy", 0]`: restituisce l'array `[1, 2, 3, 4, 5, ...]` + `["getColumnFromGroupBy", 1]`: restituisce l'array `[1, 1, 1, 1, 1, ...]` + `["getColumnFromGroupBy", 2]`: non funziona, poiché ci sono solo due colonne nel contenitore di campi Raggruppa per `getColumnFromValue` funziona in modo simile, ma il suo indice è limitato alle colonne nel contenitore di campi Valore: + `["getColumnFromValue", 0]`: restituisce l'array `[1, 2, 3, 4, 5, ...]` + `["getColumnFromValue", 1]`: non funziona, poiché c'è solo una colonna nel contenitore di campi Valore + `["getColumnFromValue", 2]`: non funziona, poiché c'è solo una colonna nel contenitore di campi Valore ## `formatValue` Utilizzate l'`formatValue`espressione per applicare la formattazione rapida ai valori. Ad esempio, l'espressione seguente formatta l'etichetta dell'asse x con il valore di formato specificato nel primo campo di Quick field wells. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```