Das Vega Chart-Widget in Visualisierung Ansicht verwendet Vega-Lite-Spezifikationen zum Erstellen verschiedener Diagrammtypen (Balkendiagramme, Punktdiagramme usw.).

Wenn Sie spec leer lassen, wird automatisch ein einfaches Balkendiagramm mit der ersten Zeichenfolgespalte auf der X-Achse und der ersten Zahl auf der Y-Achse generiert.

Vega-Lite ermöglicht eine Datenfilterung und -transformation. Zum Beispiel können Zeichenfolgen in Datumsangaben ('date')transformiert werden.

Weitere Informationen zu Vega-Lite finden Sie unter Vega-Lite - Eine High-Level-Visualisierungsgrammatik.

Das folgende erweiterte Beispiel zeigt die Spezifikation für ein gruppiertes Balkendiagramm auf der Basis einer Populationsdatentabelle. Dieses Beispielzeigt, wie Daten gefiltert werden können und wie eine virtuelle Spalte berechnet wird:

{
  "name": "Population Grouped Bar Chart",
  "type": "Chart",
  "props": {
    "data": "population",
    "spec": {
      "transform": [
        {
          "filter": "datum.year == 2000"
        },
        {
          "calculate": "datum.sex == 2 ? 'Female' : 'Male'",
          "as": "gender"
        }
      ],
      "mark": "bar",
      "encoding": {
        "column": {
          "field": "age",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "sum",
          "field": "people",
          "type": "quantitative",
          "axis": {
            "title": "population",
            "grid": false
          }
        },
        "x": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "rangeStep": 12
          },
          "axis": {
            "title": ""
          }
        },
        "color": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "range": [
              "#EA98D2",
              "#659CCA"
            ]
          }
        }
      },
      "config": {
        "facet": {
          "cell": {
            "strokeWidth": 0
          }
        },
        "axis": {
          "domainWidth": 1
        }
      }
      }
    }
  }