Remarque
L’accès à cette page requiert une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page requiert une autorisation. Vous pouvez essayer de modifier des répertoires.
Important
Cette fonctionnalité est disponible en préversion publique.
Les visualisations personnalisées vous permettent de personnaliser des graphiques dans des tableaux de bord IA/BI au-delà des types de visualisation intégrés. Les visualisations personnalisées utilisent la bibliothèque Vega-Lite pour afficher des graphiques à partir d’une spécification JSON.
Créer une visualisation personnalisée
- Sélectionnez un jeu de données.
- Dans le volet de configuration de la visualisation, sélectionnez Custom Viz sous la section 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 à couches avec une moyenne mobile
Cet exemple crée un graphique multicouche qui représente des points de données bruts de température avec une ligne de moyenne mobile en superposition, à l’aide de données météorologiques provenant des jeux de données d’exemple Databricks.
Créez un jeu de données avec la requête suivante :
SELECT date, temperature AS temp_max FROM samples.accuweather.historical_hourly_imperial WHERE city_name = 'singapore' ORDER BY dateDans le volet de configuration de visualisation, sous Avancé, sélectionnez Custom Viz.
Sélectionnez le jeu de données que vous avez créé à l’étape précédente.
Dans la section Champs, ajoutez un champ pour la colonne Date et définissez son Name sur
date.Ajoutez un champ pour la colonne de température et définissez son Name sur
temp_max.Copiez la spécification suivante dans l’éditeur de spécifications Vega-Lite. Si l’axe X est tronqué, consultez Redimensionner automatiquement un graphique.
Spécification 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 jeu de données 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 laxFieldcolonne à l’axe x :"encoding": { "x": { "field": "xField", "type": "quantitative" } }Dans les expressions, utilisez
datum["{columnName}"]oudatum.{columnName}. L’exemple suivant définit une nouvelle colonnexà partir des colonnesretangle:{ "calculate": "datum.r * cos(datum.angle)", "as": "x" }
Pour plus d’informations, consultez datum dans la documentation sur les expressions Vega.
Utiliser le thème du tableau de bord
Les visualisations personnalisées s’adaptent automatiquement au thème du tableau de bord, notamment en mode clair et sombre. Les éléments de graphique suivants héritent des valeurs de thème sans aucune modification de votre spécification :
- Les polices d’axe, de légende, de titre et d’en-tête correspondent aux polices configurées du tableau de bord.
- Les lignes de grille d’axe correspondent à la couleur de ligne de grille du tableau de bord pour le mode actif.
- L’arrière-plan du graphique est transparent par-dessus l’arrière-plan thématique du widget.
Les paramètres que vous définissez dans le bloc de config votre spécification sont prioritaires sur les valeurs par défaut héritées.
Référencer les valeurs de thème dans les expressions
Pour appliquer un style aux marques à l’aide de valeurs adaptées au thème, faites référence aux signaux suivants dans une expression Vega-Lite ({ "expr": "..." }) :
| Signal | Description |
|---|---|
colors |
Jetons de couleur pré-résolus du mode actif. Utilisez-les pour les valeurs courantes telles que colors.textPrimary.default, colors.gridColoret colors.markHighlightColor. N’indexez pas ceci avec [mode] ; ils sont déjà résolus. |
mode |
Mode de couleur actif, soit 'light''dark'. Utilisez-le pour indexer les champs dashboardTheme qui proposent des variantes par mode. |
dashboardTheme |
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 pratiques résolus pour le mode actif, tandis que dashboardTheme expose l’ensemble du thème configuré par le propriétaire du thème. Utilisez d’abord colors, 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 des valeurs de thème :
Utilisez la police du corps du tableau de bord pour une marque de texte :
{ "expr": "dashboardTheme.resolvedFontSettings.fieldValue.fontFamily" }Utilisez la couleur de titre du tableau de bord pour le mode actif :
{ "expr": "dashboardTheme.resolvedFontSettings.fieldTitle.fontColor[mode]" }Utilisez une couleur à partir de la palette catégorielle du tableau de bord :
{ "expr": "dashboardTheme.visualizationColors[0]" }
Remarque
Puisque les jetons colors sont déjà résolus pour le mode actif, ne les indexez pas avec [mode]. Par exemple, utilisez colors.markHighlightColor, pas colors.markHighlightColor[mode]. Les champs sous dashboardTheme lesquels fournissent des variantes par mode, tels que dashboardTheme.gridLineColor[mode], nécessitent l’index [mode] .
Filtrer les autres widgets en fonction de la sélection
Une visualisation personnalisée peut agir comme une source de filtre croisé : lorsqu’un utilisateur clique sur une marque, la sélection filtre les autres widgets du tableau de bord. Pour l’activer, ajoutez un paramètre de sélection de point avec le nom databricks_mark_selectionréservé. Le renderer détecte ce nom et connecte la sélection à l’état de filtrage croisé du tableau de bord.
"params": [
{
"name": "databricks_mark_selection",
"select": { "type": "point", "fields": ["categoryName"] }
}
]
Les conditions suivantes s'appliquent :
- Le paramètre
namedoit être exactementdatabricks_mark_selection. Tout autre nom est traité comme un paramètre normal et ne pilote pas le filtrage croisé. -
select.typedoit êtrepoint. Les sélections par intervalle (au pinceau) ne sont pas prises en charge comme sources de filtres croisés. -
select.fieldsdoit répertorier les noms de champs définis dans la section Champs de la configuration du widget, et non les noms de colonnes brutes. - Lister uniquement les champs de dimension (regroupement) dans
select.fields. Les mesures agrégées, telles queSUM(...)ouAVG(...), ne peuvent pas conduire un filtre croisé. - Pour sélectionner plusieurs champs, indiquez-les ensemble :
"fields": ["categoryName", "regionName"].
Mettre en surbrillance les marques sélectionnées
Pour mettre en surbrillance les marques sélectionnées, utilisez les conditions stroke et strokeWidth sur une marque utilisant le remplissage (telle que bar, arc ou rect) et conservez l’encodage color associé à 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’on clique sur une barre. Les barres sélectionnées reçoivent un contour assorti au thème, tandis que les barres non sélectionnées s’atténuent tout en conservant leur codage couleur.
Spécification 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 automatiquement un graphique
Pour que le redimensionnement d’un graphique corresponde à son conteneur, ajoutez les paramètres suivants au niveau supérieur de votre spécification :
"width": "container",
"height": "container",
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
}
}
Exemples de spécifications de graphique
Les spécifications suivantes montrent 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
Définissez categoryField, currentField, paceFieldet targetField dans la section Champs .
Spécification 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
Définissez $valueField et $totalField dans la section Champs .
Spécification 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
Définissez $key et $value dans la section Champs .
Spécification 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
Définissez $valueField et $colorField dans la section Champs .
Spécification 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
Définissez outerGroupField, innerGroupFieldet sizeField dans la section Champs .
Spécification 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 prennent uniquement en charge les URL d’image en base64
data:inline (par exempledata:image/png;base64,...) de 37 Ko ou moins, au format PNG, JPEG ou WebP. Les URL d’image distantes (https:ouhttp:), les URL relatives, les images SVG et les URL d’image pilotées par des champs ou des expressions ne sont pas prises en charge.