Organigramm

Ü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 allowHtml=true festlegen. Sie muss außerdem festgelegt werden, bevor draw() für die Visualisierung aufgerufen wird. Dadurch wird die Option selectionColor für den angegebenen Knoten überschrieben.

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

Stil

Gilt für: DataTable-Zeile

Ein Inline-Style-String, der einem bestimmten Knoten zugewiesen werden soll. Dies wird durch die Property selectedStyle überschrieben. Damit das funktioniert, müssen Sie die Option allowHtml=true festlegen, bevor Sie draw() für die Visualisierung aufrufen. Dadurch wird die Option color für den angegebenen Knoten überschrieben.

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

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.
  • row: Index der Zeile, die maximiert oder minimiert werden soll.
  • collapsed Gibt an, ob die Zeile minimiert oder maximiert werden soll, wobei "true" bedeutet, dass die Zeile minimiert werden soll.
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 getSelection()-Implementierung. Auswahlelemente sind alle Zeilenelemente. Es kann mehr als eine ausgewählte Zeile zurückgegeben werden.

Rückgabetyp:Array von Auswahlelementen
setSelection(selection)

Standardmäßige Implementierung von setSelection() . Behandelt jeden Auswahleintrag als Zeilenauswahl. Unterstützt die Auswahl mehrerer Zeilen.

Return Type: Kein

Ereignisse

Name
minimieren

Das Ereignis wird ausgelöst, wenn allowCollapse auf true gesetzt ist und der Nutzer auf einen Knoten mit untergeordneten Elementen doppelklickt.

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 draw aufrufen. Die Methoden müssen jedoch erst aufgerufen werden, nachdem das Ereignis ausgelöst wurde.

Eigenschaften:
Ohne

Datenrichtlinie

Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.