תרשימי גאנט

סקירה כללית

תרשים גאנט הוא סוג של תרשים שממחיש את פירוט הפרויקט למשימות הרכיבים שלו. בתרשימי Google Gantt אפשר לראות את ההתחלה, הסיום ומשך הזמן של משימות בפרויקט, וגם את יחסי התלות שיש למשימה. תרשימי Google Gantt מעובדים בדפדפן באמצעות SVG. כמו כל התרשימים של Google, בתרשימי גאנט מוצגים הסברים קצרים כשהמשתמש מעביר את העכבר מעל הנתונים.

הערה: תרשימי גאנט לא יפעלו בגרסאות ישנות של Internet Explorer. (IE8 וגרסאות קודמות לא תומכות ב-SVG, מה שמחייב תרשימי גאנט).

דוגמה פשוטה

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

אין יחסי תלות

כדי ליצור תרשים גאנט ללא יחסי תלות, צריך לוודא שהערך האחרון בכל שורה ב-DataTable מוגדר ל-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>

קיבוץ משאבים

אפשר לקבץ יחד משימות דומות באמצעות משאבים. מוסיפים לנתונים עמודה מסוג string (אחרי העמודות Task ID ו-Task Name), ומוודאים שלכל המשימות שאתם רוצים לקבץ במשאב יש אותו מזהה משאב. המשאבים יקובצו לפי צבע. 

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

חישוב התחלה/סיום/משך זמן

תרשימי גאנט מקבלים שלושה ערכים הקשורים למשך המשימה: תאריך התחלה, תאריך סיום ומשך זמן (באלפיות שנייה). לדוגמה, אם אין תאריך התחלה, התרשים יכול לחשב את הזמן החסר על סמך תאריך הסיום ומשך הזמן. אותו עיקרון חל על חישוב תאריך הסיום. אם ציינתם גם את תאריך ההתחלה וגם את תאריך הסיום, אפשר לחשב את משך הזמן בין השניים.

בטבלה שבהמשך מפורטת רשימה של האופן שבו Gantt מטפל בנוכחות של התחלה, סיום ומשך זמן בנסיבות שונות.

התחלה סיום משך הקורס תוצאה
הצגה הצגה הצגה צריך לבדוק שמשך הזמן תואם לזמני ההתחלה והסיום. אם יש חוסר עקביות, הפעולה גורמת לשגיאה.
הצגה הצגה Null הפונקציה מחשבת את משך הזמן משעת ההתחלה והסיום.
הצגה Null הצגה מחשב את שעת הסיום.
הצגה Null Null גורם לשגיאה מסוג 'לא ניתן לחשב את משך הזמן או את שעת הסיום'.
Null הצגה הצגה שעת ההתחלה של המחשוב.
Null Null הצגה מחשבת את שעת ההתחלה על סמך יחסי תלות. בשילוב עם defaultStartDate, אפשר לצייר תרשים באמצעות משכי זמן בלבד.
Null הצגה Null גורם לשגיאה מסוג "לא ניתן לחשב את שעת ההתחלה או את משך הזמן".
Null Null Null גורם לשגיאה מסוג "לא ניתן לחשב את שעת ההתחלה, שעת הסיום או משך הזמן".

לאור מה שקרה למעלה, אפשר ליצור תרשים שמפרט את משך הנסיעה היומית לעבודה בדרך כלל, תוך שקלול משך הזמן של כל משימה. 

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

נתיב קריטי

הנתיב הקריטי בתרשים גאנט הוא הנתיב, או הנתיבים, שמשפיעים ישירות על תאריך הסיום. הנתיב הקריטי בתרשימים של Google Gantt צבוע באדום כברירת מחדל, ואפשר להתאים אותו אישית באמצעות האפשרויות של criticalPathStyle. אפשר גם להשבית את הנתיב הקריטי על ידי הגדרה של criticalPathEnabled ל-false. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

חיצים לעיצוב

אפשר לעצב את חיצי התלות בין משימות באמצעות האפשרויות של 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
            }
          }
        };

עיצוב טראקים

עיצוב הרשת מטופל על ידי שילוב של innerGridHorizLine, innerGridTrack ו-innerGridDarkTrack. אם מגדירים רק את הערך innerGridTrack, התרשים תחשב צבע כהה יותר ל-innerGridDarkTrack. אבל אם מגדירים רק את הערך innerGridDarkTrack, הצבע של innerGridTrack ישתמש בצבע ברירת המחדל ולא ייחשב עבור צבע בהיר יותר. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

בטעינה

שם החבילה של google.charts.load הוא "gantt". 

  google.charts.load("current", {packages: ["gantt"]});

שם הכיתה של התצוגה החזותית הוא google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

פורמט נתונים

שורות: כל שורה בטבלה מייצגת משימה.

עמודות:

  עמודה 0 עמודה 1 עמודה 2 עמודה 3 עמודה 4 עמודה 5 עמודה 6 עמודה 7
מטרה: מזהה המשימה שם המשימה מזהה משאב (אופציונלי) התחלה סיום משך זמן (באלפיות שנייה) אחוזים הושלמו יחסי תלות
סוג הנתונים: string string string date date number number string
תפקיד: דומיין נתונים נתונים נתונים נתונים נתונים נתונים נתונים

 

אפשרויות הגדרה

