Vlastní vizualizace v řídicích panelech AI/BI

Important

Tato funkce je ve verzi Public Preview.

Vlastní vizualizace umožňují přizpůsobit grafy na řídicích panelech AI/BI nad rámec předdefinovaných typů vizualizací. Vlastní vizualizace používají knihovnu Vega-Lite k vykreslení grafů ze specifikace JSON.

Vytvoření vlastní vizualizace

1. Vyberte datovou sadu.
2. V podokně konfigurace vizualizace vyberte v části vizualizací Pokročilé možnost Vlastní vizualizace.
3. V části Pole přidejte pole, která chcete použít. Každé pole má jedinečný název. Pomocí těchto názvů můžete odkazovat na pole ve specifikaci Vega-Lite.
4. Do editoru specifikacíVega-Lite zadejte specifikaci Vega-Lite JSON.

Příklad: Vrstvený graf se klouzavým průměrem

Tento příklad vytváří vrstvený graf, který zobrazuje nezpracované body teplotních dat s překryvnou čárou klouzavého průměru, a využívá data o počasí z ukázkových datových sad Databricks.

1. Vytvořte datovou sadu s následujícím dotazem:

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

2. V podokně konfigurace vizualizace v části Pokročilé vyberte Vlastní vizualizace.

3. Vyberte datovou sadu, kterou jste vytvořili v předchozím kroku.

4. V části Pole přidejte pole pro sloupec kalendářního data a nastavte jeho název na date.

5. Přidejte pole pro sloupec teploty a nastavte jeho název na temp_maxhodnotu .

6. Zkopírujte následující specifikaci do editoru specifikace Vega-Lite. Pokud je osa X oříznutá, viz Jak automaticky měnit velikost grafu.

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

Sloupce referenčních datových sad

Existují dva způsoby, jak odkazovat na sloupce ve specifikaci Vega-Lite:

• Použijte "field": "{columnName}". Následující příklad přiřadí xField sloupec k ose x:

  "encoding": {
    "x": { "field": "xField", "type": "quantitative" }
  }
  

• Ve výrazech použijte datum["{columnName}"] nebo datum.{columnName}. Následující příklad definuje nový x sloupec ze r sloupců a angle sloupců:

  { "calculate": "datum.r * cos(datum.angle)", "as": "x" }
  

Další informace naleznete v dokumentaci k výrazům Vega, viz datum.

Dědění motivu řídicího panelu

Vlastní vizualizace se automaticky přizpůsobí motivu řídicího panelu, včetně světlého a tmavého režimu. Následující prvky grafu dědí hodnoty motivu bez jakýchkoli změn specifikace:

• Písma osy, legendy, názvu a záhlaví odpovídají nakonfigurovaným písmům řídicího panelu.
• Čáry mřížky os mají v aktivním režimu stejnou barvu jako čáry mřížky na řídicím panelu.
• Pozadí grafu je průhledné nad pozadím motivu widgetu.

Nastavení definovaná v bloku specifikace config mají přednost před zděděnými výchozími nastaveními.

Odkazovat ve výrazech na hodnoty motivu

Chcete-li stylovat značky pomocí hodnot zohledňujících motiv, odkazujte ve výrazu Vega-Lite ({ "expr": "..." }) na následující signály:

Signál	Description
colors	Předem vyřešené barevné tokeny pro aktivní režim. Použijte je pro běžné hodnoty, jako jsou colors.textPrimary.default, colors.gridColor a colors.markHighlightColor. Neindexujte je pomocí [mode]; jsou již vyřešené.
mode	Aktivní barevný režim, buď 'light', nebo 'dark'. Slouží k indexování dashboardTheme polí, která poskytují varianty pro jednotlivé režimy.
dashboardTheme	Úplný motiv nakonfigurovaný vlastníkem řídicího panelu, včetně písem (resolvedFontSettings), kategorické palety (visualizationColors) a barev v jednotlivých režimech (gridLineColor). Pole s variantami pro jednotlivé režimy vyžadují [mode] index.

