Visualizaciones personalizadas en paneles de IA/BI

Important

Esta característica está en versión preliminar pública.

Las visualizaciones personalizadas le permiten personalizar gráficos en paneles de IA/BI más allá de los tipos de visualización integrados. Las visualizaciones personalizadas usan la biblioteca Vega-Lite para representar gráficos a partir de una especificación JSON.

Las visualizaciones personalizadas pueden renderizar tipos de gráficos especializados que van más allá de las opciones integradas. El siguiente árbol filogenético utiliza una disposición dirigida por la fuerza para agrupar registros relacionados alrededor de centros compartidos de grupo y familia:

Ejemplo de gráfico filogenético de árbol

Para construir un gráfico paso a paso, consulta Visualizaciones de ejemplo. Para referenciar las especificaciones de otros tipos de cartas, consulte Más especificaciones de cartas.

Creación de una visualización personalizada

Para crear una visualización personalizada:

Seleccione un conjunto de datos.
En el panel de configuración de visualización, seleccione Custom Viz (Viz personalizado ) en la sección Visualización avanzada .
En la sección Campos , agregue los campos que desea usar. Cada campo tiene un nombre único. Haga referencia a los campos de la especificación de Vega-Lite con estos nombres.
Introduzca su especificación JSON de Vega-Lite en el editor de especificación de Vega-Lite.

Columnas de conjunto de datos de referencia

Columnas de referencia en una Vega-Lite especificación de una de las siguientes maneras:

Utilice "field": "{columnName}". En el ejemplo siguiente se asigna la xField columna al eje x:
```
"encoding": {
  "x": { "field": "xField", "type": "quantitative" }
}
```
En expresiones, use datum["{columnName}"] o datum.{columnName}. En el ejemplo siguiente se define una nueva columna x a partir de las columnas r y angle:
```
{ "calculate": "datum.r * cos(datum.angle)", "as": "x" }
```

Para obtener más información, consulte datum en la documentación de expresiones de Vega.

Heredar el tema del cuadro de mando

Las visualizaciones personalizadas se adaptan automáticamente al tema del panel, incluido el modo claro y oscuro. Los siguientes elementos de gráfico heredan los valores de tema sin cambios en la especificación:

Las fuentes de eje, leyenda, título y encabezado coinciden con las fuentes configuradas del panel.
Las líneas de la cuadrícula del eje coinciden con el color de la cuadrícula del salpicadero para el modo activo.
El fondo del gráfico es transparente respecto al fondo del tema del widget.

La configuración que define en el bloque de la config especificación tiene prioridad sobre los valores predeterminados heredados.

Valores de tema de referencia en expresiones

Para aplicar estilo a las marcas gráficas con valores adaptados al tema, haga referencia a las siguientes señales dentro de una expresión de Vega-Lite ({ "expr": "..." }):

Señal	Descripción
`colors`	Tókenes de color resueltos previamente para el modo activo. Úselos para valores comunes como `colors.textPrimary.default`, `colors.gridColor`y `colors.markHighlightColor`. No indexe estos con `[mode]`; ya están resueltos.
`mode`	Modo de color activo, ya sea `'light'` o `'dark'`. Úselo para indexar `dashboardTheme` campos que proporcionan variantes por modo.
`dashboardTheme`	El tema completo configurado por el propietario del panel, incluidas las fuentes (`resolvedFontSettings`), la paleta de categorías (`visualizationColors`) y los colores por modo (`gridLineColor`). Los campos con variantes por modo requieren el `[mode]` índice.

Las colors señales y dashboardTheme son independientes. La colors señal proporciona tokens de conveniencia resueltos para el modo activo, mientras dashboardTheme expone el tema completo configurado por el propietario. Utilice colors primero y utilice dashboardTheme para las tipografías, la paleta completa o cualquier valor que no proporcione colors.

Los siguientes ejemplos muestran cómo referenciar los valores de los temas:

Use la fuente del cuerpo del panel para una marca de texto:

{ "expr": "dashboardTheme.resolvedFontSettings.fieldValue.fontFamily" }

Use el color del título del panel para el modo activo:

{ "expr": "dashboardTheme.resolvedFontSettings.fieldTitle.fontColor[mode]" }

