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.

Własne wizualizacje mogą renderować specjalistyczne typy wykresów, które wykraczają poza wbudowane opcje. Poniższe drzewo filogenetyczne wykorzystuje układ siłowy do grupowania powiązanych rekordów wokół wspólnych centrów grup i rodzin:

Przykład wykresu drzewa filogenetycznego

Aby zbudować wykres krok po kroku, zobacz Przykładowe wizualizacje. Aby odnieść się do specyfikacji innych typów wykresów, zobacz Więcej specyfikacji wykresów.

Tworzenie wizualizacji niestandardowej

Aby stworzyć własną wizualizację:

  1. Wybierz zestaw danych.
  2. W okienku konfiguracji wizualizacji wybierz pozycję Custom Viz w sekcji Wizualizacja zaawansowana .
  3. 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.
  4. Wprowadź swoją specyfikację JSON Vega-Lite w edytorze specyfikacji Vega-Lite.

Kolumny referencyjnego zestawu danych

Odwołuj się do kolumn w specyfikacji Vega-Lite na jeden z następujących sposobów:

  • 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 odpowiadają kolorowi linii siatki pulpitu nawigacyjnego dla aktywnego trybu.
  • 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.gridColori 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. Sygnał colors zapewnia wygodne tokeny rozwiązywane dla aktywnego trybu, natomiast dashboardTheme udostępnia pełny 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.

Poniższe przykłady pokazują, jak odnosić się do wartości tematycznych:

  • 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

Tokeny colors są już rozwiązane dla aktywnego trybu. Pomiń indeks [mode] i użyj colors.markHighlightColor, a nie colors.markHighlightColor[mode]. Pola poniżej dashboardTheme , które mają warianty dla poszczególnych trybów, takie jak dashboardTheme.gridLineColor[mode], wymagają indeksu [mode] .

Domyślna interaktywność

Niestandardowe wizualizacje wspierają filtrowanie krzyżowe, podświetlanie wyboru i przechodzenie do szczegółów bez żadnych zmian w specyfikacji Vega-Lite.

  • Filtrowanie krzyżowe po kliknięciu: Gdy widz kliknie znacznik, wybór filtruje pozostałe widżety na pulpicie, które korzystają z tego samego zbioru danych. Wybór obejmuje każde nieagregowane pole w sekcji Pola w konfiguracji widgetu. Zagregowane miary, takie jak SUM(...) lub AVG(...), są wykluczone z wyboru. Jeśli każde pole jest zagregowane, kliknięcie znaku nie powoduje krzyżowego filtrowania.
  • Wyróżnij zaznaczenie: Gdy użytkownik wybiera znak, niezaznaczone znaki przyciemniają się. Wypełnione znaki, takie jak bar, rect, arc, circle, square, geoshape oraz wypełnione znaki point, również mają kontur w kolorze podświetlenia motywu. Linia, obszar, ślad, reguła, kreska znacznika i niewypełnione znaczniki punktowe są tylko przyciemnione. Jeśli twoja specyfikacja już ustawia fillOpacity, opacity, stroke, lub strokeWidth na znaku lub jego kodowaniu, twoja wartość ma pierwszeństwo.
  • Przejście szczegółowe po kliknięciu prawym przyciskiem myszy: Widz może kliknąć prawym przyciskiem myszy znak i kliknąć Przejdź do, aby otworzyć kolejną stronę filtrowaną według tego znaku. Wybór drill-through używa tych samych pól co wybór filtra krzyżowego. Aby ustawić strony docelowe, zobacz Filtrowanie danych za pomocą przechodzenia do szczegółów.

Panel dodaje domyślny wybór filtrów krzyżowych tylko do specyfikacji z jednym widokiem: nadrzędnym mark i bez layer, concat, hconcat, vconcat, facet lub repeat. Dla innych specyfikacji sam zadeklaruj parametr wyboru. Zobacz Filtruj inne widżety przy wyborze. Gdy deklarujesz parametr, dashboard podświetla wybór w każdym widoku specyfikacji. Drill-through działa także ze specyfikacjami warstwowymi i wielowidokowymi.

Domyślna interaktywność nie dodaje podpowiedzi narzędziowych. Aby wyświetlić podpowiedź, ustaw "tooltip": true dla znacznika lub dodaj kodowanie tooltip.

Wyłącz domyślny filtr krzyżowy

Jeśli twoja specyfikacja definiuje własne interakcje kliknięć, wyłącz domyślny filtr krzyżowy, aby pulpit nawigacyjny wyświetlał specyfikację zgodnie z tym, jak została zapisana:

  1. Otwórz niestandardową wizualizację w panelu konfiguracji wizualizacji.
  2. Wyłącz Turn on default cross-filter.

Gdy to ustawienie jest wyłączone, dashboard nie dodaje parametru wyboru ani kodowań wyróżnienia do Twojej specyfikacji. Następujące zachowanie pozostaje takie samo:

  • Parametr databricks_mark_selection, który deklarujesz, nadal filtruje skrośnie pulpit nawigacyjny.
  • Przechodzenie szczegółowe po kliknięciu prawym przyciskiem myszy nadal działa.

