Puoi utilizzare l'editor di configurazione del grafico per personalizzare le opzioni di formattazione nelle visualizzazioni di Looker che utilizzano l'API HighCharts. Sono inclusi, tra gli altri, la maggior parte dei grafici cartesiani, come il grafico a colonne, il grafico a barre e il grafico a linee.
Prerequisiti
Per accedere all'editor di configurazione dei grafici, devi disporre dell'autorizzazione can_override_vis_config
.
Personalizzare una visualizzazione
Per personalizzare una visualizzazione con l'editor di configurazione del grafico:
- Visualizza una visualizzazione in un'esplorazione o modifica una visualizzazione in un look o una dashboard.
- Apri il menu Modifica nella visualizzazione.
Fai clic sul pulsante Modifica configurazione grafico nella scheda Grafico. Looker mostra la finestra di dialogo Modifica configurazione grafico.
Il riquadro Configurazione grafico (origine) contiene il JSON originale della visualizzazione e non può essere modificato.
Il riquadro Configurazione del grafico (sostituzione) contiene il JSON che deve sostituire il JSON di origine. Quando apri per la prima volta la finestra di dialogo Modifica configurazione grafico, Looker compila il riquadro con un JSON predefinito. Puoi iniziare con questo JSON oppure eliminarlo e inserire qualsiasi JSON HighCharts valido.
Seleziona la sezione Configurazione grafico (sostituzione) e inserisci un codice JSON HighCharts valido. I nuovi valori sostituiranno eventuali valori nella sezione Configurazione del grafico (origine).
- Consulta la sezione Esempi di questo articolo per esempi di JSON HighCharts valido.
- Looker accetta qualsiasi valore JSON valido. Looker non accetta funzioni, date o valori non definiti.
Fai clic su <> (Formatta codice) per consentire a Looker di formattare correttamente il JSON.
Fai clic su Anteprima per testare le modifiche.
Fai clic su Applica per applicare le modifiche. La visualizzazione verrà visualizzata utilizzando i valori JSON personalizzati.
Una volta personalizzata la visualizzazione, puoi salvarla. Se hai visualizzato la visualizzazione in un'esplorazione, salva l'esplorazione. Se hai modificato un look o una dashboard, fai clic su Salva.
Se provi a visualizzare l'anteprima di un codice contenente JSON non valido, Looker mostrerà un messaggio di errore Invalid JSON detected
. Puoi ripulire il JSON non valido utilizzando l'opzione Correggi automaticamente il codice nella parte inferiore del riquadro Configurazione del grafico (sostituzione).
Se vuoi modificare le opzioni di visualizzazione predefinite, rimuovi prima le modifiche apportate nell'editor di configurazione del grafico, quindi sostituiscile in un secondo momento. In particolare, segui questi passaggi:
- Fai clic sul pulsante Modifica configurazione grafico nella scheda Grafico. Looker mostra la finestra di dialogo Modifica configurazione grafico.
- Copia il testo nel riquadro Configurazione grafico (sostituzione).
- Fai clic sul pulsante Cancella sostituzioni del grafico per eliminare tutte le modifiche.
- Fai clic su Applica.
- Modifica la visualizzazione utilizzando le opzioni di visualizzazione predefinite.
- Fai clic sul pulsante Modifica configurazione grafico nella scheda Grafico. Looker mostra la finestra di dialogo Modifica configurazione grafico.
- Inserisci un file JSON HighCharts valido nel riquadro Configurazione grafico (sostituzione). Puoi utilizzare il testo copiato nel passaggio 2 come modello, ma assicurati di testare le modifiche utilizzando il pulsante Anteprima per assicurarti che non ci siano conflitti.
- Fai clic su Applica.
Formattazione condizionale con series formatters
L'editor di configurazione del grafico accetta la maggior parte dei file JSON HighCharts validi. Accetta anche l'attributo series formatters
, che esiste solo in Looker. Ogni serie può avere più formattatori per combinare diverse regole di stile.
L'attributo series formatters
accetta due attributi: select
e style
.
- Inserisci un'espressione logica nell'attributo
select
per indicare i valori dei dati da formattare. - Inserisci del codice JSON nell'attributo
style
per indicare come formattare i valori dei dati.
Ad esempio, il seguente JSON colorerà ogni valore di dati in arancione se è maggiore o uguale a 380:
{
series: [{
formatters: [{
select: 'value >= 380',
style: {
color: 'orange'
}
}]
}]
}
Le sezioni seguenti descrivono in modo più dettagliato i potenziali valori degli attributi select
e style
.
Attributo select
In un'espressione select
puoi utilizzare i seguenti valori:
value
: questa variabile restituisce il valore della serie. Ad esempio, puoi utilizzareselect: value > 0
per scegliere come target tutti i valori positivi ovalue = 100
per trovare una corrispondenza solo con le serie con un valore pari a 100.max
: utilizzaselect: max
per scegliere come target il valore della serie con il valore massimo.min
: utilizzaselect: min
per scegliere come target il valore della serie con il valore minimo.percent_rank
: questa variabile ha come target il valore della serie con un percentile specificato. Ad esempio, puoi utilizzareselect: percent_rank >= 0.9
per scegliere come target i valori della serie nel percentile 90.name
: questa variabile restituisce il valore della dimensione della serie. Ad esempio, se hai un grafico che mostra gli ordini venduti, annullati e restituiti, puoi utilizzareselect: name = Sold
per scegliere come target la serie in cui il valore della dimensione è Venduto.AND/OR
UtilizzaAND
eOR
per combinare più espressioni logiche.
Per visualizzare queste espressioni implementate nell'editor di configurazione del grafico, consulta l'esempio Colorare i valori massimo, minimo e percentile.
Attributo style
L'attributo style
può essere utilizzato per applicare gli stili supportati da HighCharts. Ad esempio, puoi colorare i valori delle serie utilizzando style.color
, colorare i bordi delle serie utilizzando style.borderColor
e impostare la larghezza del bordo della serie utilizzando style.borderWidth
. Per un elenco più completo delle opzioni di stile, consulta le opzioni Highcharts per series.column.data
.
Per le visualizzazioni di grafici a linee, utilizza style.marker.fillColor
e style.marker.lineColor
anziché style.color
. Per un elenco più completo delle opzioni di stile di linea, consulta le opzioni Highcharts per series.line.data.marker
.
Per visualizzare la formattazione dei colori implementata nell'editor di configurazione del grafico, consulta l'esempio Colorare i valori massimo, minimo e percentile.
Esempi
Le sezioni seguenti forniscono esempi di alcuni casi d'uso comuni per l'editor di configurazione dei grafici. Per un elenco completo degli attributi che puoi modificare, consulta la documentazione dell'API HighCharts.
- Modificare il colore dello sfondo e il colore del testo dell'asse
- Personalizzare il colore della descrizione comando
- Aggiungere annotazioni e didascalie ai grafici
- Aggiungere bande di riferimento verticali
- Colorare i valori massimo, minimo e percentile
Modificare il colore di sfondo e il colore del testo dell'asse
Per modificare il colore di sfondo di una visualizzazione, utilizza l'attributo chart.backgroundColor
.
Analogamente, per modificare il colore del testo degli assi in una visualizzazione, utilizza i seguenti attributi:
Il seguente codice JSON di HighCharts cambia il colore di sfondo della visualizzazione in viola e il testo dei titoli e delle etichette delle assi in bianco.
{
chart: {
backgroundColor: "purple"
},
xAxis: {
labels: {
style: {
color: "white"
}
},
title: {
style: {
color: "white"
}
}
},
yAxis: {
labels: {
style: {
color: "white"
}
},
title: {
style: {
color: "white"
}
}
}
}
Personalizzare il colore della descrizione comando
Per personalizzare il colore della descrizione comando, utilizza i seguenti attributi:
Il seguente codice JSON di HighCharts cambia il colore di sfondo della descrizione comando in ciano e il colore del testo della descrizione comando in nero.
{
tooltip: {
backgroundColor: "cyan",
style: {
color: "black"
}
}
}
Personalizzare i contenuti e gli stili delle descrizioni comando
Per personalizzare i contenuti della descrizione comando, utilizza i seguenti attributi:
Il seguente JSON di HighCharts modifica il formato della descrizione comando in modo che il valore dell'asse x venga visualizzato nella parte superiore della descrizione comando in un carattere più grande, seguito da un elenco di tutti i valori della serie in quel punto.
Questo esempio utilizza le seguenti funzioni e variabili HighCharts:
{key}
è una variabile che restituisce il valore dell'asse x del punto selezionato. (in questo esempio, il mese e l'anno).{#each points}{/each}
è una funzione che ripete il codice racchiuso per ogni serie del grafico.{series.name}
è una variabile che restituisce il nome della serie.{y:.2f}
è una variabile che restituisce il valore dell'asse Y del punto selezionato, arrotondato a due cifre decimali.{y}
è una variabile che restituisce il valore dell'asse Y del punto selezionato.{variable:.2f}
arrotondato a due cifre decimali.variable
Per altri esempi di formattazione dei valori, consulta la documentazione sui modelli Highcharts.
{
tooltip: {
format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
shared: true
},
}
Aggiungere annotazioni e didascalie ai grafici
Per aggiungere un'annotazione, utilizza l'attributo annotations
. Per aggiungere un sottotitolo codificato al grafico, utilizza l'attributo caption
.
Per ottenere le coordinate di un punto, fai clic su Esamina i metadati dei punti nella parte superiore della finestra di dialogo Modifica configurazione grafico. Quindi, tieni premuto il cursore sul punto dati che vuoi annotare. Looker mostra un ID punto, che puoi utilizzare nell'attributo annotations.labels.point
.
Il seguente JSON di HighCharts aggiunge due annotazioni al grafico per spiegare una diminuzione degli articoli in inventario dopo determinati periodi di tempo. Inoltre, aggiunge una didascalia in fondo al grafico per spiegare le annotazioni in modo più dettagliato.
{
caption: {
text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
},
annotations: [{
labels: [{
point: "inventory_items.count-60-79",
text: "Clearance sale"
},
{
point: "inventory_items.count-80+",
text: "Thrown away"
},
]
}]
}
Aggiungere bande di riferimento verticali
Per aggiungere una banda di riferimento verticale, utilizza l'attributo xAxis.plotBands
.
Il seguente JSON di HighCharts aggiunge una banda di riferimento verticale tra il 24 novembre 2022 e il 29 novembre 2022 per indicare un periodo di saldi. Inoltre, aggiunge una didascalia nella parte inferiore del grafico per spiegare il significato della banda.
Tieni presente che gli attributi to
e from
di xAxis.plotBands
devono corrispondere ai valori dei dati nel grafico. In questo esempio, poiché i dati sono basati sul tempo, gli attributi accettano valori timestamp Unix (1669680000000 per il 29 novembre 2022 e 1669248000000 per il 24 novembre 2022). I formati di data basati su stringhe come GG/MM/AAAA e GG-MM-AA non sono supportati negli attributi HighCharts to
e from
.
{
caption: {
text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
},
xAxis: {
plotBands: [{
to: 1669680000000,
from: 1669248000000,
label: {
text: 'BFCM Sale Period'
}
}]
},
}
Aggiungere linee tratteggiate e punteggiate
Per modificare le linee continue in linee tratteggiate o punteggiate, utilizza l'attributo series.dashStyle
.
Il seguente JSON di HighCharts modifica l'attributo dashStyle
della serie Customers
in una linea tratteggiata e l'attributo dashStyle
della serie Sales
in una linea punteggiata.
{
series: [{
name: 'Customers',
dashStyle: 'Dash'
}, {
name: 'Sales',
dashStyle: 'Dot'
}]
}
Colorare i valori massimo, minimo e percentile
Consulta la pagina Ricettario per ottenere il massimo dalle visualizzazioni di Looker: personalizzazione della formattazione condizionale nei grafici cartesiani per un esempio dettagliato sulla colorazione dei valori massimo, minimo e percentile di una visualizzazione cartesiana.
Creazione di nuovi tipi di visualizzazione
Puoi utilizzare l'editor di configurazione dei grafici per creare tipi di visualizzazione non inclusi nei tipi di visualizzazione predefiniti di Looker. I seguenti articoli forniscono esempi di alcune delle visualizzazioni che puoi progettare con l'editor di configurazione dei grafici:
- Creare un grafico a dispersione con l'editor di configurazione dei grafici
- Creare un grafico a contatore pieno con l'editor di configurazione del grafico
- Creare un grafico di flusso con l'editor di configurazione del grafico
- Creare un grafico a mappa ad albero con l'editor di configurazione dei grafici
- Creare un grafico di Sankey con l'editor di configurazione del grafico
- Creare un grafico a ruota delle dipendenze con l'editor di configurazione dei grafici
- Creare un diagramma di Venn con l'editor di configurazione del grafico
- Creare un grafico a albero con l'editor di configurazione dei grafici
- Creare un grafico degli articoli con l'editor di configurazione del grafico