Übersicht
Organigramme sind Diagramme einer Hierarchie von Knoten, die häufig verwendet werden, um übergeordnete/untergeordnete Beziehungen in einer Organisation darzustellen. Ein Familienstammbaum ist eine Art von Organisationsdiagramm.
Beispiel
<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>
Wird geladen
Der Paketname lautet 'orgchart'
.
google.charts.load('current', {packages: ['orgchart']});
Der Klassenname der Visualisierung lautet google.visualization.OrgChart
.
var visualization = new google.visualization.OrgChart(container);
Datenformat
Eine Tabelle mit drei Stringspalten, wobei jede Zeile einen Knoten im Organigramm darstellt. Hier sind die drei Spalten:
- Spalte 0: Die Knoten-ID. Er muss unter allen Knoten eindeutig sein und kann beliebige Zeichen einschließlich Leerzeichen enthalten. Dies wird auf dem Knoten angezeigt. Sie können stattdessen einen formatierten Wert angeben, der im Diagramm angezeigt werden soll, der unformatierte Wert wird jedoch weiterhin als ID verwendet.
- Spalte 1: [optional] Die ID des übergeordneten Knotens. Dabei sollte es sich um den unformatierten Wert aus Spalte 0 einer anderen Zeile handeln. Geben Sie keinen Wert für einen Root-Knoten an.
- Spalte 2: [optional] Kurzinfo, der angezeigt werden soll, wenn ein Nutzer den Mauszeiger auf diesen Knoten bewegt.
Jeder Knoten kann null oder einen übergeordneten Knoten und null oder mehr untergeordnete Knoten haben.
Benutzerdefinierte Eigenschaften
Mit der Methode setProperty()
von DataTable
können Sie Datentabellenelementen die folgenden benutzerdefinierten Eigenschaften zuweisen:
Eigenschaftsname | |
---|---|
selectedStyle |
Gilt für: DataTable-Zeile
Ein Inline-Style-String, der einem bestimmten Knoten zugewiesen wird, wenn er ausgewählt ist. Damit dies funktioniert, müssen Sie die Option
Beispiel: |
Stil |
Gilt für: DataTable-Zeile
Ein Inline-Style-String, der einem bestimmten Knoten zugewiesen werden soll. Dies wird durch die Property
Beispiel:
|
Konfigurationsoptionen
Name | |
---|---|
allowCollapse |
Legt fest, ob ein Knoten durch einen Doppelklick minimiert wird. Typ:
boolean Standard:
false |
allowHtml |
Wenn die Richtlinie auf „true“ gesetzt ist, werden Namen, die HTML-Tags enthalten, als HTML gerendert. Typ:
boolean Standard:
false |
Farbe |
Eingestellt. Verwenden Sie stattdessen nodeClass. Die Hintergrundfarbe der Orgchart-Elemente. Typ:
string Standard:
'#edf7ff' |
compactRows |
Wenn dieser Wert auf „true“ gesetzt ist, werden Unterstrukturen so nah wie möglich platziert, solange sich Knoten nicht überschneiden. Verwenden Sie diese Option, um die Breite und Kantenlänge der Zeichnung insgesamt zu reduzieren. Typ:
boolean Standard:
false |
nodeClass |
Ein Klassenname, der Knotenelementen zugewiesen werden soll. Wenden Sie CSS auf diesen Klassennamen an, um Farben oder Stile für die Diagrammelemente anzugeben. Typ:
string Standard:
default class name |
selectedNodeClass |
Ein Klassenname, der ausgewählten Knotenelementen zugewiesen werden soll. Wenden Sie CSS auf diesen Klassennamen an, um Farben oder Stile für ausgewählte Diagrammelemente anzugeben. Typ:
string Standard:
default class name |
selectionColor |
Eingestellt. Verwenden Sie stattdessen „selectNodeClass“. Die Hintergrundfarbe der ausgewählten Orgchart-Elemente. Typ:
string Standard:
'#d6e9f8' |
Größe |
'S', 'M' oder 'L' Typ:
string Standard:
'medium' |
Methoden
Methode | |
---|---|
collapse(row, collapsed) |
Minimiert oder maximiert den Knoten.
Rückgabetyp:
none |
draw(data, options) |
Zeichnet das Diagramm. Rückgabetyp:
none |
getChildrenIndexes(row) |
Gibt ein Array mit den Indizes der untergeordneten Elemente des angegebenen Knotens zurück. Rückgabetyp
Array.<number> |
getCollapsedNodes |
Gibt ein Array mit der Liste der Indexe des minimierten Knotens zurück. Rückgabetyp:
Array.<number> |
getSelection() |
Standardmäßige Rückgabetyp:Array von Auswahlelementen
|
setSelection(selection) |
Standardmäßige Implementierung von
Return Type: Kein
|
Ereignisse
Name | |
---|---|
minimieren |
Das Ereignis wird ausgelöst, wenn Eigenschaften:
collapsed : ein boolescher Wert, der angibt, ob es sich um ein Ereignis vom Typ „Minimieren“ oder „Maximieren“ handelt.
row : Der nullbasierte Index der Zeile in der Datentabelle, die dem angeklickten Knoten entspricht.
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine bestimmte Zeile bewegt. Eigenschaften:
row : Der nullbasierte Index der Zeile in der Datentabelle, die dem Knoten entspricht, über den der Mauszeiger bewegt wird.
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger über eine Zeile bewegt. Eigenschaften:
row : Der nullbasierte Index der Zeile in der Datentabelle, der dem Knoten entspricht, von dem die Maus ausgeschlossen wird.
|
auswählen |
Standardauswahl-Ereignis Eigenschaften:
Ohne
|
bereit |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Eigenschaften:
Ohne
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.