Bu sayfa, Cloud Translation API ile çevrilmiştir.

Sankey Diyagramı

Genel bakış
Basit bir örnek
Çok Düzeyli Sankey'ler
Renkleri Kontrol Etme
Yazı Tiplerini özelleştirme
Düğümleri Ayarlama
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası

Genel bakış

Sankey diyagramı, bir değer grubundan diğerine akışı göstermek için kullanılan bir görselleştirmedir. Bağlanan nesnelere düğüm, bağlantılara bağlantı adı verilir. İki alan (ör. üniversiteler ve ana dallar) arasında birden çoka-çok eşleme veya bir dizi aşamadan geçen birden çok yol (örneğin, Google Analytics, trafiğin web sitenizdeki diğer sayfalara nasıl aktığını göstermek için üst paneller) göstermek istediğinizde kullanılır.

Merak edenler, adını Kaptan Sankey'den alıyor. Bu diyagramda, genişlikleri ısı kaybıyla orantılı olan okların kullanıldığı bir buhar motoru verimlilik diyagramı bulunuyor.

Not: Sankey grafiği, gelecekteki Google Charts sürümlerinde önemli revizyonlar geçiriyor olabilir.

Sankey diyagramları, kullanıcının tarayıcısına uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulur. Google'ın sığınak düzeni kodu, D3'ün yapay zeka düzen kodundan türetilir.

Not: Google canavar grafikleri Microsoft Internet Explorer 8 ve önceki sürümlerde kullanılamaz.

Basit Bir Örnek

X, Y ve Z olmak üzere üç kategoriye daha bağlanan A ve B olmak üzere iki kategorinizin olduğunu varsayalım. Bu bağlantıların bazıları diğerlerinden daha ağırdır. Örneğin, B'nin X ile ince, Y ile ise çok daha güçlü bir bağlantısı vardır.

Bağlantıyı vurgulamak için fareyle bağlantılardan birinin üzerine gelmeyi deneyin.

Sankey grafiği oluşturmak için her biri tek bir bağlantıyla ilgili bilgiler içeren bir satır kümesi sağlayın: başlangıç, bitiş ve ağırlık. Ardından grafiği başlatmak için google.visualization.Sankey() yöntemini ve oluşturmak için draw() yöntemini kullanın:

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

Not: Verilerinizde döngülerden kaçının: A kendine bağlantı oluşturuyorsa veya A'ya bağlantı veren C'ye bağlantı veren B'ye bağlantı veriyorsa grafiğiniz oluşturulmaz.

Çok Düzeyli Sankey'ler

Birden çok bağlantı düzeyinde Sankey grafiği oluşturabilirsiniz:

Sankey grafikleri gerektiğinde ilave seviyeler ekleyerek otomatik olarak yerleştirilir. Yukarıdaki grafik için kodun tamamı aşağıda verilmiştir:

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

Renkleri Kontrol Etme

Sankey grafiklerinde düğümler ve bağlantılar için özel renkler ayarlayabilirsiniz. Hem düğümlere hem de bağlantılara, colors seçenekleri (sırasıyla sankey.node.colors ve sankey.link.colors) kullanılarak özel renk paletleri verilebilir. Ayrıca, colorMode seçeneği kullanılarak farklı renklendirme modları da sunulabilir.

Renkler özelleştirilmezse varsayılan olarak standart Malzeme paleti kullanılır.

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

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

Yapılandırma seçeneklerini kullanarak bağlantıların, düğümlerin ve etiketlerin renklerini kontrol edebilirsiniz. Burada, aynı tona ancak farklı parlaklıklara sahip üç tane seçiyoruz:

Bu seçenekler aşağıdaki gibi görünür:

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

sankey.link.color.fillOpacity seçeneğiyle bağlantıların şeffaflığını da kontrol edebilirsiniz:

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

Bağlantıların etrafında kenarlık oluşturmak için sankey.link.color.stroke ve sankey.link.color.strokeWidth seçeneklerini kullanın:

