Halaman ini diterjemahkan oleh Cloud Translation API.

Diagram Sankey

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

Ringkasan

Diagram batang adalah visualisasi yang digunakan untuk menggambarkan alur dari satu kumpulan nilai ke kumpulan nilai lainnya. Hal-hal yang dihubungkan disebut node dan koneksi disebut link. Sankey paling baik digunakan saat 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 bagaimana traffic mengalir dari halaman ke halaman lain di situs Anda).

Bagi pengguna yang penasaran, nama tersebut dinamai Kapten Sankey, yang membuat diagram efisiensi mesin uap yang menggunakan panah yang memiliki lebar yang proporsional untuk kehilangan panas.

Catatan: Chart kunci mungkin mengalami revisi substansial dalam rilis Google Chart di masa mendatang.

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

Catatan: Diagram Google sankey tidak tersedia di Microsoft Internet Explorer 8 dan versi sebelumnya.

Contoh Sederhana

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

Coba arahkan kursor ke salah satu link untuk menandai koneksi.

Untuk membuat diagram sankey, berikan kumpulan baris dengan setiap informasi yang berisi satu koneksi: dari, ke, dan bobot. Kemudian 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 data itu sendiri, atau menautkan ke B yang tertaut ke C yang menautkan ke A, diagram Anda tidak akan merender.

Sankey bertingkat

Anda dapat membuat diagram Sankey dengan beberapa level koneksi:

Diagram Sankey akan menambahkan level tambahan sesuai kebutuhan, dan menempatkannya 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>

Mengontrol Warna

Diagram Sankey memiliki kemampuan untuk menetapkan warna kustom untuk node dan link. Baik node maupun link dapat diberi palet warna kustom menggunakan opsi colors masing-masing (sankey.node.colors dan sankey.link.colors). Warna juga dapat diberikan dengan mode pewarnaan yang berbeda menggunakan opsi colorMode.

Jika warna tidak disesuaikan, warna default-nya adalah 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 hue yang sama tetapi memiliki kecerahan berbeda:

Seperti inilah 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 guratan dapat ditentukan dalam format RGB atau dengan nama dalam 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 teman:

Berikut ini 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 sebanyak 30 piksel 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 menyetel lebar node menjadi 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 tersebut, 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	nomor	...
Peran:	domain	domain	data	...
Peran kolom opsional:	None	None	None	...	tooltip gaya

Opsi Konfigurasi

Nama
gayaIFrame	Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa di IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean Default: false
tinggi	Tinggi diagram, dalam piksel. Jenis: angka Default: tinggi elemen penampung
sankey.iteration	Dengan sankey multilevel, terkadang tidak jelas di mana node harus ditempatkan agar keterbacaan optimal. Mesin tata letak D3 bereksperimen dengan tata letak node yang berbeda, yang berhenti saat upaya `sankey.iterations` dilakukan. Semakin besar jumlah ini, semakin nyaman tata letak sankey yang kompleks, tetapi akan ada biaya: sankey akan memerlukan waktu lebih lama untuk dirender. Sebaliknya, semakin pendek jumlah ini, semakin cepat diagram akan dirender. Jenis: bilangan bulat Default: 32
sankey.link	Mengontrol atribut koneksi antar-node. Saat ini semua atribut berkaitan 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.warnaMode	Menetapkan mode pewarnaan untuk link antara node. Kemungkinan nilai: `'source'` - Warna node sumber digunakan untuk link ke semua node target. `'target'` - Warna node target digunakan untuk link ke node sumbernya. `'gradient'` - Link antara sumber dan node target diwarnai 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 mengganti sankey.link.color. Jenis: string Default: 'tidak ada'
sankey.node	Mengontrol atribut node (garis 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 yang unik. Jenis: string Default: 'unik'
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, gunakan tooltip yang dirender HTML (bukan yang dirender SVG). Lihat Menyesuaikan Konten Tooltip untuk detail selengkapnya. Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Diagram Balon. Jenis: boolean Default: false
tooltip.teksGaya	Objek yang menentukan gaya teks tooltip. Objek memiliki format berikut: { 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: angka Default: lebar elemen penampung

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)`	Menghasilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi elemen diagram `id`. Format untuk `id` belum didokumentasikan (ini adalah nilai yang ditampilkan dari pengendali peristiwa), tetapi berikut adalah 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 dudukan kelima pada diagram lingkaran `cli.getBoundingBox('slice#4')` Kotak pembatas data diagram dari diagram vertikal (mis. kolom): `cli.getBoundingBox('vAxis#0#gridline')` Kotak pembatas data diagram dari diagram horizontal (misalnya, batang): `cli.getBoundingBox('hAxis#0#gridline')` Nilai bersifat relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Jenis Pengembalian:
`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 Hasil: Array elemen pemilihan
`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 sekaligus. `Extended description` . Jenis Pengembalian: tidak ada
`clearChart()`	Menghapus diagram dan melepaskan semua resource yang dialokasikan. Jenis Pengembalian: tidak ada

Acara

Nama
`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. Batang berkorelasi dengan sel di tabel data, entri legenda di kolom (indeks baris adalah null), dan kategori untuk baris (indeks kolom adalah null). Properties: baris, kolom
`onmouseout`	Diaktifkan saat pengguna mengarahkan mouse dari entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Batang berkorelasi dengan sel di tabel data, entri legenda di kolom (indeks baris adalah null), dan kategori untuk baris (indeks kolom adalah null). Properties: 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 tersebut diaktifkan. Properties: tidak ada
`select`	Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil `getSelection()`. Properties: tidak ada

Kebijakan Data

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