Tabelle delle proprietà di visualizzazione e query

Visualization

Questo componente acquisisce i dati e la configurazione dal contesto della query e mostra la visualizzazione appropriata. Puoi personalizzare la larghezza e l'altezza passando valori numerici in pixel a queste proprietà.

Proprietà Valori Note
width numero (in pixel) Valore predefinito 100% se la proprietà non è definita.
height numero (in pixel) Valore predefinito 500px se la proprietà non è definita.
chartTypeMap Oggetto chiave/valore Accetta un oggetto chiave/valore che definisce il componente da visualizzare quando il sistema di adattatore rileva valori specifici del tipo di grafico. Questa opzione può essere utilizzata per eseguire l'override dei grafici predefiniti di Looker o per aggiungere nuovi tipi di grafici al sistema di adattatori.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

<Query query='12345' config={{ type: 'radar'}}>
   <Visualization
      width={1000}
      height={500}
      chartTypeMap={{ radar: MyCustomRadar}}
    />
</Query>

Query

Query si integra con la nostra API JavaScript per gestire il ciclo di richiesta/risposta e ottenere una risposta alla query in base al valore ID query o qid. Puoi passare le sostituzioni della configurazione di vis da unire alla risposta dell'API e caricare tutti i dati nel contesto di React.

Proprietà Valori Note
query numero | stringa Può accettare Query.client_id, che viene dopo la proprietà qid nell'URL di un'esplorazione (3fdrdE0b3ATltUvXBaSOPN), o un ID query numerico (1234). Se hai accesso all'ID numerico della query, a partire da questo valore puoi salvare una richiesta aggiuntiva del server.

Query accetta la proprietà query o la proprietà dashboard, ma non entrambe.
dashboard numero Può accettare un ID dashboard numerico (1234). Se hai accesso all'ID numerico della dashboard, a partire da questo valore puoi salvare una richiesta aggiuntiva del server.

dashboard non accetta gli ID stringa delle dashboard LookML.

Query accetta la proposta query o dashboard, ma non entrambe.
config A seconda del valore di type, accetta le seguenti proprietà:

type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axis

Per i valori supportati, consulta la documentazione specifica del grafico più avanti in questa pagina. 		Imposta ed esegui l'override delle impostazioni di configurazione per i grafici.
LoadingIndicator riferimento componente Accetta il riferimento di un componente smontato. Valore predefinito: ProgressCircular 

import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'

<Query
  query='12345'
  config={{
      /* specific properties described later on this page */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Proprietà del grafico ad area

Di seguito sono riportate le proprietà config per i grafici ad area.

Proprietà Valori Note
type 'area'
legend false (per disattivare) OPPURE { position: 'left' | 'bottom' | 'right' | 'top' } Imposta la posizione della legenda o disattivala impostandola su false.

Valore predefinito: { position: 'bottom' }
positioning 'overlay' | 'stacked' | 'percent' Modalità di impilamento dei grafici. Valore predefinito: 'overlay'
render_null_values boolean Tratta i valori nulli come 0. Valore predefinito: false
tooltips boolean Attiva o disattiva le descrizioni comando visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione Series per le opzioni di configurazione e gli esempi di utilizzo.
x_axis Configurazione dell'asse x Consulta la sezione Asse x per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione dell'asse Y Consulta la sezione sull'asse Y per le opzioni di configurazione e gli esempi di utilizzo.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'area',
    legend: { position: 'left' },
    positioning: 'stacked',
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

La proprietà series può accettare un array di configurazioni di serie o un oggetto denominato che sostituisce una serie specifica nella risposta.

Proprietà Valori Note
color string Codice esadecimale
label string
line_width numero Imposta la larghezza del tratto della linea in pixel. Valore predefinito: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Imposta la forma del punto. Valore predefinito: 'circle'
style 'none' | 'filled' | 'outline' Stile set-point. Valore predefinito: 'none' (punti disattivati)
visible boolean Mostra o nascondi le serie di dati. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      }
    }
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

Anche se al momento i nostri grafici supportano solo un singolo asse x, la nostra API è pensata per il futuro ed è strutturata per supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse x. Valore predefinito: false (nessuna etichetta)
reversed boolean Inverte l'ordine dei punti dati. Valore predefinito: false
values boolean Mostra o nasconde i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Anche se al momento i nostri grafici supportano solo un singolo asse Y, la nostra API è pensata per il futuro ed è strutturata per supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false.
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse Y. Valore predefinito: false (nessuna etichetta)
range [numero (min) | 'auto', numero (max) | 'auto'] Imposta i valori minimo e massimo dell'asse Y. Se imposti min su 'auto', il valore predefinito è 0 e se imposti max su 'auto', il valore predefinito è il valore massimo del punto dati nel set. Predefinita: ['auto' | 'auto']
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Proprietà dei grafici a barre e a colonne

