Übersicht
Ein VegaChart ist eine von vielen möglichen Visualisierungen, die mit der Vega Visualization Grammar (Vega-Visualisierungsgramma) erstellt werden können. Hierbei handelt es sich um eine deklarative Sprache zum Erstellen, Speichern und Teilen interaktiver Visualisierungsdesigns. Mit Vega können Sie das visuelle Erscheinungsbild und das interaktive Verhalten einer Visualisierung im JSON-Format beschreiben und mit Canvas oder SVG webbasierte Ansichten generieren.
Wenn Sie ein VegaChart zeichnen, müssen Sie in die Optionen eine Spezifikation einfügen, wie das Diagramm in der Vega-Visualisierungsgrammatik erstellt werden soll. Einige Beispiele solcher Spezifikationen finden Sie unten, und mehrere weitere Beispiele finden Sie auf der Seite VegaChart-Beispiele.
Hinweis: Mit VegaChart für Google-Diagramme kann jedes Vega-Diagramm gezeichnet werden, das Sie mit einer Vega-JSON-Spezifikation angeben können (einschließlich aller Elemente in der Beispielgalerie). Zusätzliche Funktionen, für die Aufrufe der Vega-API erforderlich sind, sind noch nicht verfügbar.
Ein einfaches Beispiel: das Balkendiagramm
Hier ist ein einfaches Beispiel für ein VegaChart, das ein Balkendiagramm zeichnet. Weitere Informationen finden Sie im ursprünglichen Beispiel, in der ausführlichen Anleitung und im Balkendiagramm im Vega-Diagrammeditor.
Dies stellt zwar eine weitere Möglichkeit dar, Balkendiagramme in Google Charts zu erstellen. Wir planen jedoch, alle Funktionen der anderen Balken- und Säulendiagramme in eine neue Implementierung zu integrieren, die auf diesem VegaChart basiert.
Beachten Sie in diesem Beispiel, dass die Option „data“ durch die folgende ersetzt wird, in der die vom Zeichenaufruf bereitgestellte „datatable“ als Quelle für ein anderes Datenobjekt namens „table“ verwendet wird. Im Rest der Vega-Spezifikation wird „table“ verwendet.
'data': [{'name': 'table', 'source': 'datatable'}],
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
['D', 91],
['E', 81],
['F', 53],
['G', 19],
['H', 87],
]);
const options = {
"vega": {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"padding": 5,
'data': [{'name': 'table', 'source': 'datatable'}],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 700px; height: 250px;"></div>
</body>
</html>
Wird geladen
Der Paketname „google.charts.load“ lautet "vegachart".
google.charts.load("current", {packages: ["vegachart"]});
Der Klassenname der Visualisierung lautet google.visualization.VegaChart.
var visualization = new google.visualization.VegaChart(container);
Datenformat
Die Übergabe von Daten an ein VegaChart ist sehr ähnlich wie bei anderen Google Charts mithilfe einer DataTable (oder DataView). Der Hauptunterschied besteht darin, dass VegaChart nicht anhand der Reihenfolge der Spalten bestimmt, wie sie verwendet werden, sondern dass die ID jeder Spalte mit der von Ihnen angegebenen Vega-Visualisierung übereinstimmt.
Die folgende DataTable wird beispielsweise mit Spalten erstellt, die IDs für 'category' und 'amount' enthalten. In der Option „vega“ werden dieselben IDs verwendet, um auf diese Spalten zu verweisen.
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
]);
const options = {
'vega': {
...
// Here we create the Vega data object named 'datatable',
// which will be passed in via the draw() call with a DataTable.
'data': {'name': 'datatable'},
'scales': [
{
'name': 'yscale',
// Here is an example of how to use the 'amount' field from 'datatable'.
'domain': {'data': 'datatable', 'field': 'amount'},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
// A DataTable is required, but it may be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
// Here the data is specified inline in the Vega specification.
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
]
}
],
'scales': [
{
'name': 'yscale',
// Here is how Vega normally uses the 'amount' field from 'table'.
"domain": {"data": "table", "field": "category"},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
Allerdings kann auf diese Weise nur eine solche DataTable an VegaChart übergeben werden. Für einige Vega-Diagramme ist jedoch mehr als eine Datentabelle erforderlich. Wir werden diese Einschränkung in einer zukünftigen Version von Google Charts beheben.
In der Zwischenzeit kannst du zusätzliche Daten, die du verwenden möchtest, in der 'vega' 'data'-Option angeben, indem du sie inline einfügst oder über eine URL lädst.
Beispiele für beides finden Sie unten.
Konfigurationsoptionen
| Name | |
|---|---|
| chartArea |
Ein Objekt mit Mitgliedern zum Konfigurieren der Position und Größe des Diagrammbereichs, in dem das Diagramm selbst gezeichnet wird, ohne Achse und Legenden. Es werden zwei Formate unterstützt: eine Zahl oder eine Zahl gefolgt von %. Eine einfache Zahl ist ein Wert in Pixeln, eine Zahl gefolgt von % ein Prozentsatz. Beispiel: Typ:Objekt
Standard:null
|
| chartArea.bottom |
Legt fest, wie weit das Diagramm vom unteren Rand entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.left |
Legt fest, wie weit das Diagramm von der linken Rahmenlinie entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.right |
Legt fest, wie weit das Diagramm von der rechten Rahmenlinie entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.top |
Legt fest, wie weit das Diagramm vom oberen Rand entfernt ist. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.width |
Diagrammbereichbreite. Typ:Zahl oder String
Standard:automatisch
|
| chartArea.height |
Höhe des Diagrammbereichs. Typ:Zahl oder String
Standard:automatisch
|
| height |
Höhe des Diagramms in Pixeln Typ:Zahl
Standard:Höhe des beinhaltenden Elements
|
| width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard:Breite des beinhaltenden Elements
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis Return Type: Kein
|
getAction(actionID) |
Gibt das Kurzinfo-Aktionsobjekt mit dem angeforderten Rückgabetyp: Objekt
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getChartAreaBoundingBox() |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagramminhalts enthält (ohne Labels und Legende):
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getChartLayoutInterface() |
Gibt ein Objekt mit Informationen zur Platzierung des Diagramms und seiner Elemente auf dem Bildschirm zurück. Die folgenden Methoden können für das zurückgegebene Objekt aufgerufen werden:
Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getHAxisValue(xPosition, optional_axis_index) |
Gibt den horizontalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getImageURI() |
Gibt das Diagramm serialisiert als Bild-URI zurück. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Weitere Informationen finden Sie unter PNG-Diagramme drucken. Rückgabetyp: String
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp:Array von Auswahlelementen
|
getVAxisValue(yPosition, optional_axis_index) |
Gibt den vertikalen Datenwert bei Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getXLocation(dataValue, optional_axis_index) |
Gibt die X-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
getYLocation(dataValue, optional_axis_index) |
Gibt die Y-Koordinate des Pixels von Beispiel: Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Zahl
|
removeAction(actionID) |
Entfernt die Kurzinfo-Aktion mit dem angeforderten Rückgabetyp:
none |
setAction(action) |
Legt eine Kurzinfo-Aktion fest, die ausgeführt werden soll, wenn der Nutzer auf den Aktionstext klickt.
Die Methode
Alle Kurzinfo-Aktionen sollten vor dem Aufrufen der Rückgabetyp:
none |
setSelection() |
Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
Weitere Informationen zur Verwendung dieser Ereignisse finden Sie unter Grundlegende Interaktivität, Ereignisse verarbeiten und Auslösen von Ereignissen.
| Name | |
|---|---|
animationfinish |
Wird ausgelöst, wenn die Übergangsanimation abgeschlossen ist. Properties:keine
|
click |
Wird ausgelöst, wenn der Nutzer auf das Diagramm klickt Damit können Sie feststellen, wann auf Titel, Datenelemente, Legendeneinträge, Achsen, Gitternetzlinien oder Labels geklickt wird. Eigenschaften: targetID
|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. Properties (Eigenschaften): id, message, message
|
legendpagination |
Wird ausgelöst, wenn der Nutzer auf Pfeile zum Seitenumbruch für die Legende klickt. Gibt den nullbasierten Seitenindex der aktuellen Legende und die Gesamtzahl der Seiten zurück. Eigenschaften: currentPageIndex, totalPages
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine visuelle Entität bewegt. Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Eigenschaften: Zeile, Spalte
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger von einer visuellen Entität entfernt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Eigenschaften: Zeile, Spalte
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Properties:keine
|
select |
Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.