Use un color de la paleta de categorías del panel:

{ "expr": "dashboardTheme.visualizationColors[0]" }

Nota:

Los colors tokens ya están resueltos para el modo activo. Salta el [mode] índice y usa colors.markHighlightColor, no colors.markHighlightColor[mode]. Los campos bajo dashboardTheme ese tienen variantes por modo, como dashboardTheme.gridLineColor[mode], requieren el [mode] índice.

Filtrar otros widgets en la selección

Una visualización personalizada puede actuar como un origen de filtro cruzado: cuando un usuario hace clic en una marca, la selección filtra los demás widgets del panel. Para habilitar esto, agregue un parámetro de selección de punto con el nombre databricks_mark_selectionreservado . El representador detecta este nombre y conecta la selección al estado de filtro cruzado del panel.

"params": [
  {
    "name": "databricks_mark_selection",
    "select": { "type": "point", "fields": ["categoryName"] }
  }
]

Se aplican los siguientes requisitos:

El parámetro name debe ser exactamente databricks_mark_selection. Cualquier otro nombre se trata como un parámetro normal y no controla el filtrado cruzado.
select.type debe ser point. Las selecciones de intervalo (brush) no se admiten como fuentes para filtros cruzados.
select.fields debe enumerar los nombres de campo definidos en la sección Campos de la configuración del widget, no los nombres de columna sin procesar.
Enumerar solo los campos de dimensión (agrupación) en select.fields. Las medidas agregadas, como SUM(...) o AVG(...), no pueden controlar un filtro cruzado.
Para seleccionar varios campos, enumérelos juntos: "fields": ["categoryName", "regionName"].

Resaltar marcas seleccionadas

Para resaltar las marcas seleccionadas, use las condiciones stroke y strokeWidth en una marca basada en el relleno (como bar, arc o rect) y mantenga la codificación color vinculada a su campo. Use { "expr": "colors.markHighlightColor" } para el trazo para que el resaltado permanezca legible tanto en modos claros como oscuros.

En el ejemplo siguiente, se filtra el resto del cuadro de mando por categoryName al hacer clic en una barra. Las barras seleccionadas se muestran con un contorno acorde con el tema, y las no seleccionadas se atenúan mientras mantienen su codificación por color.

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": { "name": "databricks_query" },
  "width": "container",
  "height": "container",
  "config": { "autosize": { "type": "fit", "contains": "padding" } },
  "params": [
    {
      "name": "databricks_mark_selection",
      "select": { "type": "point", "fields": ["categoryName"] }
    }
  ],
  "mark": { "type": "bar", "stroke": null },
  "encoding": {
    "x": { "field": "categoryName", "type": "nominal" },
    "y": { "field": "salesValue", "type": "quantitative" },
    "color": { "field": "categoryName", "type": "nominal" },
    "fillOpacity": {
      "condition": { "param": "databricks_mark_selection", "value": 1 },
      "value": 0.3
    }
    "stroke": {
      "condition": {
        "param": "databricks_mark_selection",
        "empty": false,
        "value": { "expr": "colors.markHighlightColor" }
      },
      "value": null
    },
    "strokeWidth": {
      "condition": { "param": "databricks_mark_selection", "empty": false, "value": 2 },
      "value": 0
    }
  }
}

Redimensiona automáticamente una tabla

Para que un gráfico cambie el tamaño para ajustarse a su contenedor, agregue la siguiente configuración en el nivel superior de la especificación:

