Organigramm

Übersicht

Organigramme sind Diagramme einer Hierarchie von Knoten. Diese werden häufig verwendet, um übergeordnete/untergeordnete Beziehungen in einer Organisation darzustellen. Eine Familienstruktur ist eine Art Organigramm.

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 Orgchart darstellt. Hier die drei Spalten:

  • Spalte 0: die Knoten-ID Er sollte unter allen Knoten eindeutig sein und kann beliebige Zeichen, einschließlich Leerzeichen, enthalten. Dies wird auf dem Knoten angezeigt. Sie können auch einen formatierten Wert angeben, der stattdessen im Diagramm angezeigt werden soll. Der unformatierte Wert wird jedoch weiterhin als ID verwendet.
  • Spalte 1: [optional] Die ID des übergeordneten Knotens. Dies sollte der unformatierte Wert aus Spalte 0 einer anderen Zeile sein. Nicht angegeben für Root-Knoten.
  • Spalte 2: [optional] Kurzinfo, die angezeigt wird, 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 Attribute zuweisen:

Eigenschaftsname
ausgewählter Stil

Gilt für: DataTable-Zeile

Ein String im Inlinestil, der bei der Auswahl einem bestimmten Knoten zugewiesen werden soll. Damit dies funktioniert, müssen Sie die Option allowHtml=true festlegen. Sie muss festgelegt werden, bevor draw() in der Visualisierung aufgerufen wird. Dadurch wird die Option selectionColor für den angegebenen Knoten überschrieben.

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

style

Gilt für: DataTable-Zeile

Ein Inline-Stilstring, der einem bestimmten Knoten zugewiesen werden soll. Dies wird durch die Property selectedStyle überschrieben. Damit dies funktioniert, müssen Sie die Option allowHtml=true festlegen. Sie muss festgelegt werden, bevor draw() in der Visualisierung aufgerufen wird. 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'
kompakteZeilen

Wenn die Richtlinie auf „true“ gesetzt wird, werden untergeordnete Strukturen so nah wie möglich platziert, sofern sich die Knoten nicht überschneiden. Mit dieser Option können Sie die Gesamtbreite und -länge der Zeichnung reduzieren.

Typ: boolean
Standard: false
Knotenklasse

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 den 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
Auswahlfarbe

Eingestellt. Verwenden Sie stattdessen selectedNodeClass. Die Hintergrundfarbe ausgewählter Orgchart-Elemente.

Typ: string
Standard: '#d6e9f8'
Größe

„Klein“, „Mittel“ oder „Groß“

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 wahr die Minimierung ist.
Rückgabetyp: none
draw(data, options)

Zeichnet das Diagramm.

Rückgabetyp: none
getChildrenIndexes(row)

Gibt ein Array mit den Indexen 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()

Standardimplementierung für getSelection(). Auswahlelemente sind alle Zeilenelemente. Kann mehrere ausgewählte Zeilen zurückgeben.

Rückgabetyp: Array von Auswahlelementen
setSelection(selection)

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

Rückgabetyp: Keine

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 zum Minimieren oder Maximieren handelt.
row: Der nullbasierte Index der Zeile in der Datentabelle, der 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, der dem Knoten entspricht, über den der Mauszeiger bewegt wird.
Onmouseout

Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine Zeile bewegt

Eigenschaften:
row: Der nullbasierte Index der Zeile in der Datentabelle, der dem Knoten entspricht, aus dem der Mauszeiger entfernt wird.
wähle

Standardauswahlereignis

Eigenschaften:
–
bereit

Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Die Methoden müssen erst aufgerufen werden, nachdem das Ereignis ausgelöst wurde.

Eigenschaften:
–

Datenrichtlinie

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.