Di seguito sono riportate le proprietà config per i grafici a barre e a colonne.

Proprietà Valori Note
type 'bar' | 'column'
legend false (per disattivare) OPPURE { position: 'left' | 'bottom' | 'right' | 'top' } Imposta la posizione della legenda o disattivala impostandola su false. Valore predefinito: { position: 'bottom' }
positioning 'grouped' | 'stacked' | 'percent' Modalità di impilamento dei grafici. Valore predefinito: 'overlay'
tooltips boolean Attiva o disattiva le descrizioni comando visualizzate quando passi il mouse sopra i punti dati.

Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione Series per le opzioni di configurazione e gli esempi di utilizzo.
x_axis Configurazione asse x Consulta la sezione Asse x per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione dell'asse Y Consulta la sezione sull'asse Y per le opzioni di configurazione e gli esempi di utilizzo.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

La proprietà series può accettare un array di configurazioni di serie o un oggetto denominato che sostituisce una serie specifica nella risposta.

Proprietà Valori Note
color string Codice esadecimale
label string
visible boolean Mostra o nascondi le serie di dati. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'column',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        visible: false,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'column',
    series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
  }}
>
  <Visualization />
</Query>

x_axis

Anche se al momento i nostri grafici supportano solo un singolo asse x, la nostra API è pensata per il futuro ed è strutturata per supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false.
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse x. Valore predefinito: false (nessuna etichetta)
reversed boolean Inverte l'ordine dei punti dati. Valore predefinito: false
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'column',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Anche se al momento i nostri grafici supportano solo un singolo asse Y, la nostra API è pensata per il futuro ed è strutturata per supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false.
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse Y. Valore predefinito: false (nessuna etichetta)
range [numero (min) | 'auto', numero (max) | 'auto'] Imposta il valore minimo e massimo dell'asse y. Impostazione del valore minimo su "automatico" il valore predefinito è 0 e il valore massimo è "automatico" il valore predefinito è il valore massimo del punto dati. Valore predefinito: ['auto' | 'auto'].
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Proprietà del grafico a linee

Di seguito sono riportate le proprietà config per i grafici a linee.

Proprietà Valori Note
type 'line'
legend false (per disattivare) OPPURE { position: 'left' | 'bottom' | 'right' | 'top' } Imposta la posizione della legenda o disattiva la legenda impostandola su false. Predefinita: { position: 'bottom' }
render_null_values boolean Tratta i valori nulli come 0. Valore predefinito: false
tooltips boolean Attiva o disattiva le descrizioni comando visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione serie per le opzioni di configurazione e gli esempi di utilizzo.
x_axis Configurazione asse x Consulta la sezione sull'asse x per conoscere le opzioni di configurazione ed esempi di utilizzo.
y_axis Configurazione asse y Consulta la sezione sull'asse y per conoscere le opzioni di configurazione ed esempi di utilizzo.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'line',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

La proprietà series può accettare un array di configurazioni di serie o un oggetto denominato che sostituisce una serie specifica nella risposta.

Proprietà Valori Note
color string Codice esadecimale
label string
line_width numero Imposta la larghezza del tratto della linea in pixel. Valore predefinito: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Imposta la forma del punto. Valore predefinito: 'circle'
style 'none' | 'filled' | 'outline' Stile set-point. Valore predefinito: 'none' (punti disattivati)
visible boolean Mostra o nascondi le serie di dati. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

Anche se al momento i nostri grafici supportano un solo asse x, la nostra API è a prova di futuro ed è strutturata in modo da supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false.
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse x. Valore predefinito: false (nessuna etichetta)
reversed boolean Inverte l'ordine dei punti dati. Valore predefinito: false
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Anche se al momento i nostri grafici supportano un solo asse Y, la nostra API è a prova di futuro ed è strutturata in modo da supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse Y. Valore predefinito: false (nessuna etichetta)
range [numero (min) | 'auto', numero (max) | 'auto'] Imposta il valore minimo e massimo dell'asse y. Impostazione del valore minimo su "automatico" il valore predefinito è 0 e il valore massimo è "automatico" il valore predefinito è il valore massimo del punto dati. Valore predefinito: ['auto' | 'auto'].
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Proprietà dei grafici a dispersione