שם סוג ברירת המחדל תיאור
backgroundColor.fill string 'לבן' צבע המילוי של התרשים, כמחרוזת של צבע HTML.
gantt.arrow אובייקט null בתרשימי גאנט, הפונקציה gantt.arrow קובעת את המאפיינים השונים של החיצים שמחברים בין משימות.
gantt.arrow.angle number 45 הזווית של ראש החץ.
gantt.arrow.color string '#000' צבע החיצים.
gantt.arrow.length number 8 אורך הראש של החץ.
gantt.arrow.radius number 15 הרדיוס להגדרת עקומת החץ בין שתי משימות.
gantt.arrow.spaceAfter number 4 כמות הרווח הלבן בין ראש החץ לבין המשימה שאליה הוא מפנה.
gantt.arrow.width number 1.4 רוחב החיצים.
gantt.barCornerRadius number 2 הרדיוס להגדרת העקומה של פינות עמודה.
gantt.barHeight number null גובה העמודות של המשימות.
gantt.criticalPathEnabled boolean true אם true חיצים בנתיב הקריטי יעוצבו באופן שונה.
gantt.criticalPathStyle אובייקט null אובייקט שמכיל את הסגנון של כל חיצים של נתיב קריטי.
gantt.criticalPathStyle.stroke string null הצבע של כל חיצים בנתיב קריטי.
gantt.criticalPathStyle.strokeWidth number 1.4 העובי של חיצים של נתיב קריטי.
gantt.defaultStartDate תאריך/מספר null אם לא ניתן לחשב את תאריך ההתחלה מהערכים ב-DataTable, תאריך ההתחלה יוגדר כך. מקבל ערך של date (new Date(YYYY, M, D)) או מספר, שהוא מספר אלפיות השנייה שצריך להשתמש בהן.
gantt.innerGridHorizLine אובייקט null מגדיר את הסגנון של קווי הרשת האופקיים הפנימיים.
gantt.innerGridHorizLine.stroke string null הצבע של קווי הרשת האופקיים הפנימיים.
gantt.innerGridHorizLine.strokeWidth number 1 הרוחב של קווי הרשת האופקיים הפנימיים.
gantt.innerGridTrack.fill string null צבע המילוי של מסלול הרשת הפנימי. אם לא תציינו ערך innerGridDarkTrack.fill, המאפיין יחול על כל מסלולי הרשת.
gantt.innerGridDarkTrack.fill string null צבע המילוי של מסלול הרשת החלופי הכהה הפנימי.
gantt.labelMaxWidth number 300 זהו המקום המקסימלי שמותר לכל תווית משימה.
gantt.labelStyle אובייקט null

אובייקט שמכיל את הסגנונות של תוויות המשימות.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean true מילוי שורת המשימות על סמך האחוז שהושלם עבור המשימה.
gantt.percentStyle.fill string null הצבע של החלק באחוזים שהושלם בסרגל האפליקציות.
gantt.shadowEnabled boolean true אם המדיניות מוגדרת לערך true, מציירים צל מתחת לכל שורת משימות שיש בה יחסי תלות.
gantt.shadowColor string '#000' מגדירה את צבע הצלליות מתחת לכל שורת משימות שיש בה תלות.
gantt.shadowOffset number 1 מגדירה את ההיסט, בפיקסלים, של הצלליות מתחת לכל סרגל משימות שיש בו תלות.
gantt.sortTasks boolean true מציינת שהמשימות צריכות להיות ממוינות לפי טופולוגיה, אם הערך שלהן הוא True. אחרת, המערכת תשתמש באותו סדר כמו השורות התואמות ב-DataTable.
gantt.trackHeight number null הגובה של המסלולים.
רוחב number רוחב הרכיב שמכיל רוחב התרשים, בפיקסלים.
גובה number גובה הרכיב שמכיל גובה התרשים בפיקסלים.

שיטות

שיטה תיאור
draw(data, options)

מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע ready מופעל. Extended description.

סוג החזרה: ללא
getSelection()

מחזירה מערך של ישויות התרשים שנבחרו. ישויות שניתן לבחור הן עמודות, רשומות מקרא וקטגוריות. עבור התרשים הזה, ניתן לבחור רק ישות אחת בכל רגע נתון. Extended description .

סוג החזרה: מערך של רכיבי בחירה
setSelection()

בחירת ישויות התרשים שצוינו. ביטול הבחירה הקודמת. ישויות שניתן לבחור הן עמודות, רשומות מקרא וקטגוריות. בתרשים הזה ניתן לבחור רק ישות אחת בכל פעם. Extended description .

סוג החזרה: ללא
clearChart()

ניקוי התרשים וכל המשאבים שהוקצו לו.

סוג החזרה: ללא

אירועים

אירוע תיאור
click

מופעל כשהמשתמש לוחץ על התרשים. יכול לשמש כדי לזהות מתי לוחצים על הכותרת, רכיבי הנתונים, רשומות המקרא, הצירים, קווי הרשת או התוויות.

נכסים: targetID
error

מופעל כשמתרחשת שגיאה בניסיון לעבד את התרשים.

מאפיינים: מזהה, הודעה
ready

התרשים מוכן לקריאות method חיצוניות. כדי לבצע אינטראקציה עם התרשים, ושל שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את ה-method draw, ולקרוא לו רק אחרי שהאירוע הופעל.

מאפיינים:ללא
select

מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר getSelection().

מאפיינים:ללא

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.