Niestandardowe wizualizacje w panelach AI/BI

Important

Ta funkcja jest dostępna w publicznej wersji testowej.

Wizualizacje niestandardowe umożliwiają dostosowywanie wykresów na pulpitach nawigacyjnych sztucznej inteligencji/analizy biznesowej poza wbudowanymi typami wizualizacji. Wizualizacje niestandardowe używają biblioteki Vega-Lite do renderowania wykresów ze specyfikacji JSON.

Tworzenie wizualizacji niestandardowej

Wybierz zestaw danych.
W okienku konfiguracji wizualizacji wybierz pozycję Custom Viz w sekcji Wizualizacja zaawansowana .
W sekcji Pola dodaj pola, których chcesz użyć. Każde pole ma unikatową nazwę. Odwołuj się do pól w swojej specyfikacji Vega-Lite, używając tych nazw.
Wprowadź swoją specyfikację JSON Vega-Lite w edytorze specyfikacji Vega-Lite.

Przykład: wykres warstwowy ze średnią kroczącą

Ten przykład tworzy wykres warstwowy, który przedstawia surowe punkty danych temperatury z nałożoną linią średniej kroczącej, na podstawie danych pogodowych z przykładowych zbiorów danych Databricks.

Przykład niestandardowego wykresu wizualizacji.

Utwórz zestaw danych przy użyciu następującego zapytania:

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

W okienku konfiguracji wizualizacji w obszarze Zaawansowane wybierz pozycję Custom Viz.
Wybierz zestaw danych utworzony w poprzednim kroku.
W sekcji Pola dodaj pole dla kolumny daty i ustaw jego nazwę na date.
Dodaj pole dla kolumny temperatury i ustaw jego nazwę na temp_max.

Skopiuj poniższą specyfikację do edytora specyfikacji Vega-Lite. Jeśli oś x jest obcięta, zobacz Automatyczne zmienianie rozmiaru wykresu.

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

Kolumny referencyjnego zestawu danych

Istnieją dwa sposoby odwołowania się do kolumn w specyfikacji Vega-Lite:

Użyj "field": "{columnName}". Poniższy przykład przypisuje kolumnę xField do osi x:
```
"encoding": {
  "x": { "field": "xField", "type": "quantitative" }
}
```
W wyrażeniach użyj polecenia datum["{columnName}"] lub datum.{columnName}. W poniższym przykładzie zdefiniowano nową kolumnę x z kolumn r i angle:
```
{ "calculate": "datum.r * cos(datum.angle)", "as": "x" }
```

Więcej informacji znajdziesz w dokumentacji wyrażeń Vega: datum

Dziedzicz motyw panelu

Wizualizacje niestandardowe automatycznie dostosowują się do motywu pulpitu nawigacyjnego, w tym do trybu jasnego i ciemnego. Następujące elementy wykresu dziedziczą wartości motywu bez żadnych zmian w specyfikacji:

Czcionki osi, legendy, tytułu i nagłówka są zgodne ze skonfigurowanymi czcionkami pulpitu nawigacyjnego.
Linie siatki osi mają taki sam kolor jak linie siatki panelu w aktywnym trybie.
Tło wykresu jest przezroczyste na tle motywu widżetu.

Ustawienia zdefiniowane w bloku specyfikacji config mają pierwszeństwo przed odziedziczonymi wartościami domyślnymi.

Odwoływanie się do wartości motywu w wyrażeniach

Aby nadać znacznikom styl za pomocą wartości zależnych od motywu, odwołaj się do następujących sygnałów w wyrażeniu Vega-Lite ({ "expr": "..." }):

Sygnał	Opis
`colors`	Wstępnie rozpoznane tokeny kolorów dla trybu aktywnego. Użyj ich dla typowych wartości, takich jak `colors.textPrimary.default`, `colors.gridColor`i `colors.markHighlightColor`. Nie indeksuj ich przy użyciu `[mode]`; są już rozwiązane.
`mode`	Aktywny tryb kolorów, czyli `'light'` lub `'dark'`. Służy do indeksowania pól `dashboardTheme`, które udostępniają warianty dla poszczególnych trybów.
`dashboardTheme`	Pełny motyw skonfigurowany przez właściciela pulpitu nawigacyjnego, w tym czcionki (`resolvedFontSettings`), paletę kategorii (`visualizationColors`) i kolory dla trybu (`gridLineColor`). Pola z wariantami trybów wymagają indeksu `[mode]` .

Sygnały colors i dashboardTheme są niezależne. colors udostępnia wygodne tokeny ustalane dla aktywnego trybu, a dashboardTheme udostępnia cały motyw skonfigurowany przez właściciela. Najpierw użyj colors, a dashboardTheme używaj do czcionek, pełnej palety lub dowolnej wartości, której colors nie zapewnia.

W poniższych przykładach pokazano, jak odwoływać się do wartości motywu:

Użyj czcionki treści pulpitu nawigacyjnego dla znacznika tekstu:

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

Użyj koloru tytułu pulpitu nawigacyjnego dla trybu aktywnego:

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

