Personalizzare le visualizzazioni utilizzando l'editor di configurazione dei grafici

Puoi utilizzare l'editor di configurazione dei grafici per personalizzare le opzioni di formattazione nelle visualizzazioni di Looker che utilizzano l'API HighCharts. Sono inclusi la maggior parte dei grafici cartesiani, come il grafico a colonne, il grafico a barre e il grafico a linee, tra gli altri.

Se le funzionalità di Gemini in Looker sono attive, puoi utilizzare l'assistente per la visualizzazione per generare opzioni di formattazione JSON da prompt basati su testo per accelerare la personalizzazione delle visualizzazioni di Looker.

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 dei grafici:

  1. Visualizzare una visualizzazione in un'esplorazione o modificarla in un look o una dashboard.
  2. Apri il menu Modifica nella visualizzazione.

  3. Fai clic sul pulsante Modifica configurazione grafico nella scheda Grafico. Looker visualizza 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 grafico (override) contiene il codice JSON che deve eseguire l'override del codice JSON di origine. Quando apri per la prima volta la finestra di dialogo Modifica configurazione grafico, Looker compila il riquadro con alcuni dati JSON predefiniti. Puoi iniziare con questo JSON oppure eliminarlo e inserire qualsiasi JSON HighCharts valido.

  4. Seleziona la sezione Configurazione grafico (override) e inserisci un codice JSON HighCharts valido. I nuovi valori sostituiranno quelli nella sezione Configurazione grafico (origine).

    • Consulta la sezione Esempi per esempi di JSON HighCharts validi.
    • Looker accetta qualsiasi valore JSON valido. Looker non accetta funzioni, date o valori non definiti.

  5. Fai clic su <> (Formatta codice) per consentire a Looker di formattare correttamente il codice JSON.

  6. Fai clic su Anteprima per testare le modifiche.

  7. Fai clic su Applica per applicare le modifiche. La visualizzazione verrà mostrata 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 che contiene JSON non valido, Looker visualizzerà un messaggio di errore Invalid JSON detected. Puoi ripulire il codice JSON non valido con l'opzione Correzione automatica del codice nella parte inferiore del riquadro Configurazione grafico (override).

Se vuoi modificare le opzioni di visualizzazione predefinite, rimuovi prima le modifiche apportate nell'editor di configurazione dei grafici, poi sostituiscile in un secondo momento. In particolare, segui questi passaggi:

  1. Fai clic sul pulsante Modifica configurazione grafico nella scheda Grafico. Looker visualizza la finestra di dialogo Modifica configurazione grafico.
  2. Copia il testo nel riquadro Configurazione grafico (override).
  3. Fai clic sul pulsante Cancella override del grafico per eliminare tutte le modifiche.
  4. Fai clic su Applica.
  5. Modifica la visualizzazione utilizzando le opzioni di visualizzazione predefinite.
  6. Fai clic sul pulsante Modifica configurazione grafico nella scheda Grafico. Looker visualizza la finestra di dialogo Modifica configurazione grafico.
  7. Inserisci un file JSON HighCharts valido nel riquadro Configurazione grafico (override). Puoi utilizzare il testo che hai copiato nel passaggio 2 come modello, ma assicurati di testare le modifiche utilizzando il pulsante Anteprima per verificare che non ci siano conflitti.
  8. 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 regole di stile diverse.

L'attributo series formatters accetta due attributi: select e style.

  • Inserisci un'espressione logica nell'attributo select per indicare quali valori dei dati verranno formattati.
  • Inserisci un codice JSON nell'attributo style per indicare come formattare i valori dei dati.

Ad esempio, il seguente codice JSON colorerà ogni valore dei dati di arancione se è maggiore o uguale a 380:

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

Le sezioni seguenti descrivono in modo più dettagliato i valori potenziali degli attributi select e style.

Attributo select

Puoi utilizzare i seguenti valori in un'espressione select:

  • value: questa variabile restituisce il valore della serie. Puoi utilizzare questo valore nei confronti, come nei seguenti esempi:
  • max: utilizza select: max per scegliere come target il valore della serie con il valore massimo.
  • min: utilizza select: 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, potresti utilizzare select: percent_rank >= 0.9 per scegliere come target i valori delle serie nel novantesimo percentile.
  • 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 utilizzare select: name = Sold per scegliere come target la serie in cui il valore della dimensione è Venduto.
  • AND/OR Utilizza AND e OR per combinare più espressioni logiche.

