Tablas de propiedades de visualización y consulta

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>