Użyj koloru z palety kategorii pulpitu nawigacyjnego:
```
{ "expr": "dashboardTheme.visualizationColors[0]" }
```

Note

Ponieważ tokeny colors są już rozwiązane w aktywnym trybie, nie indeksuj ich za pomocą [mode]. Użyj colors.markHighlightColor, a nie colors.markHighlightColor[mode]. Pola w obszarze dashboardTheme , które udostępniają warianty dla poszczególnych trybów, takie jak dashboardTheme.gridLineColor[mode], wymagają indeksu [mode] .

Filtruj inne widżety po wybraniu

Wizualizacja niestandardowa może działać jako źródło filtru krzyżowego: gdy użytkownik kliknie znacznik, wybór filtruje inne widżety na pulpicie nawigacyjnym. Aby to włączyć, dodaj parametr wyboru punktu z nazwą databricks_mark_selectionzarezerwowaną . Moduł renderujący wykrywa tę nazwę i łączy zaznaczenie ze stanem filtrów krzyżowych panelu.

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

Obowiązują następujące wymagania:

Parametr name musi mieć dokładnie databricks_mark_selectionwartość . Każda inna nazwa jest traktowana jako zwykły parametr i nie powoduje filtrowania krzyżowego.
select.type musi mieć wartość point. Opcje interwału (pędzla) nie są obsługiwane jako źródła filtrów krzyżowych.
select.fields musi zawierać listę nazw pól zdefiniowanych w sekcji Pola konfiguracji widżetu, a nie nieprzetworzonych nazw kolumn.
Wyświetl tylko pola wymiaru (grupowania) w select.fields. Zagregowane miary, takie jak SUM(...) lub AVG(...), nie mogą prowadzić filtrowania krzyżowego.
Aby wybrać wiele pól, wyświetl je razem: "fields": ["categoryName", "regionName"].

Wyróżnij zaznaczone znaczniki

Aby wyróżnić wybrane znaczniki, użyj warunków stroke i strokeWidth dla znacznika opartego na wypełnieniu (takiego jak bar, arc lub rect) i pozostaw kanał kodowania color powiązany z Twoim polem. Użyj { "expr": "colors.markHighlightColor" } do obrysu, aby wyróżnienie pozostało czytelne zarówno w trybie jasnym, jak i ciemnym.

Poniższy przykład filtruje resztę panelu według categoryName po kliknięciu słupka. Wybrane słupki otrzymują obramowanie w kolorze motywu, a niezaznaczone słupki są przyciemniane z zachowaniem kodowania kolorami.

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

Automatyczne zmienianie rozmiaru wykresu

Aby zmienić rozmiar wykresu, aby dopasować go do kontenera, dodaj następujące ustawienia na najwyższym poziomie specyfikacji:

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

Przykładowe specyfikacje wykresu

Poniższe specyfikacje przedstawiają wykresy, które nie są dostępne jako wbudowane typy wizualizacji. Aby uzyskać więcej przykładów, zobacz galerie przykładówVega-Lite.

Wykres punktowy

Zdefiniuj categoryField, currentField, paceField i targetField w sekcji Pola.

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

Wskaźnik

Przykład wykresu wskaźnikowego.

Zdefiniuj $valueField i $totalField w sekcji Pola.

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

Wykres radarowy

Przykład wykresu radarowego.

Zdefiniuj $key i $value w sekcji Pola.

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

Wykres promieniowy

Przykład wykresu promieniowego.

Zdefiniuj $valueField i $colorField w sekcji Pola.

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

Wykres sunburst

Przykład wykresu Sunburst.

Zdefiniuj outerGroupField, innerGroupField i sizeField w sekcji Pola.

Specyfikacja 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

Wykresy typu mapa drzewiasta nie są obsługiwane. Vega-Lite nie obsługuje map drzewiastych.
Znaczniki obrazów obsługują tylko adresy URL obrazów zakodowanych w formacie base64 i osadzonych bezpośrednio data: (na przykład data:image/png;base64,...), o rozmiarze nie większym niż 37 KB, w formacie PNG, JPEG lub WebP. Adresy URL obrazów zdalnych (https: lub http:), względne adresy URL, obrazy SVG i adresy URL obrazów opartych na polach lub wyrażeniach nie są obsługiwane.

Opinia

Czy ta strona była pomocna?

Last updated on 2026-07-14

Niestandardowe wizualizacje w panelach AI/BI

Tworzenie wizualizacji niestandardowej

Przykład: wykres warstwowy ze średnią kroczącą

Kolumny referencyjnego zestawu danych

Dziedzicz motyw panelu

Odwoływanie się do wartości motywu w wyrażeniach

Filtruj inne widżety po wybraniu

Wyróżnij zaznaczone znaczniki

Automatyczne zmienianie rozmiaru wykresu

Przykładowe specyfikacje wykresu

Wykres punktowy

Wskaźnik

Wykres radarowy

Wykres promieniowy

Wykres sunburst

Limitations

Opinia

Dodatkowe zasoby