סקירה כללית
תרשים גאנט הוא סוג של תרשים שמציג את פירוט הפרויקט למשימות הרכיב שלו. התרשימים של 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) |
משרטט את התרשים. התרשים מקבל קריאות נוספות לשיטה רק אחרי
האירוע סוג החזרה: אין
|
getSelection() |
היא מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שניתן לבחור הן עמודות, ערכי אגדה וקטגוריות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של רכיבי בחירה
|
setSelection() |
בחירת ישויות התרשים שצוינו. ביטול כל בחירה קודמת.
ישויות שניתן לבחור הן עמודות, ערכי אגדה וקטגוריות.
בתרשים הזה אפשר לבחור רק ישות אחת בכל פעם.
סוג החזרה: אין
|
clearChart() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: אין
|
אירועים
אירוע | תיאור |
---|---|
click |
מופעל כשהמשתמש לוחץ על התרשים. ניתן להשתמש בו כדי לזהות את הלחיצות על הכותרת, רכיבי הנתונים, הערכים במקרא, הציר, קווי הרשת או התוויות. נכסים: targetID
|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
ready |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם
שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני שמתקשרים אל השיטה מאפיינים: ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר מאפיינים: ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.