Kuruluş Şeması

Genel bakış

Kuruluş grafikleri, genellikle bir kuruluşta üst ve alt ilişkileri göstermek için kullanılan düğüm hiyerarşisinin diyagramlarıdır. Aile ağacı, bir kuruluş şeması türüdür.

Örnek

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Yükleniyor

Paket adı 'orgchart' şeklindedir.

  google.charts.load('current', {packages: ['orgchart']});

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

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

Veri Biçimi

Her dizenin kuruluş şemasındaki bir düğümü temsil ettiği üç dize sütunlu bir tablo. Söz konusu üç sütun şunlardır:

  • 0. sütun - Düğüm kimliği. Tüm düğümler arasında benzersiz olması gerekir ve boşluklar dahil olmak üzere tüm karakterleri içerebilir. Bu bilgi düğümde gösterilir. Bunun yerine grafikte gösterilecek biçimlendirilmiş bir değer belirtebilirsiniz. Ancak biçimlendirilmemiş değer, kimlik olarak kullanılmaya devam eder.
  • Sütun 1 - [isteğe bağlı] Üst düğümün kimliği. Bu, başka bir satırın 0. sütunundaki biçimlendirilmemiş değer olmalıdır. Kök düğüm için belirtilmemiş olarak bırakın.
  • 2. sütun - [isteğe bağlı] Kullanıcı bu düğümün üzerine geldiğinde gösterilecek araç ipucu metni.

Her düğüm sıfır veya bir üst düğüme ve sıfır ya da daha fazla alt düğüme sahip olabilir.

Özel Özellikler

DataTable adlı setProperty() yöntemini kullanarak veri tablosu öğelerine aşağıdaki özel özellikleri atayabilirsiniz:

Mülk Adı
seçiliStil

Geçerlilik kapsamı: DataTable satırı

Seçildiğinde belirli bir düğüme atanacak bir satır içi stil dizesi. Bu özelliğin çalışması için allowHtml=true seçeneğini ayarlamalısınız. Görselleştirmede draw() kullanılmadan önce bu seçenek belirlenmelidir. Bu işlem, belirtilen düğüm için selectionColor seçeneğini geçersiz kılar.

Örnek: myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

style

Geçerlilik kapsamı: DataTable satırı

Belirli bir düğüme atanacak bir satır içi stil dizesi. Bu, selectedStyle özelliği tarafından geçersiz kılınır. Bunun için allowHtml=true seçeneğini ayarlamalısınız. Görselleştirmede draw() çağırmadan önce bu seçenek belirlenmelidir. Bu işlem, belirtilen düğüm için color seçeneğini geçersiz kılar.

Örnek:   myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

Yapılandırma Seçenekleri

Ad
Daralt

Çift tıklamanın bir düğümü daraltıp daraltamayacağını belirler.

Tür: boolean
Varsayılan: false
allowHtml

Doğru değerine ayarlanırsa HTML etiketlerini içeren adlar HTML olarak oluşturulur.

Tür: boolean
Varsayılan: false
renk

Kullanımdan kaldırıldı. Bunun yerine düğüm sınıfını kullanın. Kuruluş şeması öğelerinin arka plan rengi.

Tür: string
Varsayılan: '#edf7ff'
sıkıştırılmışSatırlar

Doğru değerine ayarlanırsa alt ağaçlar çakışmadığı sürece alt ağaçlar mümkün olduğunca yakın şekilde yerleştirilir. Toplam çizim genişliğini ve kenar uzunluğunu azaltmak için bu seçeneği kullanın.

Tür: boolean
Varsayılan: false
düğüm Sınıfı

Düğüm öğelerine atanacak bir sınıf adı. Grafik öğelerinin renklerini veya stillerini belirtmek için bu sınıf adına CSS uygulayın.

Tür: string
Varsayılan: default class name
SeçiliNoSınıf

Seçilen düğüm öğelerine atanacak bir sınıf adı. Seçilen grafik öğelerinin renklerini veya stillerini belirtmek için bu sınıf adına CSS uygulayın.

Tür: string
Varsayılan: default class name
renk seçimi

Kullanımdan kaldırıldı. Bunun yerine selectedNodeClass'ı kullanın. Seçilen kuruluş şeması öğelerinin arka plan rengi.

Tür: string
Varsayılan: '#d6e9f8'
boy

"small", "medium" veya "large"

Tür: string
Varsayılan: 'medium'

Yöntemler

Yöntem
collapse(row, collapsed)
Düğümü daraltır veya genişletir.
  • row - Genişletilecek veya daraltılacak satırın dizini.
  • collapsed Satırın genişletilip daraltılmadığı (true değerinin daraltılması anlamına gelir)
İade Türü: none
draw(data, options)

Grafiği çizer.

İade Türü: none
getChildrenIndexes(row)

Belirtilen düğümün alt dizinlerini içeren bir dizi döndürür.

Dönüş Türü Array.<number>
getCollapsedNodes

Daraltılmış düğümün dizinlerini içeren bir diziyi döndürür.

İade Türü: Array.<number>
getSelection()

Standart getSelection() uygulaması. Seçim öğelerinin tümü satır öğesidir. Seçilen birden fazla satırı döndürebilir.

Dönüş Türü: Seçim öğeleri dizisi
setSelection(selection)

Standart setSelection() uygulaması. Her seçim girişini satır seçimi olarak ele alır. Birden çok satırın seçimini destekler.

Dönüş Türü: yok

Etkinlikler

Ad
daralt

allowCollapse ayarı true olarak belirlendiğinde ve kullanıcı, çocuk içeren bir düğümü çift tıkladığında etkinlik tetiklenir.

Tesisler:
collapsed - Bunun bir "collapse" veya "expand" etkinliği olduğunu gösteren bir boole.
row - Veri tablosundaki satırın tıklanan düğüme karşılık gelen sıfır tabanlı dizini.
Onmouseover

Kullanıcı belirli bir satırın üzerine geldiğinde tetiklenir.

Tesisler:
row - Veri tablosundaki satırın sıfır olan dizini, üzerine gelinen düğüme karşılık gelir.
Onmouseout

Kullanıcı bir satırın üzerine geldiğinde tetiklenir.

Tesisler:
row - Veri tablosundaki satırın sıfır olan dizini, üzerine gelinen düğüme karşılık gelir.
seçer

Standart seçme etkinliği

Tesisler:
Yok
hazır

Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve yöntemleri yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir.

Tesisler:
Yok

Veri Politikası

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