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 Beispiel zeigt, 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
        }
      }
      }
    }
  }