AI/BI panolarındaki özel görselleştirmeler

Important

Bu özellik Genel Önizleme aşamasındadır.

Özel görselleştirmeler, yapay zeka/BI panolarındaki grafikleri yerleşik görselleştirme türlerinin ötesinde özelleştirmenize olanak tanır. Özel görselleştirmeler, JSON belirtiminden grafikleri işlemek için Vega-Lite kitaplığını kullanır.

Özel görselleştirmeler, yerleşik seçeneklerin ötesine geçen özel grafik türlerini oluşturabilir. Aşağıdaki filogenetik ağaç, paylaşılan grup ve aile merkezleri etrafında ilgili kayıtları gruplamak için kuvvet yönlendirilmiş bir düzen kullanır:

Filogenetik ağaç haritası örneği

Adım adım bir grafik oluşturmak için Örnek görselleştirmeler bölümüne bakınız. Diğer harita türleri için spesifikasyonlara referans vermek için bkz. Daha fazla harita spesifikasyonu.

Özel görselleştirme oluşturma

Özel görselleştirme oluşturmak için:

  1. Bir veri kümesi seçin.
  2. Görselleştirme yapılandırması bölmesinde Gelişmiş görselleştirme bölümünün altında Özel Viz'i seçin.
  3. Alanlar bölümünde, kullanmak istediğiniz alanları ekleyin. Her alanın benzersiz bir Adı vardır. Vega-Lite spesifikasyonunuzda alanlara bu adları kullanarak başvurun.
  4. Vega-Lite JSON belirtiminizi Vega-Lite belirtim düzenleyicisine girin.

Başvuru veri kümesi sütunları

Bir Vega-Lite spesifikasyonunda referans sütunları aşağıdaki şekillerden biriyle kullanır:

  • "field": "{columnName}" adresini kullanın. Aşağıdaki örnek, xField sütununu x eksenine atar:

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

  • İfadelerde datum["{columnName}"] veya datum.{columnName} kullanın. Aşağıdaki örnek, x ve r sütunlarından yeni bir angle sütunu oluşturur:

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

Daha fazla bilgi için Vega ifadeleri belgelerine bakın datum .

Pano temasını devral

Özel görselleştirmeler, açık ve koyu mod da dahil olmak üzere panonun temasına otomatik olarak uyarlanabilir. Aşağıdaki grafik öğeleri, belirtiminizde herhangi bir değişiklik yapmadan tema değerlerini devralır:

  • Eksen, gösterge, başlık ve üst bilgi yazı tipleri panonun yapılandırılan yazı tipleriyle eşleşmektedir.
  • Eksen ızgara çizgileri, aktif mod için gösterge panelinin ızgara rengiyle eşleşir.
  • Grafiğin arka planı, pencere öğesinin temalı arka planı üzerinde şeffaftır.

Belirtiminizin config bloğunda tanımladığınız ayarlar devralınan varsayılanlardan önceliklidir.

İfadelerde tema değerlerine başvurun

İşaretleri tema uyumlu değerlerle biçimlendirmek için, bir Vega-Lite ifadesi ({ "expr": "..." }) içinde aşağıdaki sinyallere başvurun:

Sinyal Description
colors Etkin mod için önceden çözümlenmiş renk belirteçleri. Bunları , colors.textPrimary.defaultve colors.gridColorgibi colors.markHighlightColoryaygın değerler için kullanın. Bunları [mode] ile dizine ekleme; bunlar zaten çözülmüş.
mode Etkin renk modu; 'light' veya 'dark'. Mod başına varyantlar sağlayan dashboardTheme alanları dizinlemek için bunu kullanın.
dashboardTheme Gösterge paneli sahibi tarafından yapılandırılan temanın tamamı; buna yazı tipleri (resolvedFontSettings), kategorik palet (visualizationColors) ve her mod için renkler (gridLineColor) dahildir. Moda özgü varyantlar içeren alanlar için [mode] dizini gerekir.