Fırça rengi, RGB biçiminde veya İngilizce adıyla belirtilebilir.

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

Etiketleri Özelleştirme

Sankey grafiklerindeki metinler, sankey.node.label.fontName ve arkadaşlar kullanılarak özelleştirilebilir:

Yukarıdaki grafikteki seçenek örneği:

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

sankey.node.labelPadding seçeneğini kullanarak etiketlerin düğümlere göre konumunu ayarlayabilirsiniz:

Yukarıdaki grafikte, etiketler ve düğümler arasına 30 piksellik dolgu ekledik.

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

Düğümleri Ayarlama

sankey.node.width ile düğümlerin genişliğini kontrol edebilirsiniz:

Yukarıda, düğüm genişliğini 2 olarak ayarladık.

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

sankey.node.nodePadding ile düğümler arasındaki mesafeyi ayarlayabilirsiniz:

Yukarıdaki grafikte sankey.node.nodePadding değerini 80 olarak ayarladık.

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

Yükleniyor

google.charts.load paketinin adı "sankey":

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

Görselleştirmenin sınıf adı: google.visualization.Sankey:

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

Veri Biçimi

Satırlar: Tablodaki her bir satır, iki etiket arasındaki bağlantıyı temsil eder. Üçüncü sütun, bu bağlantının gücünü belirtir ve etiketler arasındaki yolun genişliğine yansıtılır.

Sütunlar:

	Sütun 0	1. Sütun	2. Sütun	...	Sütun N (isteğe bağlı)
Amaç:	Kaynak	Hedef	Değer	...	İsteğe bağlı roller
Veri Türü:	dize	dize	sayı	...
Rol:	alan	alan	veri	...
İsteğe bağlı sütun rolleri:	Yok	Yok	Yok	...	ipucu stil

Yapılandırma Seçenekleri

