Benutzerdefinierte Visualisierungen in AI/BI-Dashboards

Important

Dieses Feature befindet sich in der Public Preview.

Mit benutzerdefinierten Visualisierungen können Sie Diagramme in AI/BI-Dashboards über die integrierten Visualisierungstypen hinaus anpassen. Benutzerdefinierte Visualisierungen verwenden die Vega-Lite-Bibliothek , um Diagramme aus einer JSON-Spezifikation zu rendern.

Erstellen einer benutzerdefinierten Visualisierung

Wählen Sie ein Dataset aus.
Wählen Sie im Visualisierungskonfigurationsbereich unter dem Abschnitt "Erweiterte Visualisierung" die Option "Custom Viz" aus.
Fügen Sie im Abschnitt "Felder " die Felder hinzu, die Sie verwenden möchten. Jedes Feld weist einen eindeutigen Namen auf. Verweisen Sie mithilfe dieser Namen auf Felder in Ihrer Vega-Lite Spezifikation.
Geben Sie Ihre Vega-Lite JSON-Spezifikation im Vega-Lite Spezifikations-Editor ein.

Beispiel: Überschichtetes Diagramm mit einem rollierenden Mittelwert

In diesem Beispiel wird ein mehrschichtiges Diagramm erstellt, das rohe Temperaturdatenpunkte mit einer überlagerten Linie des gleitenden Mittelwerts darstellt und Wetterdaten aus den Databricks-Beispieldatensätzen verwendet.

Beispiel für ein benutzerdefiniertes Visualisierungsdiagramm.

Erstellen Sie ein Dataset mit der folgenden Abfrage:

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

Wählen Sie im Visualisierungskonfigurationsbereich unter "Erweitert" die Option "Benutzerdefinierte Viz" aus.
Wählen Sie das Dataset aus, das Sie im vorherigen Schritt erstellt haben.
Fügen Sie im Abschnitt "Felder " ein Feld für die Datumsspalte hinzu, und legen Sie dessen Name auf date.
Fügen Sie ein Feld für die Temperaturspalte hinzu, und legen Sie den Namen auf temp_max.

Kopieren Sie die folgende Spezifikation in den Vega-Lite Spezifikations-Editor . Wenn die x-Achse abgeschnitten ist, siehe Ein Diagramm automatisch in der Größe anpassen.

JSON-Spezifikation

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

Referenzdatensatzspalten

Es gibt zwei Möglichkeiten, auf Spalten in einer Vega-Lite Spezifikation zu verweisen:

Verwenden Sie "field": "{columnName}". Im folgenden Beispiel wird die xField Spalte der X-Achse zugewiesen:
```
"encoding": {
  "x": { "field": "xField", "type": "quantitative" }
}
```
In Ausdrücken verwenden datum["{columnName}"] oder datum.{columnName}. Im folgenden Beispiel wird eine neue x-Spalte aus den Spalten r und angle definiert:
```
{ "calculate": "datum.r * cos(datum.angle)", "as": "x" }
```

Weitere Informationen finden Sie in der Dokumentation zu Vega-Ausdrücken unter datum.

Dashboard-Design übernehmen

Benutzerdefinierte Visualisierungen passen sich automatisch an das Design des Dashboards an, einschließlich hellem und dunklem Modus. Die folgenden Diagrammelemente übernehmen Designwerte ohne Änderungen an Ihrer Spezifikation:

Achsen-, Legenden-, Titel- und Kopfzeilenschriftarten entsprechen den konfigurierten Schriftarten des Dashboards.
Achsenrasterlinien entsprechen der Rasterlinienfarbe des Dashboards für den aktiven Modus.
Der Diagrammhintergrund ist über dem Designhintergrund des Widgets transparent.

Einstellungen, die Sie im Spezifikationsblock config definieren, haben Vorrang vor den geerbten Standardwerten.

Auf Designwerte in Ausdrücken verweisen

Um Markierungen mit designabhängigen Werten zu formatieren, verwenden Sie die folgenden Signale in einem Vega-Lite-Ausdruck ({ "expr": "..." }):

Signal	Beschreibung
`colors`	Vorab aufgelöste Farbtoken für den aktiven Modus. Verwenden Sie diese für allgemeine Werte wie `colors.textPrimary.default`, , `colors.gridColor`und `colors.markHighlightColor`. Indizieren Sie diese nicht mit `[mode]`; sie sind bereits aufgelöst.
`mode`	Der aktive Farbmodus, entweder `'light'` oder `'dark'`. Verwenden Sie es, um `dashboardTheme`Felder zu indizieren, die modusabhängige Varianten bereitstellen.
`dashboardTheme`	Das vollständige Design, das vom Dashboardbesitzer konfiguriert wurde, einschließlich Schriftarten (`resolvedFontSettings`), der kategorisierten Palette (`visualizationColors`) und den Farben pro Modus (`gridLineColor`). Felder mit Varianten pro Modus erfordern den `[mode]` Index.

Die Signale colors und dashboardTheme sind unabhängig. colors stellt praktische Tokens bereit, die für den aktiven Modus aufgelöst werden, während dashboardTheme das vollständige, vom Eigentümer konfigurierte Theme offenlegt. Verwenden Sie colors zuerst und dashboardTheme für Schriftarten, die gesamte Palette oder beliebige Werte, die colors nicht bietet.

Die folgenden Beispiele zeigen, wie Sie auf Theme-Werte verweisen:

Verwenden Sie die Schriftart des Dashboards für eine Textmarke:

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