colors ve dashboardTheme sinyalleri bağımsızdır. Sinyal, colors aktif mod için çözümlenmiş pratik tokenlar sağlarken, dashboardTheme tüm sahibi tarafından yapılandırılmış temayı ortaya çıkarır. Önce colors kullanın; yazı tipleri, tam palet veya dashboardTheme'nin sağlamadığı herhangi bir değer için colors kullanın.

Aşağıdaki örnekler, tema değerlerine nasıl referans verileceğini gösterir:

  • Metin işareti için panonun gövde yazı tipini kullanın:

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

  • Etkin mod için panonun başlık rengini kullanın:

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

  • Panonun kategorik paletinden bir renk kullanın:

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

Note

Jetonlar colors aktif mod için zaten çözülmüştür. İndeks atlayın [mode] ve , değil colors.markHighlightColor.colors.markHighlightColor[mode] Altındaki dashboardTheme alanlar, örneğin mod başına varyantları dashboardTheme.gridLineColor[mode]olan alanlar, [mode] örneğin , indeks gerektirir.

Seçimdeki diğer pencere öğelerini filtreleme

Özel görselleştirme çapraz filtre kaynağı işlevi görebilir: Kullanıcı bir işarete tıkladığında, seçim panodaki diğer pencere öğelerini filtreler. Bunu etkinleştirmek için, databricks_mark_selection ayrılmış adına sahip bir nokta seçimi parametresi ekleyin. oluşturucu bu adı algılar ve seçimi panonun çapraz filtre durumuna bağlar.

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

Aşağıdaki gereksinimler geçerlidir:

  • parametresi name tam olarak databricks_mark_selectionolmalıdır. Diğer adlar normal parametre olarak değerlendirilir ve çapraz filtrelemeye neden olmaz.
  • select.type olmalıdır point. Aralık (fırça) seçimleri, çapraz filtreleme kaynağı olarak desteklenmez.
  • select.fields , ham sütun adlarını değil pencere öğesi yapılandırmasının Alanlar bölümünde tanımlanan alan adlarını listelemelidir.
  • select.fields içindeki yalnızca boyut (gruplandırma) alanlarını listeleyin. SUM(...) veya AVG(...) gibi toplanmış ölçüler, çapraz filtrelemeyi yönlendiremez.
  • Birden çok alanı seçmek için bunları birlikte listeleyin: "fields": ["categoryName", "regionName"].

Seçili işaretleri vurgula

Seçili işaretleri vurgulamak için, dolgu tabanlı bir işarette (örneğin stroke, strokeWidth veya bar) arc ve rect koşullarını kullanın ve color kodlamasını alanınıza bağlı tutun. Vurgunun hem açık hem de koyu modlarda okunaklı kalması için konturda { "expr": "colors.markHighlightColor" } kullanın.

Aşağıdaki örnek, bir çubuğa tıklandığında gösterge panelinin geri kalanını categoryName ile filtreler. Seçili çubuklar temaya uygun bir kenarlık alır, seçili olmayan çubuklar ise renk kodlamasını koruyarak soluklaştırılır.

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

Bir grafiki otomatik olarak boyutlandır

Grafiği kapsayıcısına sığacak şekilde yeniden boyutlandırmak için belirtiminizin en üst düzeyine aşağıdaki ayarları ekleyin:

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

Örnek görselleştirmeler

Aşağıdaki örnekler, basit katmanlı bir grafikten daha gelişmiş bir filogenetik ağaca kadar özel bir görselleştirme oluşturmayı adım adım ilerliyor.

Yuvarlanan ortalamalı katmanlı grafik

Bu örnek, Databricks örnek veri kümelerindeki hava durumu verilerini kullanarak sıralı ortalama çizgi katmanıyla ham sıcaklık veri noktalarını çizen katmanlı bir grafik oluşturur.

Dağınık noktalar üzerinde kırmızı yuvarlanan ortalama çizgisi olan katmanlı sıcaklık tablosu

  1. Aşağıdaki sorguyla bir veri kümesi oluşturun:

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

  2. Görselleştirme yapılandırması bölmesindeki Gelişmiş'in altında Özel Viz'i seçin.

  3. Önceki adımda oluşturduğunuz veri kümesini seçin.

  4. Alanlar bölümünde, tarih sütunu için bir alan ekleyin ve Adını olarak dateayarlayın.

  5. Sıcaklık sütunu için bir alan ekleyin ve Adını olarak temp_maxayarlayın.

  6. Aşağıdaki belirtimi Vega-Lite belirtim düzenleyicisine kopyalayın. Eğer x ekseni kırpılmışsa, bkz. Bir grafik otomatik olarak yeniden boyutlandırılır.

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

