Omówienie
Wykres Sankeya to wizualizacja służąca do przedstawienia przepływu danych z jednego zbioru wartości do drugiego. Łączone elementy to węzły, a połączenia – linki. Sankeys najlepiej się sprawdza, gdy chcesz pokazać mapowanie wartości „wiele do wielu” między dwiema domenami (np.uniwersytetami i specjalistami) lub wieloma ścieżkami po określonej liczbie etapów (np. Google Analytics używa sankeys, by pokazać, jak ruch przepływa ze stron do innych stron w Twojej witrynie).
Dla ciekawszych nazywa się je kapitanem Sankeyem, który stworzył diagram wydajności silnika parowego, w którym strzały miały szerokość proporcjonalną do strat ciepła.
Uwaga: w przyszłych wersjach Listy przebojów Google wykres Sankeya może zostać znacząco zmieniony.
Diagramy Sankeya są renderowane w przeglądarce za pomocą SVG lub VML, w zależności od potrzeb przeglądarki użytkownika. Kod układu Sankeya pochodzi z kodu układu Sankey D3.
Uwaga: wykresy Sankey Google są niedostępne w przeglądarce Microsoft Internet Explorer 8 i starszych wersjach.
Prosty przykład
Załóżmy, że mamy 2 kategorie, A i B, które łączą się z 3 innymi kategoriami: X, Y i Z. Niektóre z nich są cięższe od innych. Na przykład połączenie B z X jest słabe, a z Y dużo grubsze.
Najedź kursorem na jeden z linków, aby podświetlić połączenie.
Aby utworzyć wykres Sankeya, podaj zestaw wierszy zawierających informacje o jednym połączeniu: od, do i wagę. Następnie użyj metody google.visualization.Sankey() do zainicjowania wykresu, a następnie metody draw(), aby go wygenerować:
<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>
Uwaga: unikaj cykli w danych: jeśli A połączy się ze sobą lub z linkiem B, który prowadzi do C, który prowadzi do A, wykres nie zostanie wyrenderowany.
Sankey wielopoziomowy
Możesz utworzyć wykres Sankeya z wieloma poziomami połączeń:
Wykresy Sankeya będą w razie potrzeby dodawać kolejne poziomy i będą one rozmieszczane automatycznie. Oto pełny kod powyższego wykresu:
<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>
Kontrola kolorów
Wykresy Sankeya mają możliwość ustawiania niestandardowych kolorów węzłów i linków. Do węzłów i linków można przypisać niestandardowe palety kolorów za pomocą opcji colors (odpowiednio sankey.node.colors i sankey.link.colors). Można też wybrać różne tryby kolorów za pomocą opcji colorMode.
Jeśli kolory nie zostaną dostosowane, domyślnie będą używane standardowa paleta Materiałów.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
Za pomocą opcji konfiguracji możesz kontrolować kolory połączeń, węzłów i etykiet. Tutaj wybieramy 3 takie same odcienie, ale różne poziomy jasności:
Oto jak wyglądają te opcje:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Przezroczystość linków możesz też kontrolować za pomocą opcji sankey.link.color.fillOpacity:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
Aby utworzyć obramowanie linków, użyj opcji sankey.link.color.stroke i sankey.link.color.strokeWidth:
Kolor kreski można określić w formacie RGB lub za pomocą angielskiej nazwy.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
Dostosowywanie etykiet
Tekst na wykresach Sankeya można dostosować za pomocą właściwości sankey.node.label.fontName i znajomych:
Oto przykładowe zdanie opcji na powyższym wykresie:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
Położenie etykiet w stosunku do węzłów możesz dostosować za pomocą opcji sankey.node.labelPadding:
Na wykresie powyżej dodaliśmy 30 pikseli dopełnienia między etykietami a węzłami.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
Dostosowywanie węzłów
Grubość węzłów możesz kontrolować za pomocą funkcji sankey.node.width:
Powyżej ustawiamy szerokość węzła na 2.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
Odległość między węzłami można dostosować za pomocą funkcji sankey.node.nodePadding:
Na powyższym wykresie ustawiliśmy wartość sankey.node.nodePadding na 80.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
Wczytuję
Nazwa pakietu google.charts.load to "sankey":
google.charts.load("current" {packages: ["sankey"]});
Nazwa klasy wizualizacji to google.visualization.Sankey:
var visualization = new google.visualization.Sankey(container);
Format danych
Wiersze: każdy wiersz tabeli odpowiada połączeniu 2 etykiet. Trzecia kolumna wskazuje siłę tego połączenia i jest odzwierciedlana w szerokości ścieżki między etykietami.
Kolumny:
| Kolumna 0 | Kolumna 1 | Kolumna 2 | ... | Kolumna N (opcjonalna) | |
|---|---|---|---|---|---|
| Przeznaczenie: | Źródło | Miejsce docelowe | Wartość | ... | Role opcjonalne |
| Typ danych: | string, | string, | Liczba | ... | |
| Rola: | domena | domena | dane | ... | |
| Opcjonalne role kolumn: | Brak |
Brak |
Brak |
... |
Opcje konfiguracji
| Nazwa | |
|---|---|
| forceIFrame |
Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame). Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
|
| sankey.iterations |
W przypadku wielopoziomowych kluczy Sankey nie jest oczywiste, gdzie najlepiej rozmieścić węzły, aby zapewnić ich optymalną czytelność. Mechanizm układu D3 eksperymentuje z różnymi układami węzłów i zatrzymuje się po wykonaniu próby Typ: liczba całkowita
Wartość domyślna: 32
|
| sankey.link |
Kontroluje atrybuty połączeń między węzłami. Obecnie wszystkie atrybuty odnoszą się do koloru:
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: obiekt
Wartość domyślna:null
|
| sankey.link.colorMode |
Ustawia tryb kolorowania połączeń między węzłami. Możliwe wartości:
Ta opcja zastępuje sankey.link.color. Typ: ciąg znaków
Domyślna: „none” (brak).
|
| sankey.node |
Kontroluje atrybuty węzłów (pionowe paski między połączeniami):
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: obiekt
Wartość domyślna:null
|
| sankey.node.colorMode |
Ustawia tryb kolorowania węzłów Sankey. Możliwe wartości:
Typ: ciąg znaków
Domyślne: „unikalny”
|
| etykietka |
Obiekt z elementami służącymi do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true}
Typ: obiekt
Wartość domyślna:null
|
| tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykietek renderowanych HTML (a nie renderowanych w formacie SVG). Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| tooltip.textStyle |
Obiekt, który określa styl tekstu etykietki. Obiekt ma ten format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość elementu nadrzędnego.
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia Return Type: brak
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, wpisy z legendy i kategorie.
Na tym wykresie w danym momencie można wybrać tylko 1 element.
Return Type: tablica elementów zaznaczenia.
|
setSelection() |
Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór.
Elementy, które można wybrać, to paski, wpisy z legendy i kategorie.
Na tym wykresie można wybrać tylko 1 element naraz.
Return Type: brak
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
Zdarzenia
| Nazwa | |
|---|---|
error |
Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. Właściwości: identyfikator, komunikat
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy o kolumnie (indeks wiersza ma wartość null), a kategorię – wierszowi (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna
|
onmouseout |
Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy o kolumnie (indeks wiersza ma wartość null), a kategorię – wierszowi (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna
|
ready |
Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.