Kuruluş Şeması

Genel bakış

Kuruluş şemaları, genellikle bir kuruluştaki üst/alt ilişkileri göstermek için kullanılan düğüm hiyerarşisi diyagramlarıdır. Aile ağacı bir tür kuruluş şeması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'.

  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 satırın kuruluş şemasındaki bir düğümü temsil ettiği, üç dize sütunu içeren bir tablo. Bu üç sütun şunlardır:

  • 0. Sütun: Düğüm kimliği. Tüm düğümler arasında benzersiz olmalıdır ve boşluklar dahil olmak üzere tüm karakterleri içerebilir. Bu, 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.
  • 1. Sütun - [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 belirtilmeden bırakın.
  • 2. Sütun - [isteğe bağlı] Kullanıcı bu düğümün üzerine geldiğinde gösterilecek ipucu metni.

Her düğümün sıfır veya bir üst düğümü ve sıfır veya daha fazla alt düğümü olabilir.

Özel Mülkler

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

Mülk Adı
selectedStyle

Applies To (Uygulandığı Yer:): DataTable satırı

Seçildiğinde belirli bir düğüme atanacak bir satır içi stil dizesi. Bunun çalışması için allowHtml=true seçeneğini ayarlamanız ve görselleştirmede draw() çağrısından önce ayarlamanız gerekir. 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

Applies To (Uygulandığı Yer:): DataTable satırı

Belirli bir düğüme atanacak bir satır içi stil dizesi. Bu, selectedStyle mülkü tarafından geçersiz kılınır. Bunun çalışması için allowHtml=true seçeneğini ayarlamanız ve görselleştirmede draw() çağrılmadan önce ayarlamanız gerekir. Bu, 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
allowCollapse

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

Tür: boolean
Varsayılan: false
allowHtml

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

Tür: boolean
Varsayılan: false
renk

Kullanımdan kaldırıldı. Bunun yerine nodeClass kullanın. Kuruluş şeması öğelerinin arka plan rengi.

Tür: string
Varsayılan: '#edf7ff'
compactRows

Doğru değerine ayarlanırsa alt ağaçlar, düğümler üst üste gelmediği sürece mümkün olduğunca yakın yerleştirilir. Çizimin genel genişliğini ve kenar uzunluğunu azaltmak için bu seçeneği kullanın.

Tür: boolean
Varsayılan: false
nodeClass

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

Tür: string
Varsayılan: default class name
selectedNodeClass

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

Tür: string
Varsayılan: default class name
selectionColor

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

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

"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 daraltılıp genişletilmeyeceğini belirler. Doğru değeri, daralt anlamına gelir.
İade Türü: none
draw(data, options)

Grafiği çizer.

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

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

İade Türü Array.<number>
getCollapsedNodes

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

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

Standart getSelection() uygulaması. Seçim öğelerinin tümü satır öğeleridir. Birden fazla seçili satır döndürülebilir.

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

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

Return Type (Dönüş Türü): yok

Etkinlikler

Ad
daralt

allowCollapse, true olarak ayarlandığında ve kullanıcı alt öğeleri olan bir düğümü çift tıkladığında tetiklenen etkinlik.

Mülkler:
collapsed - Bunun bir "daralt" veya "genişlet" etkinliği olduğunu gösteren boole değeri.
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.

Mülkler:
row - Veri tablosundaki satırın, fareyle üzerine gelindiği düğüme karşılık gelen sıfır tabanlı dizini.
onmouseout

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

Mülkler:
row - Veri tablosundaki satırın, farenin uzaklaştırıldığı düğüme karşılık gelen sıfır tabanlı dizini.
seç

Standart seçim etkinliği

Mülkler:
Yok
hazır

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 oluşturmanız ve yöntemleri yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir.

Mülkler:
Yok

Veri Politikası

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