Di seguito sono riportate le proprietà config per i grafici a dispersione.

Proprietà Valori Note
type 'scatter'
legend false (per disattivare) OPPURE { position: 'left' | 'bottom' | 'right' | 'top' } Imposta la posizione della legenda o disattiva la legenda impostandola su false. Predefinita: { position: 'bottom' }
render_null_values boolean Tratta i valori nulli come 0. Valore predefinito: false
tooltips boolean Attiva o disattiva le descrizioni comando visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione serie per le opzioni di configurazione e gli esempi di utilizzo.
x_axis Configurazione dell'asse x Consulta la sezione sull'asse x per conoscere le opzioni di configurazione ed esempi di utilizzo.
y_axis Configurazione dell'asse Y Consulta la sezione sull'asse Y per le opzioni di configurazione e gli esempi di utilizzo.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'scatter',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

La proprietà series può accettare un array di configurazioni di serie o un oggetto denominato che sostituisce una serie specifica nella risposta.

Proprietà Valori Note
color string Codice esadecimale
label string
line_width numero Utilizzato per impostare la dimensione dei punti in un grafico a dispersione. È una sorta di valore contorno di ogni punto. Valore predefinito: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Imposta la forma del punto. Valore predefinito: 'circle'
style 'none' | 'filled' | 'outline' Imposta lo stile del punto. Valore predefinito: 'none' (punti disattivati)
size_by false | stringa Il nome della serie per cui calibrare le dimensioni di ciascun punto. Imposta false per disattivare il dimensionamento dinamico dei punti. Valore predefinito: false
visible boolean Mostra o nascondi le serie di dati. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
        size_by: 'orders.count',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
    query='12345'
    config={{
      type: 'scatter',
      series: [
        {
          color: '#4285F4',
          label: 'Total Orders',
          shape: 'square',
          size_by: 'orders.count',
        },
      ],
    }}
  >
    <Visualization />
  </Query>

x_axis

Anche se al momento i nostri grafici supportano un solo asse x, la nostra API è a prova di futuro ed è strutturata in modo da supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false.
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse x. Valore predefinito: false (nessuna etichetta)
reversed boolean Inverte l'ordine dei punti dati. Valore predefinito: false
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Anche se al momento i nostri grafici supportano un solo asse Y, la nostra API è a prova di futuro ed è strutturata in modo da supportare la configurazione di più assi.

