תרשימי גאנט

סקירה כללית

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

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

דוגמה פשוטה

 
<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 הווה הווה שעת ההתחלה של Compute.
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 תאריך תאריך 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 חיצים כלשהם בנתיב הקריטי יעוצבו באופן שונה.
gantt.criticalPathStyle אובייקט null אובייקט שמכיל את הסגנון של חיצים חשובים בנתיב.
gantt.criticalPathStyle.בחיפוש string null הצבע של כל אחד מהחצים הקריטיים בנתיב.
gantt.criticalPathStyle.tripWidth number 1.4 העובי של חיצים קריטיים בנתיב.
gantt.defaultStartDate תאריך/מספר null אם לא ניתן לחשב את תאריך ההתחלה מהערכים ב-DataTable, יוגדר תאריך ההתחלה. הזנת ערך date (new Date(YYYY, M, D)) או מספר, שהוא מספר האלפיות השנייה שישמשו.
gantt.innerGridHorizLine אובייקט null מגדיר את הסגנון של קווי הרשת האופקיים הפנימיים.
gantt.innerGridHorizLine.שחייה string null צבע הקווים האופקיים הפנימיים.
gantt.innerGridHorizLine.שחייהרוחב 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 נכון ממלאת את סרגל המשימות לפי אחוז ההשלמה של המשימה.
gantt.percentStyle.fill string null הצבע של החלק באחוזים שהושלם בשורת המשימות.
gantt.shadowEnabled boolean נכון אם המדיניות מוגדרת כ-true, משרטטת צל מתחת לכל שורת משימות שיש בה יחסי תלות.
gantt.shadowColor string '#000' מגדירה את צבע הצלליות מתחת לכל סרגל משימות שיש בו יחסי תלות.
gantt.shadowOffset number 1 הגדרת ההיסט, בפיקסלים, של הצלליות מתחת לכל סרגל משימות שיש בו יחסי תלות.
gantt.sortTasks boolean נכון מציינת שהמשימות צריכות להיות ממוינות באופן טופולוגי, אם הדבר נכון. אחרת, יש להשתמש באותו הסדר שבו מופיעות השורות התואמות של DataTable.
gantt.trackLevel number null הגובה של המסלולים.
רוחב number הרוחב של הרכיב שמכיל רוחב התרשים, בפיקסלים.
גובה number גובה האלמנט המכיל גובה התרשים, בפיקסלים.

שיטות

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

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

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

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

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

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

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

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

סוג החזרה: אין

אירועים

אירוע תיאור
click

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

נכסים: targetID
error

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

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

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

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

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

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

מדיניות נתונים

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