Visualisations personnalisées dans les tableaux de bord AI/BI

info

Aperçu

Cette fonctionnalité est en aperçu public.

Les visualisations personnalisées vous permettent de personnaliser les graphiques dans les tableaux de bord AI/BI au-delà des types de visualisation intégrés. Les visualisations personnalisées utilisent la bibliothèque Vega-Lite pour générer des graphiques à partir d'une spécification JSON.

Créer une visualisation personnalisée

Sélectionnez un dataset.
Dans le volet de configuration de la visualisation, sélectionnez Custom Viz sous la section de visualisation Avancée .
Dans la section **Champs**, ajoutez les champs que vous souhaitez utiliser. Chaque champ a un Nom unique. Référencez les champs dans votre spécification Vega-Lite en utilisant ces noms.
Saisissez votre spécification JSON Vega-Lite dans l’éditeur **Spécification Vega-Lite**.

Exemple : Graphique en couches avec une moyenne mobile

Cet exemple crée un diagramme en couches qui trace des points de données de température bruts avec une superposition de ligne de moyenne mobile, en utilisant les données météorologiques des datasets d'exemple Databricks.

Exemple de graphique de visualisation personnalisé.

Créez un dataset avec la query suivante :

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

Dans le volet de configuration de la visualisation, sous Avancé , sélectionnez Custom Viz .
Sélectionnez le dataset que vous avez créé à l’étape précédente.
Dans la section Champs , ajoutez un champ pour la colonne de date et définissez son Nom sur date.
Ajoutez un champ pour la colonne de température et définissez son Nom sur temp_max.
Copiez la spécification suivante dans l'éditeur de spécification Vega-Lite . Si l'axe des X est coupé, voir Redimensionner automatiquement un graphique.

Spécification JSON

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" } }
    }
  ]
}

Colonnes de dataset de référence

Il existe deux façons de référencer des colonnes dans une spécification Vega-Lite :

Utilisez "field": "{columnName}". L'exemple suivant affecte la colonne xField à l'axe des x :
JSON
```
"encoding": {
  "x": { "field": "xField", "type": "quantitative" }
}
```
Dans les expressions, utilisez datum["{columnName}"] ou datum.{columnName}. L'exemple suivant définit une nouvelle colonne x à partir des colonnes r et angle :
JSON
```
{ "calculate": "datum.r * cos(datum.angle)", "as": "x" }
```

Pour plus d'informations, consultez datum dans la documentation des expressions Vega.

Hériter du thème du tableau de bord

Les visualisations personnalisées s'adaptent automatiquement au thème du tableau de bord, y compris les modes clair et sombre. Les éléments de graphique suivants héritent des valeurs du thème sans aucune modification de vos spécifications :

Les polices des axes, des légendes, des titres et des en-têtes correspondent aux polices configurées du tableau de bord.
Les lignes de grille des axes correspondent à la couleur des lignes de grille du tableau de bord pour le mode actif.
L'arrière-plan du graphique est transparent sur l'arrière-plan thématique du widget.

Les paramètres que vous définissez dans le bloc config de votre spécification l'emportent sur les default héritées.

Référencer les valeurs de thème dans les expressions.

Pour styliser les marques avec des valeurs sensibles au thème, référencez les signaux suivants dans une expression Vega-Lite ({ "expr": "..." }) :

Signal	Description
`colors`	Jetons de couleur prédéfinis pour le mode actif. Utilisez-les pour des valeurs courantes telles que `colors.textPrimary.default`, `colors.gridColor` et `colors.markHighlightColor`. Ne les indexez pas avec `[mode]`; ils sont déjà résolus.
`mode`	Le mode couleur actif, soit `'light'` soit `'dark'`. Utilisez-le pour indexer `dashboardTheme` champs qui fournissent des variantes par mode.
`dashboardTheme`	Le thème complet configuré par le propriétaire du tableau de bord, y compris les polices (`resolvedFontSettings`), la palette catégorielle (`visualizationColors`) et les couleurs par mode (`gridLineColor`). Les champs avec des variantes par mode nécessitent l'index `[mode]`.

Signal	Description
`colors`	Jetons de couleur prédéfinis pour le mode actif. Utilisez-les pour des valeurs courantes telles que `colors.textPrimary.default`, `colors.gridColor` et `colors.markHighlightColor`. Ne les indexez pas avec `[mode]`; ils sont déjà résolus.
`mode`	Le mode couleur actif, soit `'light'` soit `'dark'`. Utilisez-le pour indexer `dashboardTheme` champs qui fournissent des variantes par mode.
`dashboardTheme`	Le thème complet configuré par le propriétaire du tableau de bord, y compris les polices (`resolvedFontSettings`), la palette catégorielle (`visualizationColors`) et les couleurs par mode (`gridLineColor`). Les champs avec des variantes par mode nécessitent l'index `[mode]`.

Les signaux colors et dashboardTheme sont indépendants. colors fournit des jetons de commodité résolus pour le mode actif, tandis que dashboardTheme expose le thème complet configuré par le propriétaire. Utilisez colors d'abord, puis utilisez dashboardTheme pour les polices, la palette complète ou toute valeur que colors ne fournit pas.

Les exemples suivants montrent comment référencer les valeurs de thème :

