Ta strona została przetłumaczona przez Cloud Translation API.

Diagram Sankeya

Overview
Prosty przykład
Sankey wielopoziomowy
Kontrola kolorów
Dostosowywanie czcionek
Dostosowywanie węzłów
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych

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	...	etykietka style,

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 `sankey.iterations`. Im większa liczba, tym korzystniejszy jest układ złożonych sankey, ale wiąże się to z kosztem – renderowanie tych kluczy zajmuje więcej czasu. I na odwrót – im krótsza ta liczba, tym szybciej wykresy będą się wyświetlać. 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: `'source'` – kolor węzła źródłowego jest używany w połączeniach ze wszystkimi węzłami docelowymi. `'target'` – kolor węzła docelowego jest używany w połączeniu z jego węzłami źródłowymi. `'gradient'` – połączenie między węzłem źródłowym a docelowym ma kolor gradientu od koloru węzła źródłowego do koloru docelowego. `'none'` – opcja domyślna; domyślne kolory linków (lub kolor określony w opcjach `sankey.link.color.fill` i `sankey.link.color.fillOpacity`). 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: `'unique'` – każdy węzeł otrzymuje unikalny kolor. 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> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. 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 `ready`. `Extended description`. Return Type: brak
`getBoundingBox(id)`	Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu `id`. Format zapisu `id` nie jest jeszcze udokumentowany (są to wartości zwracane przez moduły obsługi zdarzeń), ale oto kilka przykładów: `var cli = chart.getChartLayoutInterface();` Wysokość obszaru wykresu `cli.getBoundingBox('chartarea').height` Szerokość trzeciego słupka w pierwszej serii wykresu słupkowego lub kolumnowego `cli.getBoundingBox('bar#0#2').width` Ramka ograniczająca piątej podkładki na wykresie kołowym `cli.getBoundingBox('slice#4')` Ramka ograniczająca dane wykresu pionowego (np. kolumnowego): `cli.getBoundingBox('vAxis#0#gridline')` Ramka ograniczająca dane wykresu poziomego (np. słupkowego): `cli.getBoundingBox('hAxis#0#gridline')` 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. `Extended description` 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. `Extended description` 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 `draw` i wywołaj je dopiero po wywołaniu zdarzenia. Właściwości: brak
`select`	Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer `getSelection()`. 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.

Diagram Sankeya Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.