"width": "container",
"height": "container",
"config": {
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

Ejemplos de visualizaciones

Los siguientes ejemplos explican paso a paso cómo construir una visualización personalizada, desde un simple gráfico en capas hasta un árbol filogenético más avanzado.

Gráfico en capas con media móvil

En este ejemplo se crea un gráfico en capas que representa puntos de datos brutos de temperatura con una línea de media móvil superpuesta, utilizando datos meteorológicos de los conjuntos de datos de muestra de Databricks.

Gráfico de temperatura en capas con una línea media rodante roja sobre puntos dispersos

Cree un conjunto de datos con la consulta siguiente:

SELECT date, temperature AS temp_max
FROM samples.accuweather.historical_hourly_imperial
WHERE city_name = 'singapore'
ORDER BY date;

En el panel de configuración de visualización, en Opciones avanzadas, seleccione Custom Viz (Viz personalizado).
Seleccione el conjunto de datos que creó en el paso anterior.
En la sección Campos, agregue un campo para la columna de fecha y establezca su Name en date.
Agregue un campo para la columna temperature y establezca su nombre en temp_max.

Copie la siguiente especificación en el editor de especificación de Vega-Lite. Si el eje x está recortado, véase Redimensionar un gráfico automáticamente.

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "data": { "name": "databricks_query" },
  "transform": [
    {
      "window": [{ "field": "temp_max", "op": "mean", "as": "rolling_mean" }],
      "frame": [-15, 15]
    }
  ],
  "encoding": {
    "x": { "field": "date", "type": "temporal", "title": "Date" },
    "y": {
      "type": "quantitative",
      "scale": { "zero": false },
      "axis": { "title": "Max temperature and rolling mean" }
    }
  },
  "layer": [
    {
      "mark": { "type": "point", "opacity": 0.3 },
      "encoding": { "y": { "field": "temp_max", "title": "Max temperature" } }
    },
    {
      "mark": { "type": "line", "color": "red", "size": 3 },
      "encoding": { "y": { "field": "rolling_mean", "title": "Rolling mean of max temperature" } }
    }
  ]
}

Árbol filogenético

Este ejemplo utiliza un pequeño conjunto de datos de muestra para construir el árbol filogenético mostrado en la parte superior de esta página. Vega-Lite traza puntos en las coordenadas que proporcionas, pero no calcula la posición de los nodos para un diagrama de red en sí. Ese cálculo ocurre en la consulta antes de que los datos lleguen al gráfico, donde la consulta precalcula las coordenadas x e y de cada punto. La consulta emite tres tipos de registros que la especificación renderiza como capas separadas: path las filas dibujan las ramas curvas, node las filas los círculos de hoja y label las filas posicionan las etiquetas de grupo.

Descargue los datos de ejemplo. Cada fila representa un hallazgo fósil, con dig_longitude y dig_latitude que indican las coordenadas de su yacimiento de excavación.

Descarga los datos de muestra
Haga clic en Panel en la barra lateral.
Haga clic en Crear panel.
Haga clic en la pestaña Datos .
Haz clic en Añadir datos y luego en Subir datos.
Coloca el archivo descargado en la tabla de Crear o modificar desde el panel de subida del archivo .
Elige el Catálogo y el Esquema donde quieres almacenar la tabla, y luego introduce el nombre de una tabla.
Haga clic en Crear tabla. La tabla completa se añade automáticamente como un conjunto de datos.
Haz clic en Añadir conjunto de datos SQL y pega la consulta. En la cláusula de la FROM consulta, sustituye los nombres del catálogo, el esquema y la tabla por los que usaste al crear la tabla.
Crea la visualización personalizada, siguiendo los pasos de Crear una visualización personalizada. En la sección de Campos, añade los siguientes campos, usando cada nombre de campo como su Nombre: record_type, x, y, fossil_tag, point_order, suborder, , roar_score, clade_labelgenus_symbolfamily_taxony .label_text Usa la especificación como tu Vega-Lite JSON.

Consulta SQL