Utiliser la police de corps du tableau de bord pour un repère de texte :
JSON
```
{ "expr": "dashboardTheme.resolvedFontSettings.fieldValue.fontFamily" }
```

Utilisez la couleur du titre du tableau de bord pour le mode actif :

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

Utilisez une couleur de la palette catégorielle du tableau de bord :
JSON
```
{ "expr": "dashboardTheme.visualizationColors[0]" }
```

remarque

Étant donné que les colors jetons sont déjà résolus pour le mode actif, ne les indexez pas avec [mode]. Utilisez colors.markHighlightColor, pas colors.markHighlightColor[mode]. Les champs sous dashboardTheme qui fournissent des variantes par mode, tels que dashboardTheme.gridLineColor[mode], nécessitent l'index [mode].

Filtrez d'autres widgets selon la sélection

Une visualisation personnalisée peut servir de source de filtrage croisé : lorsqu'un utilisateur clique sur une marque, la sélection filtre les autres widgets du tableau de bord. Pour ce faire, ajoutez un paramètre de sélection de point avec le nom réservé databricks_mark_selection. Le moteur de rendu détecte ce nom et connecte la sélection à l'état de filtrage croisé du tableau de bord.

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

Les exigences suivantes s'appliquent :

Le paramètre name doit être exactement databricks_mark_selection. Tout autre nom est traité comme un paramètre régulier et n'entraîne pas de filtrage croisé.
select.type doit être point. Les sélections d'intervalle (balayage) ne sont pas prises en charge comme sources de filtrage croisé.
select.fields doivent lister les noms de champ définis dans la section Champs de la configuration du widget, et non les noms de colonne bruts.
Répertoriez uniquement les champs de dimension (regroupement) dans select.fields. Les mesures agrégées, telles que SUM(...) ou AVG(...), ne peuvent pas piloter un filtre croisé.
Pour sélectionner plusieurs champs, listez-les ensemble : "fields": ["categoryName", "regionName"].

Mettre en évidence les marques sélectionnées

Pour mettre en surbrillance les marques sélectionnées, utilisez les conditions stroke et strokeWidth sur une marque basée sur le remplissage (telle que bar, arc ou rect) et maintenez l'encodage color lié à votre champ. Utilisez { "expr": "colors.markHighlightColor" } pour le trait afin que la surbrillance reste lisible dans les modes clair et sombre.

L'exemple suivant filtre le reste du tableau de bord par categoryName lorsqu'une barre est cliquée. Les barres sélectionnées reçoivent un contour thématique, et les barres non sélectionnées s'estompent tout en conservant leur encodage de couleur.

Spécification JSON

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
    }
  }
}

Redimensionner un graphique automatiquement

Pour qu'un graphique se redimensionne pour s'adapter à son conteneur, ajoutez les paramètres suivants au niveau supérieur de votre spécification :

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

Exemples de spécifications de graphique

Les spécifications suivantes présentent les graphiques qui ne sont pas disponibles en tant que types de visualisation intégrés. Pour plus d'exemples, consultez les galeries d'exemples Vega-Lite.

Graphique à puces

categoryField``currentFieldDéfinissez,, paceField et targetField dans la section **Champs**.

Spécification JSON

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" }
        ]
      }
    }
  ]
}

Jauge.

Exemple de graphique en jauge.

Définissez $valueField et $totalField dans la section **Champs**.

Spécification JSON

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" }
          ]
        }
      }
    }
  ]
}

Graphique radar

Exemple de graphique en radar.

Définissez $key et $value dans la section **Champs**.

Spécification JSON

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 }
}

Graphique radial

Exemple de graphique radial.

Définissez $valueField et $colorField dans la section **Champs**.

Spécification JSON

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 }
}

Graphique en rayons de soleil

Exemple de graphique en rayons de soleil.

Définissez outerGroupField, innerGroupField et sizeField dans la section Champs .

Spécification JSON

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

Les graphiques Treemap ne sont pas pris en charge. Vega-Lite ne prend pas en charge les treemaps.
Les marques d’image ne prennent en charge que les URL d’image base64 data: intégrées (par exemple, data:image/png;base64,...) de 37 Ko ou moins, au format PNG, JPEG ou WebP. Les URL d'images distantes (https: ou http:), les URL relatives, les images SVG et les URL d'images basées sur des champs ou des expressions ne sont pas prises en charge.

Créer une visualisation personnalisée​

Exemple : Graphique en couches avec une moyenne mobile​

Colonnes de dataset de référence​

Hériter du thème du tableau de bord​

Référencer les valeurs de thème dans les expressions.​

Filtrez d'autres widgets selon la sélection​

Mettre en évidence les marques sélectionnées​

Redimensionner un graphique automatiquement​

Exemples de spécifications de graphique​

Graphique à puces​

Jauge.​

Graphique radar​

Graphique radial​

Graphique en rayons de soleil​

Limitations​

Créer une visualisation personnalisée

Exemple : Graphique en couches avec une moyenne mobile

Colonnes de dataset de référence

Hériter du thème du tableau de bord

Référencer les valeurs de thème dans les expressions.

Filtrez d'autres widgets selon la sélection

Mettre en évidence les marques sélectionnées

Redimensionner un graphique automatiquement

Exemples de spécifications de graphique

Graphique à puces

Jauge.

Graphique radar

Graphique radial

Graphique en rayons de soleil

Limitations