Proprietà Valori Note
gridlines boolean Mostra o nascondi le linee della griglia verticali. Valore predefinito: false.
label false (per nascondere l'etichetta) | stringa (valore da visualizzare) Imposta il valore da visualizzare come etichetta dell'asse Y. Valore predefinito: false (nessuna etichetta)
range [numero (min) | 'auto', numero (max) | 'auto'] Imposta il valore minimo e massimo dell'asse y. Impostazione del valore minimo su "automatico" il valore predefinito è 0 e il valore massimo è "automatico" il valore predefinito è il valore massimo del punto dati. Valore predefinito: ['auto' | 'auto'].
values boolean Mostra o nascondi i valori visualizzati lungo l'asse. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Proprietà dei grafici a valore singolo

Di seguito sono riportate le proprietà config per i grafici a valore singolo.

Proprietà Valori Note
type 'single_value'

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

Proprietà dei grafici sparkline

Di seguito sono riportate le proprietà config per i grafici sparkline.

Proprietà Valori Note
type 'sparkline'
render_null_values boolean Tratta i valori null come 0. Valore predefinito: false
series serie in formato view_name.field_name Consulta la sezione Series per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione dell'asse Y Consulta la sezione sull'asse Y per le opzioni di configurazione e gli esempi di utilizzo.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

series

Sebbene Sparkline supporti intrinsecamente una sola serie, manteniamo un pattern API che prevede l'override delle serie con nome o array per mantenere la coerenza con gli altri tipi di grafici della nostra libreria.

Proprietà Valori Note
color string Codice esadecimale
line_width numero Imposta la larghezza del tratto della linea in pixel. Valore predefinito: 3

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'sparkline',
    series: {
      'orders.count': {
        color: '#4285F4',
        line_width: 10,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: [
        {
          color: '#4285F4',
          line_width: 10,
        },
      ],
  }}
>
  <Visualization />
</Query>

y_axis

Anche se al momento i nostri grafici supportano un solo asse Y, la nostra API è a prova di futuro ed è strutturata in modo da supportare la configurazione di più assi.

Proprietà Valori Note
range [numero (min) | 'auto', numero (massimo) | 'auto'] Imposta il valore minimo e massimo dell'asse y. Se imposti il valore minimo su "auto", il valore predefinito è 0, mentre se imposti il valore massimo su "auto", il valore predefinito è il valore massimo del punto dati nel set. Valore predefinito: ['auto' | 'auto'].

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

Proprietà dei grafici a tabella

Di seguito sono riportate le proprietà config per i grafici a tabella.

Proprietà Valori Note
type 'table'
series serie in formato view_name.field_name Consulta la sezione serie per le opzioni di configurazione e gli esempi di utilizzo.
column_order string[] Un array di nomi di serie (ad es. 'orders.count') che indica come vuoi ordinare le colonne della tabella da sinistra a destra.
show_row_numbers boolean Attiva/disattiva la visualizzazione della riga dei totali nella parte inferiore della tabella. Valore predefinito: true
show_totals boolean Attiva/disattiva la visualizzazione della riga dei totali nella parte inferiore della tabella. Valore predefinito: true
show_row_totals boolean Attiva/disattiva la visualizzazione dei totali delle righe sul lato destro della tabella. Valore predefinito: true
truncate_text boolean Se il valore è true, il testo della cella della tabella è limitato a una sola riga e il contenuto in eccesso viene troncato con tre puntini. Se il valore è false, i contenuti possono essere a capo su più righe. Valore predefinito: true
truncate_header boolean Quando true, le etichette dell'intestazione della tabella sono limitate a una sola riga e l'overflow dei contenuti viene troncato con i puntini di sospensione. Se il valore è false, le intestazioni possono essere suddivise su più righe. Valore predefinito: true

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    column_order: ['orders.count', 'users.city'],
    show_row_numbers: true,
    show_totals: true,
    show_row_totals: true,
    truncate_text: true,
    truncate_header: true
  }}
>
  <Visualization />
</Query>

series

La proprietà series può accettare un array di configurazioni di serie o un oggetto denominato che sostituisce una serie specifica nella risposta.

Proprietà Valori Note
cell_visualization boolean Attiva o disattiva la visualizzazione delle celle in linea. Il valore predefinito è true per la prima misura e false per le altre.
color string Specifica il colore utilizzato per eseguire il rendering della visualizzazione cella della tabella.
value_format string Una stringa per la formattazione del numero che indica se visualizzare i valori come valuta, la precisione in virgola mobile, se utilizzare virgole o punti per delineare migliaia e così via.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

Proprietà dei grafici a torta

Di seguito sono riportate le proprietà config per i grafici a torta.

Proprietà Valori Note
type 'pie'
legend false (per disattivare) | configurazione della legenda L'impostazione su false disattiva la legenda. Valore predefinito: attivato. Consulta la sezione relativa alla legenda per conoscere le opzioni di configurazione e gli esempi di utilizzo quando questa opzione è abilitata.
tooltips boolean Attiva o disattiva le descrizioni comando visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione Series per le opzioni di configurazione e gli esempi di utilizzo.

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

La proprietà legend può accettare le seguenti configurazioni della legenda:

Proprietà Valori Note
type 'labels' | 'legend' labels inserisce etichette che rimandano direttamente a ogni fetta. legend inserisce una legenda separata. Valore predefinito: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Posiziona la legenda quando type: 'legend'. Valore predefinito: 'right'
width numero Larghezza massima della legenda in pixel quando type: 'legend'. Valore predefinito: 300
value 'label' | 'label_value' | 'value' | 'percent' | 'label_percent' Imposta i contenuti della legenda: etichetta, etichetta e valore, valore, percentuale, etichetta e percentuale. Valore predefinito: 'label_percent'

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: {
      type: 'legend'
      position: 'right'
      width: 200,
      value: 'label_value',
    },
  }}
>
  <Visualization />
</Query>

series

A differenza dei grafici cartesiani, ogni punto dati in un grafico a torta viene considerato come una nuova serie:

Proprietà Valori Note
color string Codice esadecimale

Esempio di utilizzo:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    series: {
      'New York': {
        color: '#4285F4',
      },
      'Los Angeles': {
        color: '#b73ec3',
      },
      'Chicago': {
        color: '#db4da8',
      },
    },
  }}
>
  <Visualization />
</Query>