Diagram Sankey

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 sankey.iterations próbach. Im większa liczba, tym bardziej przyjemny jest układ złożonych kluczy, ale wiąże się to z kosztami: renderowanie kluczy trwa dłużej. Im krócej, tym szybciej renderujemy wykresy.

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:

  • 'source' – kolor węzła źródłowego jest używany na potrzeby linków do wszystkich węzłów docelowych.
  • 'target' – kolor węzła docelowego jest używany na potrzeby połączenia z węzłami źródłowymi.
  • 'gradient' – połączenie między źródłem i węzłem docelowym jest kolorowe gradientem z koloru węzła źródłowego do koloru docelowego.
  • 'none' – opcja domyślna. Kolory linków zostaną ustawione na wartości domyślne (lub określone przez opcje sankey.link.color.fill i sankey.link.color.fillOpacity).

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:

  • 'unique' – każdy węzeł otrzyma unikalny kolor.
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> }
    

color może być dowolnym ciągiem koloru HTML, 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, który zawiera.

Metody

Metoda
draw(data, options)

Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia ready. Extended description,

Typ zwrotu: brak
getBoundingBox(id)

Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu id. Format elementu id nie został jeszcze udokumentowany (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 klinowej do wykresu kołowego
cli.getBoundingBox('slice#4')
Ramka ograniczająca dane z wykresu pionowego (np. kolumny):
cli.getBoundingBox('vAxis#0#gridline')
Ramka ograniczająca danych na wykresie poziomym (np. słupkowym):
cli.getBoundingBox('hAxis#0#gridline')

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. Extended description.

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. Extended description.

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 draw i wywołanie ich dopiero po uruchomieniu 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 do żadnego serwera.