Omówienie
Schemat bezkluczykowy to wizualizacja przedstawiająca przepływ z jednego zbioru wartości do drugiego. Łączone rzeczy to węzły, a połączenia linki. Klucze są najbardziej przydatne, gdy chcesz umieścić wiele do wielu map między 2 domenami (np.uniwersytety lub uczelnie) lub wiele ścieżek za pomocą zestawu etapów (np. Google Analytics używa kluczy bezpieczeństwa, aby pokazać przepływ ruchu ze stron do innych stron w Twojej witrynie).
Co ciekawego nosi tę samą nazwę co kapitan Sankey, który opracował schemat wydajności silnika parowego, który używa strzałek o szerokości proporcjonalnej do utraty ciepła.
Uwaga: w kolejnych wersjach Map Google na wykresach bezwzględnych mogą być wprowadzane znaczne zmiany.
Diagramy bezpieczników są renderowane w przeglądarce za pomocą SVG lub VML, zależnie od tego, co jest odpowiednie dla przeglądarki użytkownika. Układ układu sankey Google pochodzi z kodu Sansk D3.
Uwaga: wykresy bezserwerowe Google są niedostępne w przeglądarce Microsoft Internet Explorer 8 i wcześniejszych wersjach.
Prosty przykład
Załóżmy, że masz dwie kategorie: A i B, które łączą się z trzema innymi kategoriami: X, Y i Z. Niektóre z nich są cięższe niż inne. Na przykład B ma słabe połączenie z X, a dużo lepsze z Y.
Spróbuj najechać kursorem na jeden z linków, aby wyróżnić to połączenie.
Aby utworzyć wykres bezwzględny, podaj zestaw wierszy, z których każde zawiera informacje o jednym połączeniu: od, do, i wagi. Następnie użyj metody google.visualization.Sankey()
, aby zainicjować wykres, i metody draw()
, aby ją wyrenderować:
<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 danych: jeśli link A prowadzi do siebie lub do B prowadzi do C, który łączy się z A, wykres nie zostanie wyrenderowany.
Kilkupoziomowe klucze bezpieczeństwa
Możesz utworzyć wykres Sankey z wieloma poziomami połączeń:
W razie potrzeby wykresy bezpiecznikowe dodają kolejne poziomy, rozmieszczając je 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 bezbarwne umożliwiają ustawianie niestandardowych kolorów węzłów i linków. Zarówno węzłom, jak i linkom można nadać własną paletę kolorów przy użyciu opcji colors
(odpowiednio sankey.node.colors
i sankey.link.colors
). Za pomocą opcji colorMode
można też ustawić różne tryby kolorów.
Jeśli kolory nie są dostosowane, domyślnie ustawiana jest 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 linków, węzłów i etykiet. Wybieramy trzy obrazy o tym samym odcieniu, ale różnych jasnościach:
Opcje te wyglądają następująco:
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 wokół linków, użyj opcji sankey.link.color.stroke
i sankey.link.color.strokeWidth
:
Kolor kreski możesz określić w formacie RGB lub po angielsku.
var options = { width: 750, height: 400, sankey: { node: { colors: [ '#a61d4c' ] }, link: { color: { stroke: 'black', strokeWidth: 1 } }, } };
Dostosowywanie etykiet
Tekst na wykresach swobodnych można dostosować za pomocą sankey.node.label.fontName
i znajomych:
Oto opcja na powyższym wykresie:
var options = { width: 600, sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 14, color: '#871b47', bold: true, italic: true } } }, };
Możesz dostosować położenie etykiet względem węzłów za pomocą opcji sankey.node.labelPadding
:
Na powyższym wykresie 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
Szerokość węzłów można kontrolować za pomocą sankey.node.width
:
Powyżej ustawiamy szerokość węzła na 2.
var options = { width: 600, sankey: { node: { width: 2 } }, };
Możesz dostosować odległość między węzłami za pomocą polecenia sankey.node.nodePadding
:
Na wykresie powyżej sankey.node.nodePadding
ma wartość 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 w tabeli odpowiada połączeniu między 2 etykietami. Trzecia kolumna pokazuje siłę połączenia i odzwierciedla szerokość ścieżki między etykietami.
Kolumny:
Kolumna 0 | Kolumna 1 | Kolumna 2 | … | Kolumna N (opcjonalnie) | |
---|---|---|---|---|---|
Cel: | Źródło | Miejsce docelowe | Wartość | … | Role opcjonalne |
Typ danych: | tekst | tekst | liczba | … | |
Rola: | domena | domena | dane | … | |
Opcjonalne role kolumn: | Brak |
Brak |
Brak |
… |
Opcje konfiguracji
Nazwa | |
---|---|
forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna:wysokość elementu, który go zawiera.
|
sankey.iterations |
W przypadku wielopoziomowych kluczy bezpieczeństwa nie jest zazwyczaj jasne, gdzie należy umieścić węzły, aby uzyskać optymalną czytelność. Eksperymentowane do układu układu D3 eksperymenty z różnymi układami węzłów zatrzymują się po 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
Domyślne: null
|
sankey.link.kolor |
Ustawia tryb kolorowania połączeń między węzłami. Możliwe wartości:
Ta opcja zastępuje ustawienie sankey.link.color. Typ: ciąg znaków
Wartość domyślna: „none”
|
sankey.node |
Kontroluje atrybuty węzłów (pionowe paski między linkami): 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
Domyślne:null
|
klucz_san.node.colorMode |
Ustawia tryb kolorowania węzłów sankey. Możliwe wartości:
Typ: ciąg znaków
Wartość domyślna: „unikalna”
|
etykietka |
Obiekt z członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt
Domyślne:null
|
tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykiet z renderowaniem HTML (a nie z elementami renderowanymi w formacie SVG). Więcej informacji znajdziesz w artykule Dostosowywanie zawartoś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: false
|
tooltip.textStyle |
Obiekt określający styl tekstu etykietki. Obiekt ma taki 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, który zawiera.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia Typ zwrotu: brak
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, legendy i kategorie.
Na tym wykresie w danym momencie możesz wybrać tylko 1 element.
Typ zwrotu: tablica elementów wyboru.
|
setSelection() |
Zaznacza określone elementy wykresu. Anuluje poprzedni wybór.
Elementy, które można wybrać, to paski, legendy i kategorie.
Na tym wykresie możesz wybrać tylko jeden element naraz.
Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Nazwa | |
---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Pasek odpowiada komórce w tabeli danych, wpis legendy w kolumnie (indeks wiersza jest pusty) oraz kategoria w wierszu (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Pasek odpowiada komórce w tabeli danych, wpis legendy w kolumnie (indeks wiersza jest pusty) oraz kategoria w wierszu (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
ready |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik 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 do żadnego serwera.