Verwenden Sie die Titelfarbe des Dashboards für den aktiven Modus:

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

Verwenden Sie eine Farbe aus der kategorisierten Palette des Dashboards:
```
{ "expr": "dashboardTheme.visualizationColors[0]" }
```

Hinweis

Da colors Token bereits für den aktiven Modus aufgelöst wurden, indizieren Sie sie nicht mit [mode]. Verwenden Sie colors.markHighlightColor, nicht colors.markHighlightColor[mode]. Felder unter dashboardTheme, die modusspezifische Varianten bereitstellen, wie dashboardTheme.gridLineColor[mode], erfordern den [mode]-Index.

Filtern anderer Widgets nach Auswahl

Eine benutzerdefinierte Visualisierung kann als filterübergreifende Quelle fungieren: Wenn ein Benutzer auf eine Markierung klickt, filtert die Auswahl die anderen Widgets im Dashboard. Um dies zu aktivieren, fügen Sie einen Punktauswahlparameter mit dem reservierten Namen databricks_mark_selectionhinzu. Der Renderer erkennt diesen Namen und verbindet die Auswahl mit dem filterübergreifenden Zustand des Dashboards.

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

Es gelten die folgenden Anforderungen:

Der Parameter name muss genau databricks_mark_selectionsein. Jeder andere Name wird als normaler Parameter behandelt und führt keine Kreuzfilterung durch.
select.type muss den Wert point haben. Intervallauswahlen (Pinsel) werden nicht als Kreuzfilterquellen unterstützt.
select.fields muss die im Abschnitt "Felder" der Widgetkonfiguration definierten Feldnamen und nicht die unformatierten Spaltennamen auflisten.
Führen Sie in select.fields nur Dimensionsfelder (Gruppierung) auf. Aggregierte Maße wie SUM(...) oder AVG(...) können keinen Kreuzfilter auslösen.
Wenn Sie mehrere Felder auswählen möchten, listen Sie sie zusammen auf: "fields": ["categoryName", "regionName"]

Markierte Markierungen hervorheben

Um ausgewählte Markierungen hervorzuheben, verwenden Sie die Bedingungen stroke und strokeWidth für eine auf Füllung basierende Markierung (z. B. bar, arc oder rect), und lassen Sie die color-Kodierung an Ihr Feld gebunden. Verwenden Sie { "expr": "colors.markHighlightColor" } für den Strich, damit die Hervorhebung sowohl im Hell- als auch im Dunkelmodus lesbar bleibt.

Im folgenden Beispiel wird der Rest des Dashboards gefiltert, indem categoryName auf eine Leiste geklickt wird. Ausgewählte Balken erhalten eine themenbezogene Kontur, und nicht ausgewählte Balken werden abgedimmt, wobei ihre Farbcodierung erhalten bleibt.

JSON-Spezifikation

{
  "$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
    }
  }
}

Automatisches Ändern der Größe eines Diagramms

Um die Größe eines Diagramms an den Container anzupassen, fügen Sie die folgenden Einstellungen auf der obersten Ebene Ihrer Spezifikation hinzu:

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

Beispieldiagrammspezifikationen

Die folgenden Spezifikationen zeigen Diagramme an, die nicht als integrierte Visualisierungstypen verfügbar sind. Weitere Beispiele finden Sie in den Vega-Lite Beispielkatalogen.

Bullet-Chart

Definieren Sie categoryField, currentField, paceField und targetField im Abschnitt Felder.

JSON-Spezifikation

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

Messgerät

Beispiel für ein Tachodiagramm.

Definieren $valueField und $totalField im Abschnitt "Felder ".

JSON-Spezifikation

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

Radar Diagramm

Beispiel für ein Radardiagramm.

Definieren $key und $value im Abschnitt "Felder ".

JSON-Spezifikation

{
  "$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 }
}

Radialdiagramm

Radialdiagramm (Beispiel).

Definieren $valueField und $colorField im Abschnitt "Felder ".

JSON-Spezifikation

{
  "$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 }
}

Sunburst-Diagramm

Beispiel für ein Sunburst-Diagramm.

Definieren Sie outerGroupField, innerGroupField und sizeField im Felder-Abschnitt.

JSON-Spezifikation

{
  "$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

Treemap-Diagramme werden nicht unterstützt. Vega-Lite unterstützt keine Treemaps.
Bildmarken unterstützen nur Inline-Base64-data:-Bild-URLs (zum Beispiel data:image/png;base64,...) mit 37 KB oder weniger im PNG-, JPEG- oder WebP-Format. Remotebild-URLs (https: oder http:), relative URLs, SVG-Bilder und Feld- oder ausdrucksgesteuerte Bild-URLs werden nicht unterstützt.

Feedback

War diese Seite hilfreich?

Last updated on 2026-07-14

Benutzerdefinierte Visualisierungen in AI/BI-Dashboards

Erstellen einer benutzerdefinierten Visualisierung

Beispiel: Überschichtetes Diagramm mit einem rollierenden Mittelwert

Referenzdatensatzspalten

Dashboard-Design übernehmen

Auf Designwerte in Ausdrücken verweisen

Filtern anderer Widgets nach Auswahl

Markierte Markierungen hervorheben

Automatisches Ändern der Größe eines Diagramms

Beispieldiagrammspezifikationen

Bullet-Chart

Messgerät

Radar Diagramm

Radialdiagramm

Sunburst-Diagramm

Limitations

Feedback

Zusätzliche Ressourcen