Per vedere queste espressioni implementate nell'editor di configurazione dei grafici, 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, i bordi delle serie utilizzando style.borderColor e impostare la larghezza dei bordi delle serie utilizzando style.borderWidth. Per un elenco più completo di opzioni di stile, consulta Opzioni Highcharts per series.column.data.

Per le visualizzazioni a linee, utilizza style.marker.fillColor e style.marker.lineColor anziché style.color. Per un elenco più completo delle opzioni di stile della linea, consulta Opzioni di Highcharts per series.line.data.marker.

Per vedere la formattazione del colore implementata nell'editor di configurazione del grafico, consulta l'esempio Colora i valori massimo, minimo e percentile.

Metadati dei campi

Il menu a discesa Metadati campo ti consente di copiare il nome della serie per qualsiasi campo della visualizzazione. Puoi utilizzare questo nome della serie utilizzando l'attributo series formatters per confrontare i valori di serie diverse. Per un esempio, consulta la sezione Serie di colori rispetto ad altri valori delle serie.

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 del testo degli assi

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 file JSON HighCharts cambia il colore di sfondo della visualizzazione in viola e il testo dei titoli e delle etichette degli 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 JSON 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 dei suggerimenti

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 con un carattere più grande, seguito da un elenco di tutti i valori delle 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 incluso per ogni serie nel 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} arrotonda variable a due cifre decimali. Per altri esempi di formattazione dei valori, consulta la documentazione sui modelli di 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 una didascalia al grafico, utilizza l'attributo caption.

Per ottenere le coordinate di un punto, fai clic su Ispeziona metadati punto nella parte superiore della finestra di dialogo Modifica configurazione grafico. Poi, tieni il puntatore sopra il punto dati che vuoi annotare. Looker mostra un ID punto, che puoi utilizzare nell'attributo annotations.labels.point.

Il seguente JSON HighCharts aggiunge due annotazioni al grafico per spiegare una diminuzione degli articoli di 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 annotazioni dinamiche

Puoi anche utilizzare i parametri annotationsSource e annotationsTarget per utilizzare i dati di un campo come annotazione.

Per ottenere i nomi dei campi, puoi utilizzare il menu a discesa Metadati dei campi. Tieni presente che il campo annotationsTarget deve essere una misura.

Il seguente JSON HighCharts utilizza il valore del campo orders.annotations come annotazione nel campo orders.count:

{
  annotations: [{
    labels: [{
      annotationsSource: 'orders.annotations',
      annotationsTarget: 'orders.count'
    }]
  }]
}

Aggiungere bande di riferimento verticali

Per aggiungere una banda di riferimento verticale, utilizza l'attributo xAxis.plotBands.

Il seguente JSON HighCharts aggiunge una banda di riferimento verticale tra il 24 novembre 2022 e il 29 novembre 2022 per indicare un periodo di vendita. Viene inoltre aggiunta una didascalia in fondo al 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 di timestamp Unix (1669680000000 per il 29 novembre 2022 e 1669248000000 per il 24 novembre 2022). I formati di data basati su stringhe come MM/GG/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 punteggiate e tratteggiate

Per trasformare le linee continue in linee punteggiate o tratteggiate, utilizza l'attributo series.dashStyle.

Il seguente JSON 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.

Serie di colori rispetto ad altri valori delle serie

A partire da Looker 25.0, il parametro formatters.select consente di confrontare il valore dei dati corrente con i valori di altre serie.

Ad esempio, considera una visualizzazione che mostra il prezzo di vendita medio e il prezzo di vendita mediano per diverse città. Il seguente JSON HighCharts cambia il colore del prezzo di vendita medio in verde quando è maggiore o uguale al prezzo di vendita mediano e in bordeaux in caso contrario:

{
  chart: {},
  series: [{
    name: 'Average Sale Price',
    formatters: [{
        select: 'value >= order_items.median_sale_price',
        style: {
          color: 'green',
          dataLabels: {
            color: 'green'
          }
        }
      },
      {
        select: 'value < order_items.median_sale_price',
        style: {
          color: 'maroon',
          dataLabels: {
            color: 'maroon'
          }
        }
      }
    ]
  }, {
    name: 'Median Sale Price'
  }]
}

