Visualization
Questo componente recupera i dati e la configurazione dal contesto della query ed esegue il rendering della visualizzazione appropriata. Puoi personalizzare la larghezza e l'altezza passando valori numerici dei pixel a tali proprietà.
Proprietà | Valori | Note |
---|---|---|
width
|
numero (in pixel) | Valore predefinito 100% quando la proposta non è definita. |
height
|
numero (in pixel) | Valore predefinito 500 px quando la proposta non è definita. |
chartTypeMap
|
oggetto chiave/valore | Accetta un oggetto chiave/valore che definisce il componente da visualizzare quando il sistema dell'adattatore rileva valori di tipi di grafici specifici. Puoi utilizzarlo per sostituire i 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 per acquisire una risposta alla query in base all'ID query o al valore qid
. Puoi trasferire le sostituzioni della configurazione vis da unire alla risposta dell'API e caricare tutti i dati nel contesto React.
Proprietà | Valori | Note |
---|---|---|
query
|
numero | stringa | Puoi accettare Query.client_id , che si trova dopo la proprietà qid in un URL di Explore, (3fdrdE0b3ATltUvXBaSOPN ) o un ID query numerico (1234 ). Se hai accesso all'ID query numerico, a partire da questo valore puoi salvare un'altra richiesta del server.Query accetta il prop query o il dashboard prop, ma non entrambi.
|
dashboard
|
number | Può accettare un ID numerico della dashboard (1234 ). Se hai accesso all'ID della dashboard numerico, a partire da questo valore puoi salvare un'altra richiesta del server.dashboard non accetta gli ID stringa delle dashboard LookML.Query accetta l'elemento di scena query o l'oggetto di scena 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 , y_axis Consulta la documentazione specifica del grafico più avanti in questa pagina per conoscere i valori supportati. |
Impostare e sostituire le impostazioni di configurazione per i grafici. |
LoadingIndicator
|
riferimento ai componenti | 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' }
|
Imposta la posizione della legenda o disabilita la legenda impostandola su false .Impostazione predefinita: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Modalità di sovrapposizione 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 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 serie per le opzioni di configurazione e l'utilizzo di esempio. |
x_axis
|
configurazione asse x | Consulta la sezione sull'asse x per conoscere le opzioni di configurazione e l'utilizzo di esempio. |
y_axis
|
configurazione dell'asse y | Consulta la sezione sull'asse y per le opzioni di configurazione e l'utilizzo di esempio. |
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 della linea in pixel. Valore predefinito: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Imposta forma punto. Valore predefinito: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Imposta lo stile del punto. Valore predefinito: 'none' (punti disattivati)
|
visible
|
boolean | Mostrare o nascondere 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 i nostri grafici attualmente 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 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',
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 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 (min) | 'auto' |
Imposta il valore minimo e massimo dell'asse y. Se il valore minimo è impostato su 'auto' , il valore predefinito è 0 e quello massimo su 'auto' è impostato sul valore massimo dei punti dati dell'insieme. 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: '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 disabilita la legenda 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. Impostazione predefinita: true
|
series
|
serie in formato view_name.field_name
|
Consulta la sezione serie per le opzioni di configurazione e l'utilizzo di esempio. |
x_axis
|
configurazione asse x | Consulta la sezione sull'asse x per conoscere le opzioni di configurazione e l'utilizzo di esempio. |
y_axis
|
configurazione dell'asse y | Consulta la sezione sull'asse y per le opzioni di configurazione e l'utilizzo di esempio. |
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 | Mostrare o nascondere 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 i nostri grafici attualmente 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 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 un solo 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 (min) | 'auto' |
Imposta il valore minimo e massimo dell'asse y. Se imposti min su 'auto' il valore predefinito è 0, mentre se imposti max su 'auto' per impostazione predefinita viene usato il valore massimo del punto dati nell'insieme. 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 disabilita la legenda impostandola su false . Valore predefinito: { position: 'bottom' }
|
render_null_values
|
boolean | Tratta i valori nulli 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 serie per le opzioni di configurazione e l'utilizzo di esempio. |
x_axis
|
configurazione asse x | Consulta la sezione sull'asse x per conoscere le opzioni di configurazione e l'utilizzo di esempio. |
y_axis
|
configurazione dell'asse y | Consulta la sezione sull'asse y per le opzioni di configurazione e l'utilizzo di esempio. |
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 della linea in pixel. Valore predefinito: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Imposta forma punto. Valore predefinito: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Imposta lo stile del punto. Valore predefinito: 'none' (punti disattivati)
|
visible
|
boolean | Mostrare o nascondere 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 i nostri grafici attualmente 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 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 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 (min) | 'auto' |
Imposta il valore minimo e massimo dell'asse y. Se imposti min su 'auto' il valore predefinito è 0, mentre se imposti max su 'auto' per impostazione predefinita viene usato il valore massimo del punto dati nell'insieme. 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à del grafico 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 disabilita la legenda impostandola su false . Valore predefinito: { position: 'bottom' }
|
render_null_values
|
boolean | Tratta i valori nulli 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 serie per le opzioni di configurazione e l'utilizzo di esempio. |
x_axis
|
configurazione asse x | Consulta la sezione sull'asse x per conoscere le opzioni di configurazione e l'utilizzo di esempio. |
y_axis
|
configurazione dell'asse y | Consulta la sezione sull'asse y per le opzioni di configurazione e l'utilizzo di esempio. |
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 le dimensioni dei punti in un grafico a dispersione. Può essere considerato il valore contorno di ogni punto. Valore predefinito: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Imposta forma punto. Valore predefinito: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Imposta lo stile del punto. Valore predefinito: 'none' (punti disattivati)
|
size_by
|
false | stringa
|
Nome della serie per cui calibrare le dimensioni di ogni punto. Imposta il valore false per disattivare il ridimensionamento dinamico dei punti. Valore predefinito: false
|
visible
|
boolean | Mostrare o nascondere 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 i nostri grafici attualmente 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 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 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 (min) | 'auto' |
Imposta il valore minimo e massimo dell'asse y. Se imposti min su 'auto' il valore predefinito è 0, mentre se imposti max su 'auto' per impostazione predefinita viene usato il valore massimo del punto dati nell'insieme. 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à 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 nulli come 0. Valore predefinito: false
|
series
|
serie in formato view_name.field_name
|
Consulta la sezione serie per le opzioni di configurazione e l'utilizzo di esempio. |
y_axis
|
configurazione dell'asse y | Consulta la sezione sull'asse y per le opzioni di configurazione e l'utilizzo di esempio. |
Esempio di utilizzo:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Sebbene Sparkline intrinsecamente supporti una sola serie, manteniamo un pattern API che prevede sostituzioni di serie denominate o array in modo da mantenere la coerenza con gli altri tipi di grafico nella nostra libreria.
Proprietà | Valori | Note |
---|---|---|
color
|
string | Codice esadecimale |
line_width
|
number | Imposta lo spessore 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 per supportare la configurazione di più assi.
Proprietà | Valori | Note |
---|---|---|
range
|
[numero (min) | 'auto' , numero (min) | 'auto' |
Imposta il valore minimo e massimo dell'asse y. Se imposti min su 'auto' il valore predefinito è 0, mentre se imposti max su 'auto' per impostazione predefinita viene usato il valore massimo del punto dati nell'insieme. 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 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 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
|
Quando true , il testo della cella della tabella è limitato a una singola riga e l'overflow dei contenuti è troncato con i puntini di sospensione. Quando false , i contenuti possono essere aggregati su più righe. Valore predefinito: true
|
truncate_header
|
boolean
|
Quando true , le etichette delle intestazioni della tabella sono limitate a una singola riga e l'overflow dei contenuti viene troncato con i puntini di sospensione. Quando false , le intestazioni possono essere aggregate 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à 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 della cella incorporata. Il valore predefinito è true per la prima misura e false per gli altri.
|
color
|
string
|
Specifica il colore utilizzato per visualizzare la cella della tabella. |
value_format
|
string
|
Una stringa di formattazione del numero che indica se eseguire il rendering dei valori come valuta, la precisione in virgola mobile, se utilizzare virgole o punti per delimitare 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 (per disattivare) | configurazione della legenda
|
Se imposti false , la legenda viene disabilitata. Valore predefinito: attivato. Consulta la sezione legenda per informazioni sulle opzioni di configurazione e sull'utilizzo di esempio quando sono attive.
|
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 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 legende:
Proprietà | Valori | Note |
---|---|---|
type
|
'labels' | 'legend'
|
labels posiziona etichette che puntano direttamente a ogni sezione. legend posiziona 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 in un grafico a torta viene trattato 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>