WITH base AS (
  SELECT
    fossil_tag,
    genus_symbol,
    clade_label,
    suborder,
    family_taxon,
    dig_longitude,
    dig_latitude,
    roar_score
  FROM
    `my_catalog`.`default`.`dino_table`
),
root_pt AS (
  SELECT
    AVG(dig_longitude) AS rx,
    AVG(dig_latitude) AS ry
  FROM
    base
),
group_pts AS (
  SELECT
    suborder,
    AVG(dig_longitude) AS gx,
    AVG(dig_latitude) AS gy
  FROM
    base
  GROUP BY
    suborder
),
family_pts AS (
  SELECT
    suborder,
    family_taxon,
    AVG(dig_longitude) AS fx,
    AVG(dig_latitude) AS fy
  FROM
    base
  GROUP BY
    suborder,
    family_taxon
),
ctx AS (
  SELECT
    b.fossil_tag,
    b.suborder,
    b.family_taxon,
    b.clade_label,
    b.genus_symbol,
    b.dig_longitude,
    b.dig_latitude,
    b.roar_score,
    r.rx,
    r.ry,
    g.gx,
    g.gy,
    f.fx,
    f.fy
  FROM
    base b
      CROSS JOIN root_pt r
      JOIN group_pts g
        ON b.suborder = g.suborder
      JOIN family_pts f
        ON b.suborder = f.suborder
        AND b.family_taxon = f.family_taxon
),
waypoints AS (
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    0 AS point_order,
    rx AS x,
    ry AS y
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    1,
    rx + 0.30 * (gx - rx),
    ry + 0.30 * (gy - ry)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    2,
    gx + 0.15 * (fx - gx),
    gy + 0.15 * (fy - gy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    3,
    gx + 0.50 * (fx - gx) + 0.03 * (dig_longitude - fx),
    gy + 0.50 * (fy - gy) + 0.03 * (dig_latitude - fy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    4,
    fx + 0.15 * (dig_longitude - fx),
    fy + 0.15 * (dig_latitude - fy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    5,
    fx + 0.65 * (dig_longitude - fx),
    fy + 0.65 * (dig_latitude - fy)
  FROM
    ctx
  UNION ALL
  SELECT
    fossil_tag,
    suborder,
    family_taxon,
    clade_label,
    genus_symbol,
    roar_score,
    6,
    dig_longitude,
    dig_latitude
  FROM
    ctx
)
SELECT
  fossil_tag,
  suborder,
  point_order,
  x,
  y,
  family_taxon,
  clade_label,
  genus_symbol,
  roar_score,
  'path' AS record_type,
  CAST(NULL AS STRING) AS label_text
FROM
  waypoints
UNION ALL
SELECT
  fossil_tag,
  suborder,
  99 AS point_order,
  dig_longitude AS x,
  dig_latitude AS y,
  family_taxon,
  clade_label,
  genus_symbol,
  roar_score,
  'node' AS record_type,
  CAST(NULL AS STRING) AS label_text
FROM
  base
UNION ALL
SELECT
  g.suborder AS fossil_tag,
  g.suborder AS suborder,
  100 AS point_order,
  g.gx
    + (g.gx - r.rx)
      * CASE LOWER(g.suborder)
        WHEN 'titanosauria' THEN 0.10
        WHEN 'hadrosauria' THEN 0.25
        WHEN 'ornithopoda' THEN 1.30
        WHEN 'stegosauria' THEN 0.73
        ELSE 0.55
      END AS x,
  g.gy
    + (g.gy - r.ry)
      * CASE LOWER(g.suborder)
        WHEN 'titanosauria' THEN 0.10
        WHEN 'hadrosauria' THEN 0.25
        WHEN 'ornithopoda' THEN 1.30
        WHEN 'stegosauria' THEN 0.73
        ELSE 0.55
      END AS y,
  CAST(NULL AS STRING) AS family_taxon,
  CAST(NULL AS STRING) AS clade_label,
  CAST(NULL AS STRING) AS genus_symbol,
  CAST(NULL AS DOUBLE) AS roar_score,
  'label' AS record_type,
  g.suborder AS label_text
FROM
  group_pts g CROSS JOIN root_pt r

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "name": "databricks_query" },
  "width": "container",
  "height": "container",
  "background": "white",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" },
    "view": { "stroke": null }
  },
  "layer": [
    {
      "transform": [{ "filter": "datum.record_type === 'path'" }],
      "mark": {
        "type": "line",
        "interpolate": "basis",
        "strokeCap": "round",
        "strokeJoin": "round"
      },
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "detail": { "field": "fossil_tag", "type": "nominal" },
        "order": { "field": "point_order", "type": "quantitative" },
        "color": {
          "field": "suborder",
          "type": "nominal",
          "scale": { "scheme": "tableau10" },
          "legend": null
        },
        "opacity": { "value": 0.3 },
        "strokeWidth": { "value": 0.8 }
      }
    },
    {
      "transform": [{ "filter": "datum.record_type === 'node'" }],
      "mark": {
        "type": "circle",
        "opacity": 0.9,
        "stroke": "white",
        "strokeWidth": 0.3
      },
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "color": {
          "field": "suborder",
          "type": "nominal",
          "scale": { "scheme": "tableau10" },
          "legend": { "title": "Suborder", "orient": "right" }
        },
        "size": {
          "field": "roar_score",
          "type": "quantitative",
          "scale": { "domain": [0, 100], "range": [4, 150] },
          "legend": null
        },
        "tooltip": [
          { "field": "clade_label", "title": "Clade" },
          { "field": "genus_symbol", "title": "Symbol" },
          { "field": "suborder", "title": "Suborder" },
          { "field": "family_taxon", "title": "Family" },
          { "field": "roar_score", "title": "Roar Score", "format": ".1f" }
        ]
      }
    },
    {
      "transform": [{ "filter": "datum.record_type === 'label'" }],
      "mark": {
        "type": "text",
        "fontSize": 12,
        "fontWeight": "bold",
        "opacity": 0.85
      },
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": { "zero": false, "nice": false }
        },
        "text": { "field": "label_text", "type": "nominal" },
        "color": {
          "field": "suborder",
          "type": "nominal",
          "scale": { "scheme": "tableau10" },
          "legend": null
        }
      }
    }
  ]
}

