Visualization
Este componente toma los datos y la configuración del contexto de la consulta y renderiza la visualización adecuada. Para personalizar el ancho y la altura, pasa valores de píxeles numéricos a esas propiedades.
Propiedad | Valores | Notas |
---|---|---|
width
|
número (en píxeles) | Es el 100% predeterminado cuando la propiedad no está definida. |
height
|
número (en píxeles) | El valor predeterminado es de 500 px cuando la propiedad no está definida. |
chartTypeMap
|
objeto par clave-valor | Acepta un objeto de clave-valor que define qué componente renderizar cuando el sistema de adaptador encuentra valores de tipo de gráfico específicos. Se puede usar para anular los gráficos predeterminados de Looker o agregar nuevos tipos de gráficos al sistema de adaptadores. |
Ejemplo de uso:
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
se integra con nuestra API de JavaScript para controlar el ciclo de solicitud/respuesta y tomar una respuesta de consulta por el ID de consulta o el valor qid
. Puedes pasar anulaciones de configuración de visibilidad para que se combinen con la respuesta de la API y que todos los datos se carguen en el contexto de React.
Propiedad | Valores | Notas |
---|---|---|
query
|
número | cadena | Puede aceptar Query.client_id , que aparece después de la propiedad qid en la URL de una exploración, (3fdrdE0b3ATltUvXBaSOPN ), o bien un ID de consulta numérico (1234 ). Si tienes acceso al ID de consulta numérico, empezar desde este valor puede guardar una solicitud de servidor adicional.Query acepta la propiedad query o la dashboard , pero no ambas.
|
dashboard
|
número | Puede aceptar un ID de panel numérico (1234 ). Si tienes acceso al ID de panel numérico, comenzar desde este valor puede ahorrar una solicitud de servidor adicional.dashboard no acepta los IDs de cadena de los paneles de LookML.Query acepta la propiedad query o la dashboard , pero no ambas.
|
config
|
Según el valor de type , se aceptan las siguientes propiedades:type , legend , positioning , render_null_values , tooltips , series , x_axis y y_axis Consulta la documentación específica del gráfico más adelante en esta página para conocer los valores admitidos.
|
Establecer y anular la configuración de los gráficos |
LoadingIndicator
|
referencia de componente | Acepta la referencia de un componente desactivado. Valor predeterminado: 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>
Propiedades del gráfico de áreas
Las siguientes son las propiedades config
de los gráficos de área.
Propiedad | Valores | Notas |
---|---|---|
type
|
'area'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita si la configuras como false .Valor predeterminado: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Modo de apilado de gráficos. Valor predeterminado: 'overlay'
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
x_axis
|
Configuración del eje X | Consulta la sección eje x para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección eje y para ver las opciones de configuración y ejemplos de uso. |
Ejemplo de uso:
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 propiedad series
puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
Propiedad | Valores | Notas |
---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
line_width
|
número | Establece el ancho del trazo de la línea en píxeles. Valor predeterminado: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Estilo de punto de ajuste. Predeterminado: 'none' (puntos inhabilitados)
|
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar la etiqueta) | cadena (valor para renderizar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Configuración predeterminada: true |
Ejemplo de uso:
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
Si bien, en la actualidad, nuestros gráficos solo admiten un solo eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto' , número (máx.) | 'auto' |
Establece el valor mínimo y máximo del eje Y. El valor predeterminado del mínimo en 'auto' es 0 y el de máximo en 'auto' se establece de forma predeterminada en el valor máximo de datos del conjunto. Predeterminada: ['auto' | 'auto'] .
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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>
Propiedades del gráfico de barras y columnas
Las siguientes son las propiedades de config
para los gráficos de barras y columnas.
Propiedad | Valores | Notas |
---|---|---|
type
|
'bar' | 'column'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita al establecerla en false . Predeterminada: { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Modo de apilado de gráficos. Valor predeterminado: 'overlay'
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos.Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
x_axis
|
Configuración del eje X | Consulta la sección Eje x para ver las opciones de configuración y los ejemplos de uso. |
y_axis
|
Configuración del eje Y | Consulta la sección Eje Y para ver las opciones de configuración y los ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
legend: { position: 'left' },
positioning: 'stacked',
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propiedad series
puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
Propiedad | Valores | Notas |
---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto' , número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Configurando el mínimo como “automático” la configuración predeterminada es 0 y establecer el máximo en “automático” se establece de forma predeterminada en el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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>
Propiedades del gráfico de líneas
A continuación, se muestran las propiedades de config
para los gráficos de líneas.
Propiedad | Valores | Notas |
---|---|---|
type
|
'line'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita al establecerla en false . Predeterminada: { position: 'bottom' }
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
x_axis
|
Configuración del eje X | Consulta la sección eje x para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
Configuración del eje Y | Consulta la sección eje y para ver las opciones de configuración y ejemplos de uso. |
Ejemplo de uso:
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 propiedad series
puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
Propiedad | Valores | Notas |
---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
line_width
|
número | Establece el ancho del trazo de la línea en píxeles. Valor predeterminado: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Estilo de punto de ajuste. Predeterminado: 'none' (puntos inhabilitados)
|
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto' , número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Configurando el mínimo como “automático” la configuración predeterminada es 0 y establecer el máximo en “automático” se establece de forma predeterminada en el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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>
Propiedades del diagrama de dispersión
Las siguientes son las propiedades de config
para los diagramas de dispersión.
Propiedad | Valores | Notas |
---|---|---|
type
|
'scatter'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita al establecerla en false . Predeterminada: { position: 'bottom' }
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección eje x para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección eje y para ver las opciones de configuración y ejemplos de uso. |
Ejemplo de uso:
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 propiedad series
puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
Propiedad | Valores | Notas |
---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
line_width
|
número | Se usa para establecer el tamaño de los puntos en un diagrama de dispersión. Piensa en ello como el valor del esquema de cada punto. Valor predeterminado: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Estilo de punto de ajuste. Predeterminado: 'none' (puntos inhabilitados)
|
size_by
|
false cadena
|
Es el nombre de la serie para la que se debe calibrar el tamaño de cada punto. Establece false para inhabilitar el ajuste de tamaño dinámico de los puntos. Predeterminada: false
|
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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
Si bien, en la actualidad, nuestros gráficos solo admiten un solo eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | cadena (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto' , número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Configurando el mínimo como “automático” la configuración predeterminada es 0 y establecer el máximo en “automático” se establece de forma predeterminada en el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
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>
Propiedades del gráfico de valor único
Las siguientes son las propiedades de config
para los gráficos de un solo valor.
Propiedad | Valores | Notas |
---|---|---|
type
|
'single_value'
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query query='12345' config={{ type: 'single_value' }}>
<Visualization />
</Query>
Propiedades del minigráfico
Las siguientes son las propiedades config
para los gráficos de líneas de tendencia.
Propiedad | Valores | Notas |
---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección eje y para ver las opciones de configuración y ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Aunque el minigráfico solo admite inherentemente una sola serie, mantenemos un patrón de API que implica anulaciones de series con nombre o array para mantener la coherencia con los otros tipos de gráficos de nuestra biblioteca.
Propiedad | Valores | Notas |
---|---|---|
color
|
string | Código hexadecimal |
line_width
|
número | Establece el ancho del trazo de la línea en píxeles. Valor predeterminado: 3
|
Ejemplo de uso:
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
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
Propiedad | Valores | Notas |
---|---|---|
range
|
[número (min) | 'auto' , número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Configurando el mínimo como “automático” la configuración predeterminada es 0 y establecer el máximo en “automático” se establece de forma predeterminada en el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'sparkline',
y_axis: [
{ range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propiedades del gráfico de tabla
A continuación, se muestran las propiedades de config
para los gráficos de tabla.
Propiedad | Valores | Notas |
---|---|---|
type
|
'table'
|
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
column_order
|
string[]
|
Es un array de nombres de series (por ejemplo, 'orders.count' ) que indica cómo deseas que se ordenen las columnas de la tabla de izquierda a derecha.
|
show_row_numbers
|
boolean
|
Activa o desactiva la visualización de la fila de totales en la parte inferior de la tabla. Valor predeterminado: true
|
show_totals
|
boolean
|
Activa o desactiva la visualización de la fila de totales en la parte inferior de la tabla. Valor predeterminado: true
|
show_row_totals
|
boolean
|
Activa o desactiva la visualización de los totales de las filas en el lado derecho de la tabla. Valor predeterminado: true
|
truncate_text
|
boolean
|
Cuando es true , el texto de las celdas de la tabla se limita a una sola línea y el desbordamiento de contenido se trunca con puntos suspensivos. Cuando es false , el contenido puede unirse a varias líneas. Predeterminada: true .
|
truncate_header
|
boolean
|
Cuando es true , las etiquetas del encabezado de la tabla se limitan a una sola línea y el desbordamiento de contenido se trunca con puntos suspensivos. Cuando es false , los encabezados pueden unirse a varias líneas. Predeterminada: true .
|
Ejemplo de uso:
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 propiedad series puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
Propiedad | Valores | Notas |
---|---|---|
cell_visualization
|
boolean
|
Activa o desactiva la visualización de celda intercalada. El valor predeterminado es true para la primera medición y false para las demás.
|
color
|
string
|
Especifica el color que se usa para renderizar la visualización de celdas de la tabla. |
value_format
|
string
|
Una cadena de formato de número que indica si los valores se deben renderizar como monedas, la precisión de punto flotante, si se deben usar comas o puntos para definir miles, etcétera. |
Ejemplo de uso:
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>
Propiedades del gráfico circular
Las siguientes son las propiedades de config
para los gráficos circulares.
Propiedad | Valores | Notas |
---|---|---|
type
|
'pie'
|
|
legend
|
false (para inhabilitar) | configuración de la leyenda
|
Si se establece en false , se inhabilita la leyenda. Configuración predeterminada: Habilitada. Consulta la sección de la leyenda para conocer las opciones de configuración y los ejemplos de uso cuando están habilitados.
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: false,
tooltips: true,
}}
>
<Visualization />
</Query>
legend
La propiedad legend
puede aceptar las siguientes configuraciones de leyendas:
Propiedad | Valores | Notas |
---|---|---|
type
|
'labels' | 'legend'
|
labels coloca las etiquetas que apuntan directamente a cada porción. legend coloca una leyenda independiente. Predeterminada: 'legend' .
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Coloca la leyenda cuando type: 'legend' . Predeterminada: 'right'
|
width
|
número | Ancho máximo de la leyenda en píxeles cuando es type: 'legend' . Predeterminada: 300
|
value
|
'label' | 'label_value' | 'value' | 'percent' | 'label_percent'
|
Establece el contenido de la leyenda: etiqueta, etiqueta y valor, valor, porcentaje, etiqueta y porcentaje. Valor predeterminado: 'label_percent'
|
Ejemplo de uso:
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 diferencia del gráfico cartesiano, cada punto de datos en un gráfico circular se trata como una serie nueva:
Propiedad | Valores | Notas |
---|---|---|
color
|
string | Código hexadecimal |
Ejemplo de uso:
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>