Halaman ini diterjemahkan oleh Cloud Translation API.

Diagram Sankey

Ringkasan
Contoh Sederhana
Sankey Multilevel
Mengontrol Warna
Menyesuaikan Font
Menyesuaikan Node
Memuat
Format Data
Opsi Konfigurasi
Metode
Peristiwa
Kebijakan Data

Ringkasan

Diagram sankey adalah visualisasi yang digunakan untuk menggambarkan alur dari satu kumpulan nilai ke kumpulan nilai lainnya. Objek yang terhubung disebut node dan koneksinya disebut link. Sankey paling tepat digunakan jika Anda ingin menampilkan pemetaan many-to-many di antara dua domain (misalnya, universitas dan jurusan) atau beberapa jalur melalui serangkaian tahapan (misalnya, Google Analytics menggunakan sankey untuk menunjukkan alur traffic dari halaman ke halaman lain di situs Anda).

Untuk yang aneh, nama tersebut diambil dari nama Kapten Sankey, yang membuat diagram efisiensi mesin uap yang menggunakan panah yang memiliki lebar sebanding dengan kehilangan panas.

Catatan: Diagram sankey mungkin mengalami revisi substansial dalam rilis Google Chart mendatang.

Diagram sankey dirender di browser menggunakan SVG atau VML, mana saja yang sesuai untuk browser pengguna. Kode tata letak sankey Google berasal dari kode tata letak sankey D3.

Catatan: Diagram sankey Google tidak tersedia di Microsoft Internet Explorer 8 dan versi yang lebih lama.

Contoh Sederhana

Misalkan Anda memiliki dua kategori, A dan B, yang terhubung ke tiga kategori lain, X, Y, dan Z. Beberapa koneksi tersebut lebih berat daripada yang lain. Misalnya, B memiliki koneksi yang tipis ke X dan koneksi yang jauh lebih tebal ke Y.

Coba arahkan kursor ke salah satu link untuk menyoroti koneksi.

Untuk membuat diagram sankey, berikan kumpulan baris, yang masing-masing berisi informasi tentang satu koneksi: dari, ke, dan bobot. Lalu, gunakan metode google.visualization.Sankey() untuk menginisialisasi diagram, lalu metode draw() untuk merendernya:

<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>

Catatan: Hindari siklus dalam data Anda: jika A menautkan ke dirinya sendiri, atau tertaut ke B yang tertaut ke C yang tertaut ke A, diagram Anda tidak akan dirender.

Sankey Multilevel

Anda dapat membuat diagram Sankey dengan beberapa tingkat koneksi:

Diagram sankey akan menambahkan level tambahan sesuai kebutuhan, sehingga menata letaknya secara otomatis. Berikut adalah kode lengkap untuk diagram di atas:

<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>

Warna Kontrol

Diagram sankey memiliki kemampuan untuk menetapkan warna kustom untuk node dan link. Node dan link dapat diberi palet warna kustom menggunakan opsi colors (sankey.node.colors dan sankey.link.colors). Gambar juga dapat diberi mode pewarnaan yang berbeda menggunakan opsi colorMode.

Jika warna tidak disesuaikan, warna akan ditetapkan secara default ke palet Material standar.

    var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];

    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

Anda dapat mengontrol warna link, node, dan label dengan opsi konfigurasi. Di sini, kita memilih tiga dengan rona yang sama namun kecerahannya berbeda:

Berikut tampilan opsi tersebut:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae' } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

Anda juga dapat mengontrol transparansi link dengan opsi sankey.link.color.fillOpacity:

    var options = {
      width: 600,
      sankey: {
        link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
        node: { colors: [ '#a61d4c' ],
                label: { color: '#871b47' } },
      }
    };

Untuk membuat batas di sekitar link, gunakan opsi sankey.link.color.stroke dan sankey.link.color.strokeWidth:

Warna goresan dapat ditentukan dalam format RGB atau dengan nama bahasa Inggris.

    var options = {
      width: 750,
      height: 400,
      sankey: {
        node: { colors: [ '#a61d4c' ] },
        link: { color: { stroke: 'black', strokeWidth: 1 } },
      }
    };

Menyesuaikan Label

Teks pada diagram sankey dapat disesuaikan menggunakan sankey.node.label.fontName dan lainnya:

Berikut stanza opsi untuk diagram di atas:

    var options = {
      width: 600,
      sankey: {
        node: { label: { fontName: 'Times-Roman',
                         fontSize: 14,
                         color: '#871b47',
                         bold: true,
                         italic: true } } },
    };

Anda dapat menyesuaikan posisi label relatif terhadap node dengan opsi sankey.node.labelPadding:

Pada diagram di atas, kami telah menambahkan padding 30 piksel di antara label dan node.

    var options = {
      width: 600,
      sankey: { node: { labelPadding: 30 } },
    };

Menyesuaikan Node

Anda dapat mengontrol lebar node dengan sankey.node.width:

Di atas, kita menetapkan lebar node ke 2.

    var options = {
      width: 600,
      sankey: { node: { width: 2 } },
    };

Anda dapat menyesuaikan jarak antar-node dengan sankey.node.nodePadding:

Pada diagram di atas, kita menetapkan sankey.node.nodePadding ke 80.

    var options = {
      width: 900,
      sankey: { node: { nodePadding: 80 } },
    };

Memuat

Nama paket google.charts.load adalah "sankey":

  google.charts.load("current" {packages: ["sankey"]});