Ad
forceIFrame	Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.) Tür: boole Varsayılan: false
yükseklik	Grafiğin piksel cinsinden yüksekliği. Tür: numara Varsayılan: kapsayıcı öğenin yüksekliği
sankey.iterations	Çok seviyeli korumalar nedeniyle, bazen optimum okunabilirlik için düğümlerin yerleştirilmesi gereken yer anlaşılmaz. D3 düzen motoru, farklı düğüm düzenleriyle denemeler yapar ve `sankey.iterations` deneme yapıldığında durur. Bu sayı ne kadar büyükse karmaşık sankeylerin düzeni de o kadar hoş olur ancak bunun bir maliyeti vardır: sankeylerin oluşturulması daha uzun sürer. Buna karşılık, bu sayı ne kadar kısa olursa grafikleriniz o kadar hızlı oluşturulur. Tür: tam sayı Varsayılan: 32
sankey.link	Düğümler arasındaki bağlantıların özelliklerini kontrol eder. Şu anda tüm özellikler renklerle ilgilidir: 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' ] } } Tür: nesne Varsayılan: null
sankey.link.colorMode	Düğümler arasındaki bağlantılar için bir renklendirme modu ayarlar. Olası değerler: `'source'`: Tüm hedef düğümlere giden bağlantılarda kaynak düğümün rengi kullanılır. `'target'`: Hedef düğümün rengi, kaynak düğümlerine giden bağlantı için kullanılır. `'gradient'`: Kaynak ve hedef düğüm arasındaki bağlantı, kaynak düğüm renginden hedef düğüm rengine bir gradyan olarak renklendirilir. `'none'` - varsayılan seçenektir; bağlantı renkleri varsayılana (veya `sankey.link.color.fill` ve `sankey.link.color.fillOpacity` seçenekleri ile belirtilen bir renge) ayarlanır. Bu seçenek sankey.link.color'ı geçersiz kılar. Tür: dize Varsayılan: 'none'
sankey.node	Düğümlerin özelliklerini kontrol eder (bağlantılar arasındaki dikey çubuklar): 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' ] } } Tür: nesne Varsayılan: null
sankey.node.colorMode	Sankey düğümleri için renklendirme modu ayarlar. Olası değerler: `'unique'`: Her düğüm benzersiz bir renk alır. Tür: dize Varsayılan: "benzersiz"
ipucu	Çeşitli ipucu öğelerini yapılandırmak için üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: {textStyle: {color: '#FF0000'}, showColorCode: true} Tür: nesne Varsayılan: null
tooltip.isHtml	Doğru değerine ayarlanırsa (SVG tarafından oluşturulan yerine) HTML ile oluşturulan ipuçlarını kullanın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın. Not: HTML ipucu içeriğinin ipucu sütunu veri rolü aracılığıyla özelleştirilmesi balon grafik görselleştirmesi tarafından desteklenmez. Tür: boole Varsayılan: false
tooltip.textStyle	İpucu metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color`, herhangi bir HTML renk dizesi olabilir. Örneğin: `'red'` veya `'#00cc00'`. Ayrıca bkz. `fontName` ve `fontSize`. Tür: nesne Varsayılan: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
genişlik	Grafiğin piksel cinsinden genişliği. Tür: numara Varsayılan: kapsayıcı öğenin genişliği

Yöntemler

Yöntem
`draw(data, options)`	Grafiği çizer. Grafik, yalnızca `ready` etkinliği etkinleştikten sonra başka yöntem çağrılarını kabul eder. `Extended description`. Return Type (Dönüş Türü): yok
`getBoundingBox(id)`	`id` grafik öğesinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür. `id` biçimi henüz belgelenmemiştir (bunlar, etkinlik işleyicilerin döndürülen değerleridir). Aşağıda bazı örnekler verilmiştir: `var cli = chart.getChartLayoutInterface();` Grafik alanının yüksekliği `cli.getBoundingBox('chartarea').height` Bir çubuk veya sütun grafiğin ilk serisindeki üçüncü çubuğun genişliği `cli.getBoundingBox('bar#0#2').width` Pasta grafiğin beşinci dilimindeki sınırlayıcı kutu `cli.getBoundingBox('slice#4')` Bir dikey (ör. sütun) grafiğin grafik verileri için sınırlayıcı kutu: `cli.getBoundingBox('vAxis#0#gridline')` Yatay (ör. çubuk) bir grafiğin grafik verileri için sınırlayıcı kutu: `cli.getBoundingBox('hAxis#0#gridline')` Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın. Return Type: nesne
`getSelection()`	Seçilen grafik varlıklarından oluşan bir dizi döndürür. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. `Extended description` . Dönüş Türü: Seçim öğeleri dizisi
`setSelection()`	Belirtilen grafik varlıklarını seçer. Önceki seçimleri iptal eder. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. `Extended description` . Return Type (Dönüş Türü): yok
`clearChart()`	Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type (Dönüş Türü): yok

Etkinlikler

Ad
`error`	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Özellikler: kimlik, mesaj
`onmouseover`	Kullanıcı fareyle bir görsel öğenin üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir çubuk, veri tablosundaki bir hücreyle, bir sütuna açıklama girişiyle (satır dizini boştur) ve kategoriyle satırla (sütun dizini null) ilişkilendirilir. Özellikler: satır, sütun
`onmouseout`	Kullanıcı faresini görsel bir öğeden uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir çubuk, veri tablosundaki bir hücreyle, bir sütuna açıklama girişiyle (satır dizini boştur) ve kategoriyle satırla (sütun dizini null) ilişkilendirilir. Özellikler: satır, sütun
`ready`	Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz `draw` yöntemini çağırmadan önce bu etkinlik için bir işleyici ayarlamalı ve bunları yalnızca etkinlik tetiklendikten sonra çağırmalısınız. Özellikler: yok
`select`	Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için `getSelection()` numaralı telefonu arayın. Özellikler: yok

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.