Más especificaciones de cartas

Las especificaciones siguientes muestran gráficos que no están disponibles como tipos de visualización integrados. Para obtener más ejemplos, consulte las galerías de ejemplo deVega-Lite.

Gráfico de bala

Defina categoryField, currentField, paceFieldy targetField en la sección Campos .

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "data": { "name": "databricks_query" },
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "transform": [
    {
      "fold": ["targetField", "paceField", "currentField"],
      "as": ["measure_name", "measure_value"]
    },
    {
      "calculate": "toNumber(datum.measure_value)",
      "as": "measure_value"
    },
    {
      "calculate": "{ \"targetField\": \"Target\", \"paceField\": \"Pace\", \"currentField\": \"Current\" }[datum.measure_name]",
      "as": "measure_label"
    },
    {
      "calculate": "indexof([\"Target\", \"Pace\", \"Current\"], datum.measure_label)",
      "as": "measure_order"
    }
  ],
  "layer": [
    {
      "mark": "bar",
      "params": [
        {
          "name": "legend_click",
          "select": { "type": "point", "fields": ["measure_label"] },
          "bind": "legend"
        }
      ],
      "encoding": {
        "color": { "field": "measure_label" },
        "opacity": { "value": 0 }
      }
    },
    {
      "transform": [{ "filter": { "param": "legend_click" } }],
      "layer": [
        {
          "layer": [
            {
              "mark": { "type": "bar", "tooltip": true },
              "encoding": { "color": { "field": "measure_label", "legend": null } },
              "transform": [{ "filter": { "field": "measure_label", "oneOf": ["Pace"] } }]
            },
            {
              "mark": { "type": "bar", "height": 7, "tooltip": true },
              "encoding": { "color": { "field": "measure_label", "legend": null } },
              "transform": [{ "filter": { "field": "measure_label", "oneOf": ["Current"] } }]
            },
            {
              "mark": { "type": "tick", "tooltip": true, "thickness": 3 },
              "encoding": { "color": { "field": "measure_label", "legend": null } },
              "transform": [{ "filter": { "field": "measure_label", "oneOf": ["Target"] } }]
            }
          ],
          "encoding": {
            "x": {
              "field": "measure_value",
              "type": "quantitative",
              "stack": null,
              "title": "Value",
              "axis": { "orient": "bottom" }
            },
            "color": {
              "scale": {
                "domain": ["Target", "Pace", "Current"],
                "range": ["#000000", "#bcbcbc", "#A66BBF"]
              }
            },
            "order": {
              "field": "measure_order",
              "type": "quantitative",
              "sort": "descending"
            }
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "categoryField",
          "type": "ordinal",
          "title": "Category",
          "axis": { "labelOverlap": true }
        },
        "tooltip": [
          { "field": "categoryField", "type": "nominal", "title": "Category" },
          { "field": "currentField", "type": "quantitative", "title": "Current" },
          { "field": "paceField", "type": "quantitative", "title": "Pace" },
          { "field": "targetField", "type": "quantitative", "title": "Target" }
        ]
      }
    }
  ]
}

