Organigramme

Présentation

Les organigrammes sont des diagrammes d'une hiérarchie de nœuds, couramment utilisés pour représenter des relations supérieures/subordonnées dans une organisation. L'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

Une table avec trois colonnes de type chaîne, chaque ligne représentant un nœud dans 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 illustré sur le nœud. Vous pouvez spécifier une valeur formatée à afficher sur le graphique, mais la valeur non formatée est toujours utilisée comme ID.
  • Colonne 1 : [facultatif] ID du nœud parent. Il doit s'agir de la valeur non formatée de la colonne 0 d'une autre ligne. Laissez non spécifié pour un nœud racine.
  • Colonne 2 : [facultatif] Texte d'info-bulle à afficher lorsqu'un utilisateur passe la souris sur ce nœud.

Chaque nœud peut avoir zéro ou un nœud parent et zéro 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 propriété
style sélectionné

S'applique à : ligne DataTable

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

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

style

S'applique à:ligne DataTable

Chaîne de style intégrée à attribuer à un nœud spécifique. Elle est remplacée par la propriété selectedStyle. Vous devez définir l'option allowHtml=true pour que cela fonctionne. Elle doit être définie avant d'appeler draw() sur la visualisation. Cette action 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 le double-clic réduit un nœud.

Type : boolean
Par défaut:false
allowHtml

Si ce paramètre est défini sur "true", les noms qui incluent des balises HTML seront affichés au format HTML.

Type : boolean
Par défaut:false
couleur

Obsolète. Utilisez nodeClass à la place. Couleur d'arrière-plan des éléments de l'organigramme.

Type : string
Par défaut : '#edf7ff'
lignes compactes

Si la valeur est "true", les sous-arborescences sont placées aussi près que possible tant que les nœuds ne se chevauchent pas. Cette option permet de réduire la largeur et la longueur totale des dessins.

Type : boolean
Par défaut : false
Classe de nœuds

Nom de classe à attribuer aux éléments du 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
Classe NodeNode sélectionnée

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
couleur de la sélection

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

"petit", "moyen" ou "grand"

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 Indique si la ligne doit être réduite ou développée, où "true" correspond à la réduction.
Type de retour : none
draw(data, options)

Dessine le graphique.

Type de retour: none
getChildrenIndexes(row)

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

Type de retour Array.<number>
getCollapsedNodes

Renvoie un tableau contenant la liste des index du nœud avant expansion.

Type de retour: Array.<number>
getSelection()

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

Type de renvoi:tableau des éléments de sélection
setSelection(selection)

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

Return Type (Type de retour) : 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 : valeur booléenne indiquant s'il s'agit d'un événement "collapse" ou "expand".
row : index basé sur zéro de la ligne de la table de données, correspondant au nœud sur lequel l'utilisateur a cliqué.
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 de la souris.
Onmouseout

Déclenchement lorsque l'utilisateur passe la souris sur une ligne.

Propriétés :
row : index basé sur zéro de la ligne de la table de données, correspondant au nœud dont le curseur a été déplacé.
select

Événement de sélection standard

Propriétés:
Aucune
prêt

Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw et de n'appeler les méthodes qu'une fois l'événement déclenché.

Propriétés:
Aucune

Règles relatives aux données

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