colors Signály dashboardTheme jsou nezávislé. colors poskytuje přehledné tokeny vyřešené pro aktivní režim, zatímco dashboardTheme zveřejňuje úplný motiv nakonfigurovaný vlastníkem. Nejprve použijte colors a dashboardTheme použijte pro písma, úplnou paletu nebo jakoukoli hodnotu, kterou colors neposkytuje.

Následující příklady ukazují, jak odkazovat na hodnoty motivu:

• Pro značku textu použijte základní písmo řídicího panelu:

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

• Pro aktivní režim použijte barvu názvu řídicího panelu:

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

• Použijte barvu z palety kategorií řídicího panelu:

  { "expr": "dashboardTheme.visualizationColors[0]" }
  

Note

Protože tokeny colors jsou již pro aktivní režim vyhodnoceny, neindexujte je pomocí [mode]. Použít colors.markHighlightColor, ne colors.markHighlightColor[mode]. Pole v rámci dashboardTheme , která poskytují varianty pro jednotlivé režimy, například dashboardTheme.gridLineColor[mode], vyžadují [mode] index.

Filtrování dalších widgetů při výběru

Vlastní vizualizace může fungovat jako zdroj křížového filtru: když uživatel klikne na značku, výběr filtruje ostatní widgety na řídicím panelu. Chcete-li to povolit, přidejte parametr výběru bodu s vyhrazeným názvem databricks_mark_selection. Renderer zjistí tento název a připojí výběr ke stavu křížového filtru řídicího panelu.

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

Platí následující požadavky:

• name Parametr musí být přesně databricks_mark_selection. Jakýkoli jiný název se považuje za běžný parametr a nepodporuje křížové filtrování.
• select.type musí být point. Intervalové výběry (brush) nejsou podporovány jako zdroje pro křížové filtrování.
• select.fields musí vypsat názvy polí definovaných v části Pole konfigurace widgetu, nikoli nezpracované názvy sloupců.
• Uvádět v select.fields pouze pole dimenze (seskupovací). Agregované míry, například SUM(...) nebo AVG(...), nemohou řídit křížový filtr.
• Pokud chcete vybrat více polí, uveďte je společně: "fields": ["categoryName", "regionName"].

Zvýraznění vybraných značek

Chcete-li zvýraznit vybrané značky, použijte podmínky stroke a strokeWidth u značky založené na výplni (například bar, arc nebo rect) a ponechte kódování color navázané na vaše pole. Používejte { "expr": "colors.markHighlightColor" } pro tah, aby zvýraznění zůstalo čitelné jak ve světlých, tak tmavých režimech.

Následující příklad po kliknutí na pruh categoryName filtruje zbývající část řídicího panelu. Vybrané sloupce získají tematický obrys a nevybrané sloupce se ztlumí při zachování barevného kódování.

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

Automatická změna velikosti grafu

Pokud chcete změnit velikost grafu tak, aby odpovídala kontejneru, přidejte následující nastavení na nejvyšší úrovni specifikace:

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

Příklady specifikací grafu

Následující specifikace ukazují grafy, které nejsou k dispozici jako předdefinované typy vizualizací. Další příklady najdete v Vega-Lite ukázkových galeriích.

Odrážkový graf

Definujte categoryField, currentFieldpaceFielda targetField v části Pole.

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

Měřidlo

Definujte $valueField a $totalField v části Pole .

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

Paprskový graf

Definujte $key a $value v části Pole .

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

Radiální graf

Definujte $valueField a $colorField v části Pole .

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

graf sluneční erupce

Definujte outerGroupField, innerGroupFielda sizeField v části Pole .

Specifikace 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

• Grafy typu treemap nejsou podporovány. Vega-Lite nepodporuje stromové mapy.
• Značky obrázků podporují pouze vložené adresy URL obrázků v kódování base64 data: (například data:image/png;base64,...) o velikosti nejvýše 37 kB ve formátu PNG, JPEG nebo WebP. Adresy URL vzdálených obrázků (https: nebo http:), relativní adresy URL, obrázky SVG a adresy URL obrázků založené na polích nebo výrazech nejsou podporovány.