Diagram Sankeya

  1. Overview
  2. Prosty przykład
  3. Sankey wielopoziomowy
  4. Kontrola kolorów
  5. Dostosowywanie czcionek
  6. Dostosowywanie węzłów
  7. Wczytuję
  8. Format danych
  9. Opcje konfiguracji
  10. Metody
  11. Zdarzenia
  12. 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

 ...

 

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.