Nama class visualisasi adalah google.visualization.Sankey:

  var visualization = new google.visualization.Sankey(container);

Format Data

Baris: Setiap baris dalam tabel mewakili hubungan antara dua label. Kolom ketiga menunjukkan kekuatan koneksi, dan akan tercermin dalam lebar jalur di antara label.

Kolom:

	Kolom 0	Kolom 1	Kolom 2	...	Kolom N (opsional)
Tujuan:	Sumber	Destination	Nilai	...	Peran opsional
Jenis Data:	string	string	number	...
Peran:	domain	domain	data	...
Peran kolom opsional:	None	None	None	...	tooltip gaya

Opsi Konfigurasi

Name
forceIFrame	Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean Default: false
tinggi	Tinggi diagram, dalam piksel. Jenis: nomor Default: tinggi elemen yang memuatnya
sankey.iterations	Dengan sankey multilevel, terkadang tidak jelas di mana node harus ditempatkan agar keterbacaan optimal. Eksperimen mesin tata letak D3 dengan tata letak node yang berbeda, akan berhenti saat `sankey.iterations` percobaan telah dilakukan. Makin besar angka ini, makin menyenangkan tata letak sankey kompleks, tetapi menimbulkan biaya: sankey akan memerlukan waktu lebih lama untuk dirender. Sebaliknya, semakin pendek angka ini, semakin cepat diagram akan dirender. Jenis: bilangan bulat Default: 32
sankey.link	Mengontrol atribut hubungan antar-node. Saat ini, semua atribut terkait dengan warna: 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' ] } } Jenis: objek Default: null
sankey.link.colorMode	Menetapkan mode pewarnaan untuk link antar-node. Kemungkinan nilai: `'source'` - Warna node sumber digunakan untuk menautkan ke semua node target. `'target'` - Warna node target digunakan untuk link ke node sumbernya. `'gradient'` - Link antara node sumber dan target diberi warna sebagai gradien dari warna node sumber ke warna node target. `'none'` - opsi default; warna link akan ditetapkan ke default (atau warna seperti yang ditentukan oleh opsi `sankey.link.color.fill` dan `sankey.link.color.fillOpacity`). Opsi ini menggantikan sankey.link.color. Jenis: string Default: 'none'
sankey.node	Mengontrol atribut node (batang vertikal di antara link): 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' ] } } Jenis: objek Default: null
sankey.node.colorMode	Menetapkan mode pewarnaan untuk node sankey. Kemungkinan nilai: `'unique'` - Setiap node akan menerima warna unik. Jenis: string Default: 'unique'
tooltip	Objek dengan anggota untuk mengonfigurasi berbagai elemen tooltip. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditampilkan di sini: {textStyle: {color: '#FF0000'}, showColorCode: true} Jenis: objek Default: null
tooltip.isHtml	Jika disetel ke benar (true), gunakan tooltip yang dirender dengan HTML (bukan yang dirender SVG. Lihat Menyesuaikan Konten Tooltip untuk mengetahui detail selengkapnya. Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Bubble Chart. Jenis: boolean Default: false
tooltip.textStyle	Objek yang menentukan gaya teks tooltip. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` dapat berupa string warna HTML apa pun, misalnya: `'red'` atau `'#00cc00'`. Lihat juga `fontName` dan `fontSize`. Jenis: objek Default: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
lebar	Lebar diagram, dalam piksel. Jenis: nomor Default: lebar elemen yang memuatnya

Metode

Metode
`draw(data, options)`	Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa `ready` diaktifkan. `Extended description`. Jenis Pengembalian: tidak ada
`getBoundingBox(id)`	Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi elemen diagram `id`. Format untuk `id` belum didokumentasikan (nilai tersebut adalah nilai yang ditampilkan dari pengendali peristiwa), tetapi berikut beberapa contohnya: `var cli = chart.getChartLayoutInterface();` Tinggi area diagram `cli.getBoundingBox('chartarea').height` Lebar batang ketiga dalam deret pertama diagram batang atau kolom `cli.getBoundingBox('bar#0#2').width` Kotak pembatas dari dudukan kelima diagram lingkaran `cli.getBoundingBox('slice#4')` Kotak pembatas data diagram dari diagram vertikal (misalnya, kolom): `cli.getBoundingBox('vAxis#0#gridline')` Kotak pembatas data diagram suatu diagram horizontal (misalnya, batang): `cli.getBoundingBox('hAxis#0#gridline')` Nilai bersifat relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
`getSelection()`	Menampilkan array entitas diagram yang dipilih. Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu. `Extended description` Jenis Pengembalian: Array elemen pilihan
`setSelection()`	Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya. Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori. Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu. `Extended description` Jenis Pengembalian: tidak ada
`clearChart()`	Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan. Jenis Pengembalian: tidak ada

Acara

Name
`error`	Diaktifkan saat terjadi error saat mencoba merender diagram. Properties: id, pesan
`onmouseover`	Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Sebuah batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris {i>null<i}), dan kategori ke baris (indeks kolom adalah {i>null<i}). Properti: baris, kolom
`onmouseout`	Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Sebuah batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris {i>null<i}), dan kategori ke baris (indeks kolom adalah {i>null<i}). Properti: baris, kolom
`ready`	Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode `draw`, dan memanggilnya hanya setelah peristiwa diaktifkan. Properti: tidak ada
`select`	Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil `getSelection()`. Properti: tidak ada

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.