Medidor

Ejemplo de gráfico de indicador.

Defina $valueField y $totalField en la sección Campos .

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "width": "container",
  "height": "container",
  "data": { "name": "databricks_query" },
  "config": {
    "concat": { "spacing": 0 },
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "params": [
    { "name": "ring_max", "expr": "min(width, height) / 2 - 16" },
    { "name": "ring_width", "expr": "max(12, (min(width, height) / 2) * 0.12)" },
    { "name": "ring_gap", "expr": "max(4, (min(width, height) / 2) * 0.03)" },
    { "name": "label_color", "value": "#000000" },
    { "name": "ring_background_opacity", "value": 0.3 },
    { "name": "ring0_percent", "value": 100 },
    { "name": "ring0_outer", "expr": "ring_max + 2" },
    { "name": "ring0_inner", "expr": "ring_max + 1" },
    { "name": "ring1_outer", "expr": "ring0_inner - ring_gap" },
    { "name": "ring1_inner", "expr": "ring1_outer - ring_width" },
    { "name": "ring1_middle", "expr": "(ring1_outer + ring1_inner) / 2" },
    { "name": "arc_size", "expr": "220" }
  ],
  "transform": [
    { "as": "ratio", "calculate": "datum['$valueField'] / datum['$totalField']" },
    { "as": "_arc_start_degrees", "calculate": "360 - ( arc_size / 2 )" },
    { "as": "_arc_end_degrees", "calculate": "0 + ( arc_size / 2 )" },
    { "as": "_arc_start_radians", "calculate": "2 * 3.14 * ( datum['_arc_start_degrees'] - 360 ) / 360" },
    { "as": "_arc_end_radians", "calculate": "2 * 3.14 * datum['_arc_end_degrees'] / 360" },
    { "as": "_arc_total_radians", "calculate": "datum['_arc_end_radians'] - datum['_arc_start_radians']" },
    { "as": "_ring_start_radians", "calculate": "datum['_arc_start_radians']" },
    {
      "as": "_ring_end_radians",
      "calculate": "datum['_arc_start_radians'] + ( datum['_arc_total_radians'] * datum['ratio'] )"
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "arc",
        "color": "lightgrey",
        "theta": { "expr": "datum['_arc_start_radians']" },
        "radius": { "expr": "ring1_outer" },
        "theta2": { "expr": "datum['_arc_end_radians']" },
        "radius2": { "expr": "ring1_inner" },
        "cornerRadius": 10
      }
    },
    {
      "name": "RING",
      "mark": {
        "type": "arc",
        "theta": { "expr": "datum['_ring_start_radians']" },
        "radius": { "expr": "ring1_outer" },
        "theta2": { "expr": "datum['_ring_end_radians']" },
        "radius2": { "expr": "ring1_inner" },
        "cornerRadius": 10
      },
      "encoding": {
        "color": {
          "value": "#307E31",
          "condition": [
            { "test": "datum['ratio'] < 0.33", "value": "#880808" },
            { "test": "datum['ratio'] < 0.66", "value": "#E49B0F" }
          ]
        }
      }
    },
    {
      "mark": { "type": "text", "fontSize": 40 },
      "encoding": {
        "text": { "field": "$valueField" },
        "color": {
          "value": "#307E31",
          "condition": [
            { "test": "datum['ratio'] < 0.33", "value": "#880808" },
            { "test": "datum['ratio'] < 0.66", "value": "#E49B0F" }
          ]
        }
      }
    }
  ]
}

Gráfico de radar

Ejemplo de gráfico radial.