Tieni presente che la riga select: 'value >= order_items.median_sale_price' fa riferimento al campo Prezzo di vendita mediano nel formato VIEW_NAME.FIELD_NAME. Per copiare direttamente il valore di questo campo, fai clic sul menu a discesa Metadati campo nella finestra di dialogo Modifica configurazione grafico e seleziona il nome del campo.

Confrontare i valori delle serie con il valore medio o mediano

Il parametro formatters.select supporta la parola chiave mean in Looker 25.0+ e la parola chiave median in Looker 25.2+. Queste parole chiave ti consentono di confrontare il valore corrente dei dati con la media aritmetica o la mediana della serie.

Ad esempio, considera una visualizzazione che mostra l'utile degli ordini per ogni mese dell'anno scorso. Il seguente JSON HighCharts cambia il colore di ogni barra in grigio (rappresentato dal codice esadecimale #aaa) se il profitto dell'ordine è inferiore al profitto medio dell'ordine:

{
  chart: {},
  series: [{
    name: 'Order Profit',
    formatters: [{
      select: 'value < mean',
      style: {
        color: '#aaa'
      }
    }]
  }]
}

Per confrontare il valore della serie con la mediana anziché con la media, modifica la riga select: 'value < mean' in select: 'value < median'.

Utilizzare i modelli per salvare e condividere le configurazioni

Puoi salvare una configurazione come modello per riutilizzarla in altre visualizzazioni o condividerla come punto di partenza per altri utenti.

Salvare un modello

Durante la modifica del codice JSON di HighCharts nell'editor di configurazione del grafico, puoi salvare il codice come modello seguendo questi passaggi:

  1. Nella finestra di dialogo Editor di configurazione del grafico, fai clic su Salva come modello.
  2. Assegna un nome univoco al modello.
  3. Inserisci una descrizione che spieghi agli altri utenti cosa fa il modello.
  4. Modifica e visualizza l'anteprima del codice in base alle tue esigenze.
  5. Fai clic su Salva per convalidare il codice.
  6. Correggi eventuali errori di convalida.
  7. Fai di nuovo clic su Salva per salvare il modello.

Quando crei un modello, tieni presente quanto segue:

  • Gli utenti incorporati non possono creare, modificare o applicare modelli.
  • Tutti gli utenti non incorporati della tua istanza che hanno accesso all'editor di configurazione dei grafici potranno visualizzare il tuo modello.
  • Non tutti i modelli sono adatti a tutti i tipi di visualizzazione. Valuta la possibilità di specificare con quale tipo di visualizzazione deve essere utilizzato il modello nel campo Descrizione.

Applica un modello

Puoi applicare un modello alla visualizzazione corrente. Tieni presente le seguenti considerazioni quando applichi un modello:

  • L'applicazione di un modello sovrascrive qualsiasi codice che hai scritto nell'editor di configurazione del grafico.
  • Non tutti i modelli sono adatti a tutti i tipi di visualizzazione. Ad esempio, se l'autore di un modello ha scritto il codice per un grafico a barre, questo codice potrebbe avere effetti diversi su un grafico a linee.

Per applicare un modello:

  1. Nella finestra di dialogo Editor di configurazione del grafico, fai clic su Modelli salvati.
  2. Fai clic su un modello e poi su Applica modello.
  3. Fai clic su Continua.

Looker applicherà il modello e potrai continuare ad apportare modifiche nell'editor di configurazione del grafico.

Eliminare un modello

Per eliminare un modello:

  1. Nella finestra di dialogo Editor di configurazione del grafico, fai clic su Modelli salvati.
  2. Fai clic sul menu con tre puntini accanto al modello che vuoi eliminare.
  3. Fai clic su Elimina.

Una volta apportate le modifiche, fai clic sul pulsante X nella finestra di dialogo Modelli salvati per tornare alla finestra di dialogo Editor di configurazione del grafico.

Modificare un modello

Per modificare un modello:

  1. Nella finestra di dialogo Editor di configurazione del grafico, fai clic su Modelli salvati.
  2. Fai clic sul menu con tre puntini accanto al modello da modificare.
  3. Fai clic su Modifica.
  4. Una volta terminate le modifiche, fai clic su Salva.

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: