Übersicht
Ein Sankey-Diagramm ist eine Visualisierung, mit der ein Fluss von einer Gruppe von Werten zu einer anderen dargestellt wird. Die zu verbindenden Objekte werden Knoten und die Verbindungen Links genannt. Sankeys eignen sich am besten, wenn Sie eine n:n-Zuordnung zwischen zwei Domains (z. B. Universitäten und Hauptfächer) oder mehreren Pfaden durch eine Reihe von Phasen darstellen möchten (z. B. verwendet Google Analytics Sansktionen, um zu zeigen, wie Traffic von Seiten zu anderen Seiten Ihrer Website fließt).
Die Neugierigen wurden nach Captain Sankey benannt, der ein Diagramm zur Dampfeffizienz erstellt hat, das Pfeile mit einer Breite verwendet, die proportional zum Wärmeverlust ist.
Hinweis:Das Sankey-Diagramm wird in zukünftigen Google Charts-Releases möglicherweise erheblich überarbeitet.
Sankey-Diagramme werden im Browser mithilfe von SVG oder VML gerendert, je nachdem, was für den Browser des Nutzers geeignet ist. Der Sankey-Layoutcode von Google wird vom D3-Sankey-Layoutcode abgeleitet.
Hinweis:SanSAN-Diagramme von Google sind in Microsoft Internet Explorer 8 und früheren Versionen nicht verfügbar.
Einfaches Beispiel
Angenommen, Sie haben die beiden Kategorien A und B, die mit drei anderen Kategorien verbunden sind: X, Y und Z. Einige dieser Verbindungen sind schwerer als andere. Beispielsweise hat B eine dünne Verbindung zu X und eine viel dickere Verbindung zu Y.
Bewegen Sie den Mauszeiger über einen der Links, um die Verbindung hervorzuheben.
Geben Sie zum Erstellen eines Sankey-Diagramms eine Reihe von Zeilen an, die jeweils Informationen zu einer Verbindung enthalten: von, nach und Gewichtung. Initialisieren Sie dann mit der Methode google.visualization.Sankey() das Diagramm und dann mit der Methode draw():
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
Hinweis: Vermeiden Sie Zyklen in Ihren Daten. Wenn A mit sich selbst oder B mit einem C verknüpft ist, der wiederum mit A verbunden ist, wird das Diagramm nicht gerendert.
Mehrstufige Sankeys
Sie können ein Sankey-Diagramm mit mehreren Verbindungsebenen erstellen:
Bei Sankey-Diagrammen werden bei Bedarf zusätzliche Ebenen hinzugefügt und automatisch angeordnet. Hier ist der vollständige Code für das Diagramm oben:
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["sankey"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ],
[ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ],
[ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ],
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ],
[ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ]
]);
// Set chart options
var options = {
width: 600,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
Farben steuern
Sankey-Diagramme können benutzerdefinierte Farben für Knoten und Links festlegen. Sowohl Knoten als auch Links können mithilfe ihrer colors-Optionen (sankey.node.colors bzw. sankey.link.colors) benutzerdefinierte Farbvorlagen erhalten. Sie können ihnen mit der Option colorMode auch verschiedene Farboptionen zuweisen.
Wenn die Farben nicht angepasst werden, wird standardmäßig die Standardpalette „Material“ verwendet.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Mit den Konfigurationsoptionen können Sie die Farben der Links, Knoten und Labels steuern. Hier wählen wir drei mit demselben Farbton, aber unterschiedlichen Helligkeiten aus:
So sehen diese Optionen aus:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Sie können die Transparenz der Links auch mit der Option sankey.link.color.fillOpacity festlegen:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Wenn Sie einen Rahmen um die Links erstellen möchten, verwenden Sie die Optionen sankey.link.color.stroke und sankey.link.color.strokeWidth:
Die Strichfarbe kann entweder im RGB-Format oder nach englischem Namen angegeben werden.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Labels anpassen
Der Text zu Sankey-Diagrammen kann mit sankey.node.label.fontName und Freunden angepasst werden:
Hier sehen Sie die Option-Stanza für das obige Diagramm:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Mit der Option sankey.node.labelPadding können Sie die Position der Labels relativ zu den Knoten anpassen:
Im Diagramm oben haben wir einen Abstand von 30 Pixeln zwischen den Labels und den Knoten hinzugefügt.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Knoten anpassen
Sie können die Breite der Knoten mit sankey.node.width steuern:
Oben haben wir die Knotenbreite auf 2 festgelegt.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Sie können den Abstand zwischen den Knoten mit sankey.node.nodePadding anpassen:
Im Diagramm oben haben wir sankey.node.nodePadding auf 80 festgelegt.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Wird geladen
Der google.charts.load-Paketname ist "sankey":
google.charts.load("current" {packages: ["sankey"]});
Der Klassenname der Visualisierung lautet google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Datenformat
Zeilen: Jede Zeile in der Tabelle steht für eine Verbindung zwischen zwei Labels. Die dritte Spalte gibt die Stärke dieser Verbindung an und wird in der Breite des Pfads zwischen den Labels widergespiegelt.
Columns:
| Spalte 0 | Spalte 1 | Spalte 2 | … | Spalte N (optional) | |
|---|---|---|---|---|---|
| Zweck: | Quelle | Ziel | Wert | … | Optionale Rollen |
| Datentyp: | String | String | Zahl | … | |
| Rolle: | Domain | Domain | daten | … | |
| Optionale Spaltenrollen: | – |
– |
– |
… |
Konfigurationsoptionen
| Name | |
|---|---|
| ForceIFrame |
Zeichnen Sie das Diagramm innerhalb eines Inline-Frames. In IE8 wird diese Option ignoriert. Alle IE8-Diagramme werden in iFrames gezeichnet. Typ: Boolesch
Standardeinstellung: false
|
| height |
Höhe des Diagramms in Pixeln Typ: Zahl
Standard:Höhe des Elements, das das Element enthält
|
| Sankey-Versionen |
Bei mehrstufigen Sankeys ist es manchmal nicht offensichtlich, wo Knoten platziert werden sollten, um eine optimale Lesbarkeit zu ermöglichen. Das D3-Layout-Engine testet verschiedene Knotenlayouts und stoppt nach Typ: Ganzzahl
Standard: 32
|
| Sankey.Link |
Steuert Attribute der Verbindungen zwischen Knoten. Derzeit beziehen sich alle Attribute auf die Farbe:
sankey: {
link: {
color: {
fill: '#efd', // Color of the link.
fillOpacity: 0.8, // Transparency of the link.
stroke: 'black', // Color of the link border.
strokeWidth: 1 // Thickness of the link border (default 0).
},
colors: [
'#a6cee3', // Custom color palette for sankey links.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving the links for that node the color.
'#33a02c'
]
}
}
Objekt Type:
Standard: null
|
| Sankey.Link.FarbeModus |
Legt einen Farbmodus für die Verbindungen zwischen Knoten fest. Mögliche Werte:
Diese Option überschreibt „sankey.link.color“. Typ: String
Standard: „none“
|
| Sankey.Knoten |
Steuert die Attribute der Knoten (der vertikale Balken zwischen Links):
sankey: {
node: {
label: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#000',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 6, // Horizontal distance between the label and the node.
nodePadding: 10, // Vertical distance between nodes.
width: 5, // Thickness of the node.
colors: [
'#a6cee3', // Custom color palette for sankey nodes.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving each node its own color.
'#33a02c'
]
}
}
Objekt Type:
Standard: null
|
| Sankey.Knoten.FarbeModus |
Legt einen Farbmodus für die Sankey-Knoten fest. Mögliche Werte:
Typ: String
Standard: „eindeutig“
|
| Kurzinfo |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zur Angabe der Attribute dieses Objekts können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {textStyle: {color: '#FF0000'}, showColorCode: true}
Objekt Type:
Standard: null
|
| tooltip.isHTML |
Wenn die Richtlinie auf „true“ gesetzt ist, verwenden Sie Kurzinfos mit HTML-Rendering (statt mit SVG gerendert). Weitere Informationen finden Sie unter Kurzinfo anpassen. Hinweis:Die Anpassung der HTML-Kurzinfoinhalte mithilfe der Datenspalte der Kurzinfo wird von der Visualisierung des Blasendiagramms nicht unterstützt. Typ: Boolesch
Standardeinstellung: false
|
| tooltip.textStyle |
Ein Objekt, das den Text der Kurzinfo angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Objekt Type:
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| width |
Breite des Diagramms in Pixeln. Typ: Zahl
Standard: Breite des zugehörigen Elements
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Das Diagramm akzeptiert weitere Methodenaufrufe erst, nachdem das Ereignis Rückgabetyp: keine
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das links, oben, Breite und Höhe des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach der Erstellung des Diagramms auf. Objekt Return Type:
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp:Array von Auswahlelementen
|
setSelection() |
Wählt die angegebenen Diagrammelemente aus. Damit wird die vorherige Auswahl abgebrochen.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp: keine
|
clearChart() |
Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei. Rückgabetyp: keine
|
Ereignisse
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt Eigenschaften: ID, Nachricht
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf ein visuelles Element bewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken bezieht sich auf eine Zelle in der Datentabelle, einen Spalteneintrag auf eine Legende (Zeilenindex ist null) und eine Kategorie auf eine Zeile (Spaltenindex ist null). Eigenschaften:Zeile, Spalte
|
onmouseout |
Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt die Zeilen- und Spaltenindexe des entsprechenden Datentabellenelements zurück. Ein Balken bezieht sich auf eine Zelle in der Datentabelle, einen Spalteneintrag auf eine Legende (Zeilenindex ist null) und eine Kategorie auf eine Zeile (Spaltenindex ist null). Eigenschaften:Zeile, Spalte
|
ready |
Das Diagramm ist für externe Methodenaufrufe bereit. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Eigenschaften: keine
|
select |
Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt Rufen Sie Eigenschaften: keine
|
Datenrichtlinien
Der gesamte Code sowie alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.