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
Örnek: |
style |
Geçerlilik kapsamı: DataTable satırı
Belirli bir düğüme atanacak bir satır içi stil dizesi. Bu,
Örnek:
|
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.
İ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 Dönüş Türü: Seçim öğeleri dizisi
|
setSelection(selection) |
Standart
Dönüş Türü: yok
|
Etkinlikler
Ad | |
---|---|
daralt |
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 Tesisler:
Yok
|
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.