Présentation
Un diagramme de Gantt illustre la répartition d'un projet en tâches individuelles. Les graphiques Google Gantt illustrent le début, la fin et la durée des tâches d'un projet, ainsi que les dépendances éventuelles d'une tâche. Les graphiques de Gantt sont affichés dans le navigateur à l'aide de SVG. Comme tous les graphiques Google, les graphiques de Gantt affichent des info-bulles lorsque l'utilisateur passe la souris sur les données.
Remarque : Les diagrammes de Gantt ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (IE8 et les versions antérieures ne sont pas compatibles avec le format SVG, ce qui est requis pour les diagrammes de Gantt.)
Exemple simple
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['Research', 'Find sources', new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Write', 'Write paper', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var options = { height: 275 }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Aucune dépendance
Pour créer un graphique de Gantt sans dépendance, assurez-vous que la dernière valeur de chaque ligne de votre table de données est définie sur null
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['2014Spring', 'Spring 2014', 'spring', new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null], ['2014Summer', 'Summer 2014', 'summer', new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null], ['2014Autumn', 'Autumn 2014', 'autumn', new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null], ['2014Winter', 'Winter 2014', 'winter', new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null], ['2015Spring', 'Spring 2015', 'spring', new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null], ['2015Summer', 'Summer 2015', 'summer', new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null], ['2015Autumn', 'Autumn 2015', 'autumn', new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null], ['2015Winter', 'Winter 2015', 'winter', new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null], ['Football', 'Football Season', 'sports', new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null], ['Baseball', 'Baseball Season', 'sports', new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null], ['Basketball', 'Basketball Season', 'sports', new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null], ['Hockey', 'Hockey Season', 'sports', new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null] ]); var options = { height: 400, gantt: { trackHeight: 30 } }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Regrouper des ressources
Les tâches de même nature peuvent être regroupées à l'aide de ressources. Ajoutez une colonne de type string
à vos données (après les colonnes Task ID
et Task Name
), et assurez-vous que toutes les tâches devant être regroupées dans une ressource ont le même ID de ressource. Les ressources seront regroupées par couleur.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['Research', 'Find sources', null, new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Write', 'Write paper', 'write', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', 'write', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', 'complete', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', 'write', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var options = { height: 275 }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Calcul de la date de début, de fin et de la durée
Les diagrammes de Gantt acceptent trois valeurs concernant la durée de la tâche: une date de début, une date de fin et une durée (en millisecondes). Par exemple, s'il n'y a pas de date de début, le graphique peut calculer l'heure manquante en fonction de la date de fin et de la durée. Il en va de même pour le calcul de la date de fin. Si les dates de début et de fin sont indiquées, la durée peut être calculée entre les deux.
Consultez le tableau ci-dessous pour savoir comment Gantt gère le début, la fin et la durée dans différentes circonstances.
Introduction | Fin | Durée | Résultat |
---|---|---|---|
Présent | Présent | Présent | Vérifiez que la durée correspond aux heures de début et de fin. Lance une erreur en cas d'incohérence. |
Présent | Présent | Vide | Calcule la durée à partir des heures de début et de fin. |
Présent | Vide | Présent | Calcule l'heure de fin. |
Présent | Vide | Vide | Lance une erreur indiquant qu'il est impossible de calculer la durée ou l'heure de fin. |
Vide | Présent | Présent | Calcule l'heure de début. |
Vide | Vide | Présent |
Calcule l'heure de début en fonction des dépendances. Conjointement avec defaultStartDate , permet de dessiner le graphique en utilisant uniquement des durées.
|
Vide | Présent | Vide | Lance une erreur, car il est impossible de calculer l'heure de début ou la durée. |
Vide | Vide | Vide | La fonction renvoie une erreur, car il est impossible de calculer l'heure de début, l'heure de fin ou la durée. |
En gardant à l'esprit ce qui précède, vous pouvez créer un graphique indiquant le trajet domicile-travail habituel en utilisant uniquement la durée de chaque tâche.
<html> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load("current", { packages: ["gantt"] }); google.charts.setOnLoadCallback(drawChart); function toMilliseconds(minutes) { return minutes * 60 * 1000; } function drawChart() { var otherData = new google.visualization.DataTable(); otherData.addColumn("string", "Task ID"); otherData.addColumn("string", "Task Name"); otherData.addColumn("string", "Resource"); otherData.addColumn("date", "Start"); otherData.addColumn("date", "End"); otherData.addColumn("number", "Duration"); otherData.addColumn("number", "Percent Complete"); otherData.addColumn("string", "Dependencies"); otherData.addRows([ [ "toTrain", "Walk to train stop", "walk", null, null, toMilliseconds(5), 100, null, ], [ "music", "Listen to music", "music", null, null, toMilliseconds(70), 100, null, ], [ "wait", "Wait for train", "wait", null, null, toMilliseconds(10), 100, "toTrain", ], [ "train", "Train ride", "train", null, null, toMilliseconds(45), 75, "wait", ], [ "toWork", "Walk to work", "walk", null, null, toMilliseconds(10), 0, "train", ], [ "work", "Sit down at desk", null, null, null, toMilliseconds(2), 0, "toWork", ], ]); var options = { height: 275, gantt: { defaultStartDate: new Date(2015, 3, 28), }, }; var chart = new google.visualization.Gantt( document.getElementById("chart_div") ); chart.draw(otherData, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Chemin critique
Dans un graphique de Gantt, le chemin critique est le ou les chemins qui affectent directement la date de fin. Par défaut, le chemin critique dans les graphiques Google Gantt est rouge et peut être personnalisé à l'aide des options criticalPathStyle
. Vous pouvez également désactiver le chemin critique en définissant criticalPathEnabled
sur false
.
var options = { height: 275, gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } };
Flèches de style
Vous pouvez styliser les flèches de dépendance entre les tâches à l'aide des options gantt.arrow
:
var options = { height: 275, gantt: { criticalPathEnabled: false, // Critical path arrows will be the same as other arrows. arrow: { angle: 100, width: 5, color: 'green', radius: 0 } } };
Appliquer un style à des pistes
Le style de la grille est géré par une combinaison de innerGridHorizLine
, innerGridTrack
et innerGridDarkTrack
. Si vous ne définissez que l'élément innerGridTrack
, le graphique calcule une couleur plus sombre pour l'élément innerGridDarkTrack
. Toutefois, si vous ne définissez que l'élément innerGridDarkTrack
, innerGridTrack
utilisera sa couleur par défaut et ne calculera pas une couleur plus claire.
var options = { height: 275, gantt: { criticalPathEnabled: false, innerGridHorizLine: { stroke: '#ffe0b2', strokeWidth: 2 }, innerGridTrack: {fill: '#fff3e0'}, innerGridDarkTrack: {fill: '#ffcc80'} } };
Chargement...
Le nom du package google.charts.load
est "gantt"
.
google.charts.load("current", {packages: ["gantt"]});
Le nom de classe de la visualisation est google.visualization.Gantt
.
var chart = new google.visualization.Gantt(container);
Format des données
Lignes:chaque ligne du tableau représente une tâche.
Columns:
Colonne 0 | Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 | Colonne 5 | Colonne 6 | Colonne 7 | |
---|---|---|---|---|---|---|---|---|
Objectif : | ID de tâche | Nom de la tâche | ID de ressource (facultatif) | Introduction | Fin | Durée (en millisecondes) | Pourcentage terminé | Dépendances |
Type de données: | chaîne | chaîne | chaîne | date | date | number (nombre) | number (nombre) | chaîne |
Rôle : | domaine | données | données | données | données | données | données | données |
Options de configuration
Nom | Type | Par défaut | Description |
---|---|---|---|
backgroundColor.fill | chaîne | "blanc" | Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML. |
gantt.flèche | objet | nul |
Pour les diagrammes de Gantt, gantt.arrow contrôle les différentes propriétés des flèches qui relient les tâches.
|
gantt.flèche.angle | number (nombre) | 45 | Angle de la tête de la flèche. |
gantt.flèche.color | chaîne | "#000" | Couleur des flèches. |
longueur.gantt.arrow.length | number (nombre) | 8 | Longueur de la tête de la flèche. |
gantt.flèche.rayon | number (nombre) | 15 | Rayon de définition de la courbe de flèche entre deux tâches. |
gantt.arrow.spaceAprès | number (nombre) | 4 | Nombre d'espaces blancs entre la tête d'une flèche et la tâche vers laquelle elle pointe. |
gantt.arrow.width | number (nombre) | 1.4 | Largeur des flèches. |
gantt.barCornerRadius | number (nombre) | 2 | Rayon de définition de la courbe des angles d'une barre. |
hauteur.barHauteur | number (nombre) | nul | Hauteur des barres des tâches. |
gantt.criticalPathEnabled | booléen | true |
Si la valeur est true , les flèches du chemin critique sont stylisées différemment.
|
gantt.criticalPathStyle | objet | nul | Objet contenant le style des flèches de tracé critiques. |
gantt.criticalPathStyle.stroke | chaîne | nul | Couleur des flèches de cheminement critiques. |
gantt.criticalPathStyle.strokeWidth | number (nombre) | 1.4 | L'épaisseur des flèches de tracé critiques |
gantt.defaultStartDate | date/numéro | nul |
Si la date de début ne peut pas être calculée à partir des valeurs du tableau de données, la date de début sera définie sur cette valeur. Accepte une valeur date (new Date(YYYY, M, D) ) ou un nombre, c'est-à-dire le nombre de millisecondes à utiliser.
|
gantt.innerGridHorizLine | objet | nul | Définit le style des lignes de la grille horizontale intérieure. |
gantt.intérieurGridHorizLine.stroke | chaîne | nul | Couleur des lignes de la grille horizontale interne. |
gantt.innerGridHorizLine.strokeWidth | number (nombre) | 1 | Largeur des lignes intérieures de la grille horizontale. |
gantt.innerGridTrack.fill | chaîne | nul |
Couleur de remplissage de la piste intérieure de la grille. Si aucun innerGridDarkTrack.fill n'est spécifié, cette valeur sera appliquée à chaque titre de la grille.
|
gantt.innerGridDarkTrack.fill | chaîne | nul | Couleur de remplissage de la piste de grille intérieure alternative |
gantt.labelMaxWidth | number (nombre) | 300 | Espace maximal autorisé pour chaque libellé de tâche. |
gantt.labelStyle | objet | nul |
Objet contenant les styles des libellés de tâche. labelStyle: { fontName: Roboto2, fontSize: 14, color: '#757575' }, |
gantt.percentEnabled | booléen | true | Remplit la barre des tâches en fonction du pourcentage de tâches terminées. |
gantt.percentStyle.fill | chaîne | nul | Couleur de la partie en pourcentage terminée d'une barre des tâches. |
gantt.shadowEnabled | booléen | true |
Si la valeur est true , dessine une ombre sous chaque barre des tâches comportant des dépendances.
|
gantt.shadowColor | chaîne | "#000" | Définit la couleur des ombres sous toute barre de tâches comportant des dépendances. |
gantt.shadowOffset | number (nombre) | 1 | Définit le décalage, en pixels, des ombres sous toute barre de tâches comportant des dépendances. |
gantt.sortTasks | booléen | true | Spécifie que les tâches doivent être triées de façon topologique, si la valeur est "true". Sinon, utilisez le même ordre que les lignes correspondantes de la table de données. |
gantt.trackHeight | number (nombre) | nul | Hauteur des pistes. |
largeur | number (nombre) | La largeur de l'élément conteneur | Largeur du graphique, en pixels. |
hauteur | number (nombre) | hauteur de l'élément conteneur | hauteur du graphique, en pixels. |
Méthodes
Method | Description |
---|---|
draw(data, options) |
Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type de retour) : aucun
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi : tableau des éléments de sélection
|
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
Événement | Description |
---|---|
click |
Déclenché lorsque l'utilisateur clique dans le graphique Permet d'identifier le clic sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Properties (Propriétés) : targetID
|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
ready |
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 Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles concernant les 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.