Cette page a été traduite par l'API Cloud Translation.

Organigramme

Overview
Exemple
Loading
Format des données
- Propriétés personnalisées
Options de configuration
Méthodes
Événements
Règles concernant les données

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

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});
      }

<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

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');`

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.