Defina $key y $value en la sección Campos .

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "data": { "name": "databricks_query" },
  "transform": [
    { "window": [{ "op": "row_number", "as": "category" }] },
    { "calculate": "datum.category - 1", "as": "category" },
    {
      "joinaggregate": [
        { "op": "count", "as": "numCategories" },
        { "op": "max", "field": "$value", "as": "maxValue" }
      ]
    },
    { "calculate": "2 * PI * datum.category / datum.numCategories", "as": "angle" },
    { "calculate": "100 * datum['$value'] / datum.maxValue", "as": "r" },
    { "calculate": "datum.r * cos(datum.angle)", "as": "x" },
    { "calculate": "datum.r * sin(datum.angle)", "as": "y" },
    { "calculate": "110 * cos(datum.angle)", "as": "label_x" },
    { "calculate": "110 * sin(datum.angle)", "as": "label_y" }
  ],
  "layer": [
    {
      "transform": [
        { "joinaggregate": [{ "op": "count", "as": "numCategories" }] },
        { "aggregate": [{ "op": "max", "field": "numCategories", "as": "numCategories" }] },
        { "calculate": "[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]", "as": "cats" },
        { "flatten": ["cats"], "as": ["cat"] },
        { "filter": "datum.cat <= datum.numCategories" },
        { "calculate": "2 * PI * datum.cat / datum.numCategories", "as": "angle" },
        { "calculate": "100 * cos(datum.angle)", "as": "x" },
        { "calculate": "100 * sin(datum.angle)", "as": "y" }
      ],
      "mark": { "type": "line", "color": "#ddd", "strokeWidth": 1 },
      "encoding": {
        "x": { "field": "x", "type": "quantitative", "scale": { "domain": [-120, 120] }, "axis": null },
        "y": { "field": "y", "type": "quantitative", "scale": { "domain": [-120, 120] }, "axis": null },
        "order": { "field": "cat" }
      }
    },
    {
      "transform": [
        { "joinaggregate": [{ "op": "count", "as": "numCategories" }] },
        { "aggregate": [{ "op": "max", "field": "numCategories", "as": "numCategories" }] },
        { "calculate": "[20,40,60,80,100]", "as": "levels" },
        { "flatten": ["levels"], "as": ["level"] },
        { "calculate": "[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]", "as": "cats" },
        { "flatten": ["cats"], "as": ["cat"] },
        { "filter": "datum.cat <= datum.numCategories" },
        { "calculate": "2 * PI * datum.cat / datum.numCategories", "as": "angle" },
        { "calculate": "datum.level", "as": "r" },
        { "calculate": "datum.r * cos(datum.angle)", "as": "x" },
        { "calculate": "datum.r * sin(datum.angle)", "as": "y" }
      ],
      "mark": { "type": "line", "color": "#ddd", "strokeWidth": 1 },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" },
        "detail": { "field": "level" },
        "order": { "field": "cat" }
      }
    },
    {
      "mark": { "type": "line", "color": "#9467bd", "strokeWidth": 2, "interpolate": "linear-closed" },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" },
        "order": { "field": "category" }
      }
    },
    {
      "mark": { "type": "point", "filled": true, "size": 50, "color": "#9467bd" },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" }
      }
    },
    {
      "mark": { "type": "text", "fontSize": 14, "fontWeight": "bold" },
      "encoding": {
        "x": { "field": "label_x", "type": "quantitative" },
        "y": { "field": "label_y", "type": "quantitative" },
        "text": { "field": "$key", "type": "nominal" }
      }
    }
  ],
  "view": { "stroke": null }
}

Gráfico radial

Ejemplo de gráfico radial.

Defina $valueField y $colorField en la sección Campos .

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "width": "container",
  "height": "container",
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "data": { "name": "databricks_query" },
  "transform": [
    {
      "aggregate": [{ "op": "sum", "field": "$valueField", "as": "total" }],
      "groupby": ["$colorField"]
    },
    {
      "window": [{ "op": "rank", "as": "rank" }],
      "sort": [{ "field": "total", "order": "descending" }]
    }
  ],
  "layer": [
    {
      "mark": { "type": "arc", "innerRadius": 20, "stroke": "#fff" }
    }
  ],
  "encoding": {
    "theta": {
      "field": "total",
      "type": "quantitative",
      "scale": { "type": "sqrt" },
      "stack": true,
      "sort": "descending"
    },
    "radius": { "field": "total", "scale": { "type": "sqrt", "zero": true } },
    "color": {
      "field": "$colorField",
      "type": "nominal",
      "title": "Sub-Category",
      "sort": { "field": "total", "order": "descending" },
      "legend": { "orient": "right" }
    },
    "tooltip": [
      { "field": "$colorField", "type": "nominal", "title": "Sub-Category" },
      { "field": "total", "type": "quantitative", "title": "Sales" }
    ]
  },
  "view": { "stroke": null }
}

