Übersicht
Ein Sankey-Diagramm ist eine Visualisierung, mit der der Fluss von einer Gruppe von Werten zu einer anderen dargestellt wird. Die zu verbindenden Objekte werden als Knoten und die Verbindungen als Links bezeichnet. Sankeys sind am besten geeignet, wenn Sie eine m:n-Zuordnung zwischen zwei Domains (z. B. Universitäten und Hauptfachleute) oder mehrere Pfade durch eine Reihe von Phasen anzeigen möchten. In Google Analytics werden beispielsweise Sankeys verwendet, um den Traffic von Seiten zu anderen Seiten Ihrer Website darzustellen.
Für Neugierige sind sie nach Captain Sankey benannt, der ein Diagramm zur Effizienz von Dampfmotoren erstellte, in dem Pfeile verwendet wurden, die proportional zum Wärmeverlust sind.
Hinweis: Das Sankey-Diagramm wird in zukünftigen Google Charts-Versionen möglicherweise grundlegend überarbeitet.
Sankey-Diagramme werden im Browser mit SVG oder VML gerendert, je nachdem, was für den Browser des Nutzers geeignet ist. Der Sankey-Layoutcode von Google wird vom Sankey-Layoutcode von D3 abgeleitet.
Hinweis: Sankey-Diagramme von Google sind in Microsoft Internet Explorer 8 und früheren Versionen nicht verfügbar.
Ein einfaches Beispiel
Angenommen, Sie haben zwei Kategorien, A und B, die mit drei weiteren Kategorien verbunden sind: X, Y und Z. Einige dieser Verbindungen sind schwerer als andere. B hat beispielsweise eine dünne Verbindung zu X und eine viel dickere Verbindung zu Y.
Bewegen Sie den Mauszeiger auf einen der Links, um die Verbindung hervorzuheben.
Um ein Sankey-Diagramm zu erstellen, geben Sie eine Reihe von Zeilen an, von denen jede Informationen zu einer Verbindung enthält: von, nach und Gewichtung. Verwenden Sie dann die Methode google.visualization.Sankey(), um das Diagramm zu initialisieren, und dann die Methode draw(), um es zu rendern:
<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 verknüpft ist oder wenn A mit B verknüpft ist, das wiederum auf C verweist, das wiederum mit A verknüpft ist, wird das Diagramm nicht gerendert.
Sankeys auf mehreren Ebenen
Sie können ein Sankey-Diagramm mit mehreren Verbindungsebenen erstellen:
In Sankey-Diagrammen werden nach Bedarf weitere Ebenen hinzugefügt und automatisch angeordnet. Hier ist der vollständige Code für das obige Diagramm:
<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
In Sankey-Diagrammen können benutzerdefinierte Farben für Knoten und Verbindungen festgelegt werden. Sowohl Knoten als auch Links können mit den colors-Optionen (sankey.node.colors bzw. sankey.link.colors) benutzerdefinierte Farbvorlagen erhalten. Sie können mit der Option colorMode auch verschiedene Farbmodi erhalten.
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:
Diese Optionen sehen so aus:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Die Transparenz der Links lässt sich 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' } },
}
};
Verwende die Optionen sankey.link.color.stroke und sankey.link.color.strokeWidth, um einen Rahmen um die Links zu erstellen:
Die Strichfarbe kann entweder im RGB-Format oder mit einem englischen Namen angegeben werden.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Labels anpassen
Der Text in Sankey-Diagrammen kann mit sankey.node.label.fontName und Freunden angepasst werden:
Hier ist die Options-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 obigen Diagramm 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
Mit sankey.node.width können Sie die Breite der Knoten steuern:
Oben haben wir die Knotenbreite auf 2 festgelegt.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Mit sankey.node.nodePadding können Sie den Abstand zwischen den Knoten anpassen:
Im obigen Diagramm haben wir sankey.node.nodePadding auf 80 gesetzt.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Wird geladen
Der Paketname google.charts.load lautet "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 spiegelt sich in der Breite des Pfads zwischen den Labels wider.
Columns:
| Spalte 0 | Spalte 1 | Spalte 2 | ... | Spalte N (optional) | |
|---|---|---|---|---|---|
| Zweck: | Quelle | Ziel | Wert | ... | Optionale Rollen |
| Datentyp: | String | String | number | ... | |
| Rolle: | Domain | Domain | Daten | ... | |
| Optionale Spaltenrollen: | – |
– |
– |
... |
Konfigurationsoptionen
| Name | |
|---|---|
| forceIFrame |
Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.) Typ: Boolesch
Standard: false
|
| height |
Höhe des Diagramms in Pixeln Typ:Zahl
Standard:Höhe des beinhaltenden Elements
|
| sankey.iterations |
Bei Sankeys auf mehreren Ebenen ist es manchmal nicht offensichtlich, wo Knoten für eine optimale Lesbarkeit platziert werden sollten. Die D3-Layout-Engine testet mit verschiedenen Knotenlayouts und wird beendet, wenn Typ: Ganzzahl
Standard: 32
|
| sankey.link |
Steuert Attribute der Verbindungen zwischen Knoten. Derzeit betreffen alle Attribute 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'
]
}
}
Typ:Objekt
Standard:null
|
| sankey.link.colorMode |
Legt einen Farbmodus für die Verbindungen zwischen Knoten fest. Mögliche Werte:
Diese Option überschreibt „sankey.link.color“. Typ: String
Standard: „keine“
|
| sankey.node |
Steuert Attribute der Knoten (die vertikalen Balken zwischen den Verbindungen):
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'
]
}
}
Typ:Objekt
Standard:null
|
| sankey.node.colorMode |
Legt einen Farbmodus für die Sankey-Knoten fest. Mögliche Werte:
Typ: String
Standardeinstellung: „eindeutig“
|
| Kurzinfo |
Ein Objekt mit Mitgliedern zum Konfigurieren verschiedener Kurzinfo-Elemente. Zum Angeben der Attribute dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {textStyle: {color: '#FF0000'}, showColorCode: true}
Typ:Objekt
Standard:null
|
| tooltip.isHtml |
Wenn die Richtlinie auf „true“ gesetzt ist, werden HTML- und keine SVG-gerenderten Kurzinfos verwendet. Weitere Informationen finden Sie unter Inhalt der Kurzinfo anpassen. Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von der Visualisierung Blasendiagramm nicht unterstützt. Typ: Boolesch
Standard: false
|
| tooltip.textStyle |
Ein Objekt, das den Textstil für die Kurzinfo angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 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
|
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
|
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 Diagrammentitäten aus. Verwirft die vorherige Auswahl.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
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
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. Properties (Eigenschaften): id, message, message
|
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. Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag zu einer Spalte (Zeilenindex ist null) und eine Kategorie zu einer Zeile (Spaltenindex ist null). 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. Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag zu einer Spalte (Zeilenindex ist null) und eine Kategorie zu einer Zeile (Spaltenindex ist null). 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.