Filogenetik ağac

Bu örnek, sayfanın üstünde gösterilen filogenetik ağacı oluşturmak için küçük bir örnek veri seti kullanmaktadır. Vega-Lite, verdiğiniz koordinatlarda noktaları çizer, ancak bir ağ diyagramı için düğüm konumlarını hesaplamaz. Bu hesaplama, veri grafike ulaşmadan önce sorguda gerçekleşir; burada sorgu her noktanın x ve y koordinatlarını önceden hesaplar. Sorgu, spesifikasyonun ayrı katmanlar olarak render ettiği üç kayıt türü yayımlar: path sıralar eğri dalları çizer, node satırlar yaprak dairelerini çizer ve label satırlar grup etiketlerini konumlandırır.

  1. Örnek verileri indirin. Her satır, bir fosil bulgusunu temsil eder ve dig_longitudedig_latitude kazı alanının koordinatlarını verir.

    Örnek verileri indirin

  2. Kenar çubuğunda Panolar'a tıklayın Panolar Simgesi.

  3. Pano oluştur'a tıklayın.

  4. Veri sekmesine tıklayın.

  5. Veri ekle, ardından Veri Yükle'ye tıklayın.

  6. İndirilmiş dosyayı dosya yükleme panelinden Oluştur veya değiştir tablosuna bırakın.

  7. Tabloyu kaydetmek istediğiniz Katalog ve Şemayı seçin, ardından bir tablo adı girin.

  8. Tablo oluştur'a tıklayın. Tam tablo otomatik olarak veri seti olarak eklenir.

  9. Add SQL veri seti tuşuna tıklayın ve sorguyu yapıştırın. Sorgu FROM maddesinde, katalog, şema ve tablo isimlerini, tabloyu oluştururken kullandığınız isimlerle değiştirin.

  10. Özel görselleştirmeyi oluştur, Özel görselleştirme yarat bölümündeki adımları takip ederek. Alanlar bölümünde, her alan adını kendi adı olarak kullanarak aşağıdaki alanları ekleyin: record_type, x, , y, fossil_tag, point_order, suborderroar_scoreclade_labelgenus_symbolfamily_taxonve .label_text Spesifikasyonu JSON Vega-Lite olarak kullanın.

SQL sorgusu 
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

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

Daha fazla harita spekülasyonu

Aşağıdaki özellikler, yerleşik görselleştirme türleri arasında bulunmayan grafikleri gösterir. Daha fazla örnek için bkz.Vega-Lite örnek galeriler.

Mermi grafik

Bullet grafiği örneği.

categoryField bölümünde , currentField, paceFieldve targetField tanımlayın.

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

Ölçer

Ölçer grafiği örneği.

$valueField ve $totalField öğelerini Alanlar bölümünde tanımlayın.

JSON belirtimi 
{
  "$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 grafik

Radar grafik örneği.

$key ve $value öğelerini Alanlar bölümünde tanımlayın.

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

Radyal grafik

Radyal grafik örneği.

$valueField ve $colorField öğelerini Alanlar bölümünde tanımlayın.

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

Güneş ışığı grafiği

Güneş patlaması grafiği örneği.

outerGroupField bölümünde , innerGroupFieldve sizeField tanımlayın.

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

Sınırlamalar

  • Ağaç haritası grafikleri desteklenmez. Vega-Lite ağaç haritalarını desteklemez.
  • Görüntü işaretleri yalnızca 37 KB veya daha az satır içi base64 data: resim URL'lerini (örneğin, data:image/png;base64,...) PNG, JPEG veya WebP biçiminde destekler. Uzak görüntü URL'leri (https: veya http:), göreli URL'ler, SVG görüntüleri ve alan veya ifade temelli görüntü URL'leri desteklenmez.
  • Last updated on