Gráfico de proyección solar

Ejemplo de gráfico de proyección solar.

Defina outerGroupField, innerGroupFieldy sizeField en la sección Campos .

Especificación JSON

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": "container",
  "height": "container",
  "data": { "name": "databricks_query" },
  "config": {
    "autosize": { "type": "fit", "contains": "padding" }
  },
  "transform": [
    { "calculate": "datum['outerGroupField']", "as": "OUTSIDE" },
    { "calculate": "datum['innerGroupField']", "as": "INSIDE" },
    { "calculate": "datum.OUTSIDE + '-' + datum.INSIDE", "as": "OUT_IN" },
    { "calculate": "toNumber(datum['sizeField'])", "as": "SIZE" }
  ],
  "resolve": {
    "scale": { "color": "independent" },
    "legend": { "color": "independent" }
  },
  "layer": [
    {
      "mark": {
        "type": "arc",
        "tooltip": true,
        "innerRadius": { "expr": "min(width, height)/9" },
        "outerRadius": { "expr": "min(width, height)/3" }
      },
      "encoding": {
        "theta": { "field": "SIZE", "type": "quantitative", "stack": true },
        "color": {
          "field": "OUT_IN",
          "type": "ordinal",
          "sort": "ascending",
          "title": "Inner Grouping",
          "scale": {
            "range": [
              "#1DF9B9",
              "#1DE5B9",
              "#1DD1B9",
              "#1DBDB9",
              "#1DA9B9",
              "#3DF23B",
              "#3DDA3B",
              "#3DC23B",
              "#3DAA3B",
              "#3D923B"
            ]
          }
        },
        "order": { "field": "OUT_IN", "sort": "ascending" },
        "tooltip": [
          { "field": "OUTSIDE", "type": "nominal", "title": "Outer Grouping" },
          { "field": "INSIDE", "type": "nominal", "title": "Inner Grouping" },
          { "field": "SIZE", "type": "quantitative", "title": "Count" }
        ]
      }
    },
    {
      "transform": [
        {
          "aggregate": [{ "op": "sum", "field": "SIZE", "as": "total_users" }],
          "groupby": ["OUTSIDE"]
        }
      ],
      "mark": {
        "type": "arc",
        "tooltip": true,
        "innerRadius": { "expr": "min(width, height)/3" }
      },
      "encoding": {
        "theta": {
          "field": "total_users",
          "type": "quantitative",
          "stack": true,
          "sort": "ascending",
          "title": "Users Count"
        },
        "color": {
          "field": "OUTSIDE",
          "type": "ordinal",
          "sort": "ascending",
          "title": "Outer Grouping",
          "scale": { "range": ["#1DD1B9", "#3DC23B"] }
        },
        "order": { "field": "OUTSIDE", "sort": "ascending" },
        "tooltip": [
          { "field": "OUTSIDE", "type": "nominal", "title": "Outer Grouping" },
          { "field": "total_users", "type": "quantitative", "title": "Count" }
        ]
      }
    }
  ]
}

Limitations

Los gráficos de mapa de árbol no son compatibles. Vega-Lite no admite treemaps.
Las marcas de imagen solo admiten direcciones URL de imagen en línea base64 data: (por ejemplo, data:image/png;base64,...) de 37 KB o menos, en formato PNG, JPEG o WebP. No se admiten direcciones URL de imagen remota (https: o http:), direcciones URL relativas, imágenes SVG y direcciones URL de imagen controladas por campos o expresiones.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2026-08-13

Visualizaciones personalizadas en paneles de IA/BI

Creación de una visualización personalizada

Columnas de conjunto de datos de referencia

Heredar el tema del cuadro de mando

Valores de tema de referencia en expresiones

Filtrar otros widgets en la selección

Resaltar marcas seleccionadas

Redimensiona automáticamente una tabla

Ejemplos de visualizaciones

Gráfico en capas con media móvil

Árbol filogenético

Más especificaciones de cartas

Gráfico de bala

Medidor

Gráfico de radar

Gráfico radial

Gráfico de proyección solar

Limitations

Comentarios

Recursos adicionales