Organigramme

Présentation

Les organigrammes sont des diagrammes d'une hiérarchie de nœuds, couramment utilisés pour représenter les relations de niveau supérieur/subordonné au sein d'une organisation. Un arbre généalogique est un type d'organigramme.

Exemple

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

Chargement...

Le nom du package est 'orgchart'.

  google.charts.load('current', {packages: ['orgchart']});

Le nom de classe de la visualisation est google.visualization.OrgChart.

  var visualization = new google.visualization.OrgChart(container);

Format des données

Table contenant trois colonnes de chaîne, où chaque ligne représente un nœud de l'organigramme. Voici les trois colonnes:

  • Colonne 0 : ID du nœud. Il doit être unique parmi tous les nœuds et peut inclure n'importe quel caractère, y compris des espaces. Ceci est indiqué sur le nœud. Vous pouvez spécifier une valeur mise en forme à afficher à la place sur le graphique, mais la valeur non mise en forme est toujours utilisée comme ID.
  • Colonne 1 : [facultatif] ID du nœud parent. Il doit s'agir de la valeur non mise en forme de la colonne 0 d'une autre ligne. Ne spécifiez pas de nœud racine.
  • Colonne 2 – [facultatif] Texte de l'info-bulle à afficher lorsqu'un utilisateur pointe sur ce nœud.

Chaque nœud peut avoir zéro ou un nœud parent, et zéro, un ou plusieurs nœuds enfants.

Propriétés personnalisées

Vous pouvez attribuer les propriétés personnalisées suivantes aux éléments du tableau de données à l'aide de la méthode setProperty() de DataTable:

Nom de la propriété
selectedStyle

S'applique à:ligne du tableau de données

Chaîne de style intégré à attribuer à un nœud spécifique lorsqu'elle est sélectionnée. Vous devez définir l'option allowHtml=true pour que cela fonctionne, et elle doit être définie avant d'appeler draw() sur la visualisation. Cela remplace l'option selectionColor pour le nœud spécifié.

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

style

S'applique à:ligne du tableau de données

Chaîne de style intégré à attribuer à un nœud spécifique. Ceci est remplacé par la propriété selectedStyle. Vous devez définir l'option allowHtml=true pour que cela fonctionne, et elle doit être définie avant d'appeler draw() sur la visualisation. Cela remplace l'option color pour le nœud spécifié.

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

Options de configuration

Nom
allowCollapse

Détermine si un double-clic réduit un nœud.

Type : boolean
Par défaut:false
allowHtml

Si cette règle est définie sur "true", les noms qui incluent des balises HTML sont affichés au format HTML.

Type : boolean
Par défaut:false
color

Obsolète. Utilisez plutôt nodeClass. Couleur d'arrière-plan des éléments de l'organigramme.

Type : string
Par défaut:'#edf7ff'
compactRows

Si la valeur est définie sur "true", les sous-arborescences sont placées aussi près que possible tant que les nœuds ne se chevauchent pas. Utilisez cette option pour réduire la largeur globale du dessin et la longueur des bords.

Type : boolean
Par défaut:false
nodeClass

Nom de classe à attribuer aux éléments de nœud. Appliquez du code CSS à ce nom de classe pour spécifier les couleurs ou les styles des éléments du graphique.

Type : string
Par défaut:default class name
selectedNodeClass

Nom de classe à attribuer aux éléments de nœud sélectionnés. Appliquez du code CSS à ce nom de classe pour spécifier les couleurs ou les styles des éléments de graphique sélectionnés.

Type : string
Par défaut:default class name
selectionColor

Obsolète. Utilisez plutôt selectedNodeClass. Couleur d'arrière-plan des éléments de l'organigramme sélectionnés.

Type : string
Par défaut:'#d6e9f8'
taille

"small", "medium" ou "large"

Type : string
Par défaut:'medium'

Méthodes

Méthode
collapse(row, collapsed)
Réduit ou développe le nœud.
  • row : index de la ligne à développer ou à réduire.
  • collapsed Permet de réduire ou de développer la ligne. La valeur "true" correspond à la réduction.
Type renvoyé:none
draw(data, options)

Permet de dessiner le graphique.

Type renvoyé:none
getChildrenIndexes(row)

Renvoie un tableau avec les index des enfants du nœud donné.

Type renvoyé Array.<number>
getCollapsedNodes

Renvoie un tableau contenant la liste des index du nœud réduit.

Type renvoyé:Array.<number>
getSelection()

Implémentation standard de getSelection(). Les éléments de sélection sont tous des éléments de ligne. Peut renvoyer plusieurs lignes sélectionnées.

Type renvoyé:tableau d'éléments de sélection
setSelection(selection)

Implémentation standard de setSelection() . Traite chaque entrée de sélection comme une sélection de ligne. Accepte la sélection de plusieurs lignes.

Return Type (Type renvoyé) : aucun

Événements

Nom
réduire

Événement déclenché lorsque allowCollapse est défini sur true et que l'utilisateur double-clique sur un nœud avec des enfants.

Propriétés:
collapsed : booléen indiquant s'il s'agit d'un événement de type "réduction" ou "développer".
row : index de base zéro de la ligne de la table de données, correspondant au nœud sur lequel l'utilisateur clique.
onmouseover

Déclenchement lorsque l'utilisateur pointe sur une ligne spécifique.

Propriétés:
row : index basé sur zéro de la ligne de la table de données, correspondant au nœud sur lequel pointe le nœud.
onmouseout

Déclenchement lorsque l'utilisateur pointe en dehors d'une ligne.

Propriétés:
row : index basé sur zéro de la ligne de la table de données, correspondant au nœud à partir duquel le curseur est renvoyé.
select

Événement standard

Propriétés:
Aucun
prêt

Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw, puis les appeler uniquement après le déclenchement de l'événement.

Propriétés:
Aucun

Règles concernant les données

L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.