Tabelle delle proprietà di visualizzazione e query

Visualization

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

Proprietà Valori Note
width numero (in pixel) Il valore predefinito è 100% quando la proposta non è definita.
height numero (in pixel) Valore predefinito di 500 px quando la prop non è definita.
chartTypeMap oggetto chiave/valore Accetta un oggetto chiave/valore che definisce il componente da visualizzare quando il sistema di adattatori riscontra valori specifici del tipo di grafico. 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 all'ID query o al valore qid. Puoi passare gli override della configurazione 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) oppure un ID query numerica (1234). Se hai accesso all'ID query numerica, partendo da questo valore puoi salvare un'ulteriore richiesta del server.

Query accetta l'elemento query o dashboard, ma non entrambi.
dashboard number Può accettare un ID dashboard numerico (1234). Se hai accesso all'ID numerico della dashboard, partendo da questo valore puoi salvare un'ulteriore richiesta del server.

dashboard non accetta gli ID stringa delle dashboard LookML.

Query accetta l'elemento query o dashboard, ma non entrambi.
config A seconda del valore di type, accetta le seguenti proprietà:

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

Per i valori supportati, consulta la documentazione specifica del grafico più avanti in questa pagina. 		Imposta e sostituisci le impostazioni di configurazione per i grafici.
LoadingIndicator riferimento componente Accetta un riferimento a un componente smontato. Valore predefinito: ProgressCircular 

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

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  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' } Consente di impostare la posizione della legenda o di disattivarla impostandola su false.

Valore predefinito: { position: 'bottom' }
positioning 'overlay' | 'stacked' | 'percent' Modalità di sovrapposizione dei grafici. Valore predefinito: 'overlay'
render_null_values boolean Tratta i valori null come 0. Valore predefinito: false
tooltips boolean Attiva o disattiva le descrizioni comando che vengono visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.
x_axis Configurazione asse X Consulta la sezione relativa all'asse X per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione asse y Consulta la sezione relativa all'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 number Imposta lo spessore 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' Imposta stile punto. Valore predefinito: 'none' (punti disattivati)
visible boolean Mostra o nasconde 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 è a prova di 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 è a prova di 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. Se imposti il valore predefinito di min su 'auto' su 0, mentre quello di max su 'auto' verrà impostato automaticamente sul valore del punto dati massimo nel set. Valore predefinito: ['auto' | 'auto']
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',
      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 grafici a barre e a colonne.

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

Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.
x_axis Configurazione asse X Consulta la sezione relativa all'asse X per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione asse y Consulta la sezione relativa all'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 nasconde 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 è a prova di 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: '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 è a prova di 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. Se imposti il valore minimo su "automatico", il valore predefinito è 0, mentre il valore predefinito su "automatico" corrisponde al valore del punto dati massimo nel set. Valore predefinito: ['auto' | 'auto'].
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: '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' } Consente di impostare la posizione della legenda o di disattivarla impostandola su false. Valore predefinito: { position: 'bottom' }
render_null_values boolean Tratta i valori null come 0. Valore predefinito: false
tooltips boolean Attiva o disattiva le descrizioni comando che vengono visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.
x_axis Configurazione asse X Consulta la sezione relativa all'asse X per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione asse y Consulta la sezione relativa all'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: '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 number Imposta lo spessore 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' Imposta stile punto. Valore predefinito: 'none' (punti disattivati)
visible boolean Mostra o nasconde 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 solo un singolo asse X, la nostra API è a prova di 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: 'line',
      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 è a prova di 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. Se imposti il valore minimo su "automatico", il valore predefinito è 0, mentre il valore predefinito su "automatico" corrisponde al valore del punto dati massimo nel set. Valore predefinito: ['auto' | 'auto'].
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: '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' } Consente di impostare la posizione della legenda o di disattivarla impostandola su false. Valore predefinito: { position: 'bottom' }
render_null_values boolean Tratta i valori null come 0. Valore predefinito: false
tooltips boolean Attiva o disattiva le descrizioni comando che vengono visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.
x_axis Configurazione asse X Consulta la sezione relativa all'asse X per le opzioni di configurazione e gli esempi di utilizzo.
y_axis Configurazione asse y Consulta la sezione relativa all'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 number Utilizzato per impostare la dimensione dei punti in un grafico a dispersione. Può essere considerato il valore indicativo 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 stile punto. Valore predefinito: 'none' (punti disattivati)
size_by false | stringa Nome della serie per il quale calibrare la dimensione di ciascun punto. Imposta false per disattivare il dimensionamento dinamico in punti. Valore predefinito: false
visible boolean Mostra o nasconde 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 solo un singolo asse X, la nostra API è a prova di 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: 'scatter',
      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 è a prova di 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. Se imposti il valore minimo su "automatico", il valore predefinito è 0, mentre il valore predefinito su "automatico" corrisponde al valore del punto dati massimo nel set. Valore predefinito: ['auto' | 'auto'].
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: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Proprietà del grafico 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à del grafico 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 relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.
y_axis Configurazione asse y Consulta la sezione relativa all'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 solo una serie, manteniamo un pattern API che prevede override di serie con nome o array in modo da mantenere la coerenza con gli altri tipi di grafici nella nostra libreria.

Proprietà Valori Note
color string Codice esadecimale
line_width number Imposta lo spessore 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 solo un singolo asse Y, la nostra API è a prova di futuro ed è strutturata per supportare la configurazione di più assi.

Proprietà Valori Note
range [numero (min) | 'auto', numero (max) | 'auto'] Imposta il valore minimo e massimo dell'asse y. Se imposti il valore minimo su "automatico", il valore predefinito è 0, mentre il valore predefinito su "automatico" corrisponde al valore del punto dati massimo 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à del grafico 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 relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.
column_order string[] Un array di nomi di serie (ad esempio 'orders.count') che indica l'ordine delle colonne della tabella da sinistra a destra.
show_row_numbers boolean Attiva/disattiva la visualizzazione della riga dei totali in fondo alla tabella. Valore predefinito: true
show_totals boolean Attiva/disattiva la visualizzazione della riga dei totali in fondo alla 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 Quando true, il testo delle celle di una tabella è limitato a una singola riga e l'overflow dei contenuti viene troncato con i puntini di sospensione. Quando il valore è false, i contenuti possono essere aggregati su più righe. Valore predefinito: true
truncate_header boolean Quando true, le etichette delle intestazioni di tabella sono limitate a una singola riga e l'overflow dei contenuti viene troncato con i puntini di sospensione. Quando false, le intestazioni possono aggregarsi a 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à della serie 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 delle celle della tabella.
value_format string Una stringa di formattazione dei numeri che indica se visualizzare i valori come valuta, la precisione della rappresentazione 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à del grafico a torta

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

Proprietà Valori Note
type 'pie'
legend false (da disattivare) | configurazione legenda Impostando il valore su false, la legenda viene disabilitata. Impostazione predefinita: abilitata. Consulta la sezione relativa alla legend per le opzioni di configurazione e gli esempi di utilizzo, se abilitate.
tooltips boolean Attiva o disattiva le descrizioni comando che vengono visualizzate quando passi il mouse sopra i punti dati. Valore predefinito: true
series serie in formato view_name.field_name Consulta la sezione relativa alla serie per le opzioni di configurazione e l'utilizzo di esempio.

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 di legenda:

Proprietà Valori Note
type 'labels' | 'legend' labels inserisce etichette che puntano direttamente a ogni sezione. legend inserisce una legenda separata. Valore predefinito: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Posiziona la legenda quando type: 'legend'. Valore predefinito: 'right'
width number 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 nel 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>