Filtruj inne widżety po wybraniu

Aby kontrolować, które pola wybiera kliknięcie, lub filtrować krzyżowo z warstwowej lub wielowidokowej specyfikacji, zadeklaruj parametr wyboru punktu z nazwą databricks_mark_selectionzarezerwowaną . Moduł renderujący wykrywa tę nazwę i łączy zaznaczenie ze stanem filtrów krzyżowych panelu. Gdy twoja specyfikacja deklaruje ten parametr, dashboard używa go zamiast domyślnego wyboru filtrów krzyżowych. Drill-through wykorzystuje także pola, które zawierają listy parametrów.

"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. Parametr z select.type: "interval" wyświetla ostrzeżenie Filtr krzyżowy interwału nie jest obsługiwany i nie filtruje krzyżowo.
  • 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

Panel domyślnie podświetla wybrane oznaczenia. Zobacz Domyślna interaktywność. Aby dostosować podświetlenie, użyj warunków stroke i strokeWidth na znaczniku opartym na wypełnieniu (np. bar, arc lub rect) i utrzymaj kodowanie color powiązane 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
    }
  }
}

Automatycznie zmieniaj rozmiar 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 wizualizacje

Poniższe przykłady przeprowadzają krok po kroku tworzenie własnej wizualizacji, od prostego warstwowego wykresu po bardziej zaawansowane drzewo filogenetyczne.

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.

Warstwowy wykres temperatur z czerwoną linią średniej kroczącej nad punktami rozproszonymi

  1. 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;

  2. W okienku konfiguracji wizualizacji w obszarze Zaawansowane wybierz pozycję Custom Viz.

  3. Wybierz zestaw danych utworzony w poprzednim kroku.

  4. W sekcji Pola dodaj pole dla kolumny daty i ustaw jego nazwę na date.

  5. Dodaj pole dla kolumny temperatury i ustaw jego nazwę na temp_max.

  6. Skopiuj poniższą specyfikację do edytora specyfikacji Vega-Lite. Jeśli oś x jest przycięta, zobacz Automatycznie zmieniaj rozmiar 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" } }
    }
  ]
}

Drzewo filogenetyczne

Ten przykład wykorzystuje niewielki zestaw przykładowych danych do zbudowania drzewa filogenetycznego pokazanego na górze tej strony. Vega-Lite pokazuje punkty na współrzędnych, które podajesz, ale nie oblicza samodzielnie pozycji węzłów dla diagramu sieciowego. To obliczenie odbywa się w zapytaniu zanim dane dotrą do wykresu, gdzie zapytanie wstępnie oblicza współrzędne x i y każdego punktu. Zapytanie generuje trzy typy rekordów, które specyfikacja renderuje jako oddzielne warstwy: path wiersze rysują zakrzywione gałęzie, node wiersze rysują okręgi liści, a label wiersze pozycjonują etykiety grup.

  1. Pobierz przykładowe dane. Każdy wiersz reprezentuje znalezisko skamieniałości, gdzie dig_longitude i dig_latitude podają współrzędne miejsca wykopalisk.

    Pobierz dane próbne

  2. Kliknij pozycję Ikona pulpitów nawigacyjnychPulpity nawigacyjne na pasku bocznym.

  3. Kliknij pozycję Utwórz pulpit nawigacyjny.

  4. Kliknij kartę Dane.

  5. Kliknij Dodaj dane, a następnie Prześlij dane.

  6. Wrzuć pobrany plik do panelu „Create or modify table from file upload”.

  7. Wybierz katalog i schemat, w których chcesz przechowywać tabelę, a następnie wpisz nazwę tabeli.

  8. Kliknij pozycję Utwórz tabelę. Pełna tabela jest automatycznie dodawana jako zbiór danych.

  9. Kliknij Dodaj zbiór danych SQL i wklej zapytanie. W klauzuli FROM zapytania zastąp nazwy katalogu, schematu i tabeli tymi, których używałeś podczas tworzenia tabeli.

  10. Stwórz własną wizualizację, postępując zgodnie z krokami w Utwórz własną wizualizację. W sekcji Pola dodaj następujące pola, używając nazwy każdego pola jako Nazwa: record_type, x, y, fossil_tag, point_order, suborder, roar_score, clade_label, genus_symbol, family_taxon oraz label_text. Użyj specyfikacji jako Vega-Lite JSON.

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

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

Więcej specyfikacji wykresów

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

Przykład wykresu punktowego.

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.
  • Filtrowanie krzyżowe obsługuje tylko wybór punktów. Zaznaczenia interwałowe (zaznaczenie obszaru) nie powodują filtrowania krzyżowego.
  • Domyślny filtr wzajemny dotyczy tylko specyfikacji z jednym widokiem. Specyfikacje warstwowe i wielowidokowe muszą deklarować databricks_mark_selection parametr do filtrowania krzyżowego.
  • Niestandardowa wizualizacja obsługuje jeden parametr wyboru filtrów krzyżowych. Jeśli specyfikacja deklaruje databricks_mark_selection więcej niż raz, tylko pierwsza filtruje krzyżowo.
  • 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.
  • Ostatnia aktualizacja o