بررسی اجمالی
نمودار گانت نوعی نمودار است که تجزیه پروژه را به وظایف اجزای آن نشان می دهد. نمودارهای Google Gantt شروع، پایان و مدت کارها در یک پروژه و همچنین وابستگی هایی که ممکن است یک کار داشته باشد را نشان می دهد. نمودارهای Google Gantt در مرورگر با استفاده از SVG ارائه می‌شوند. مانند همه نمودارهای گوگل، نمودارهای گانت وقتی کاربر روی داده ها قرار می گیرد، نکات ابزار را نمایش می دهد.
توجه: نمودار گانت در نسخه های قدیمی اینترنت اکسپلورر کار نخواهد کرد. (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>
شروع/پایان/مدت محاسبات
نمودار گانت سه مقدار مربوط به مدت زمان کار را می پذیرد: تاریخ شروع، تاریخ پایان و مدت زمان (بر حسب میلی ثانیه). به عنوان مثال، اگر تاریخ شروع وجود نداشته باشد، نمودار می تواند زمان از دست رفته را بر اساس تاریخ پایان و مدت زمان محاسبه کند. در مورد محاسبه تاریخ پایان نیز همینطور است. اگر تاریخ شروع و پایان هر دو داده شود، مدت زمان را می توان بین این دو محاسبه کرد.
برای فهرستی از نحوه مدیریت گانت با شروع، پایان و مدت زمان در شرایط مختلف، جدول زیر را ببینید.
| شروع کنید | پایان | مدت زمان | نتیجه |
|---|---|---|---|
| حاضر | حاضر | حاضر | بررسی کنید که مدت زمان با زمان شروع/پایان مطابقت داشته باشد. در صورت ناسازگاری خطا می دهد. |
| حاضر | حاضر | خالی | مدت زمان شروع و پایان را محاسبه می کند. |
| حاضر | خالی | حاضر | زمان پایان را محاسبه می کند. |
| حاضر | خالی | خالی | خطا را به‌عنوان ناتوانی در محاسبه مدت یا زمان پایان نشان می‌دهد. |
| خالی | حاضر | حاضر | زمان شروع را محاسبه می کند. |
| خالی | خالی | حاضر | زمان شروع را بر اساس وابستگی ها محاسبه می کند. در ارتباط با defaultStartDate ، نمودار را قادر می سازد که فقط با استفاده از مدت زمان رسم شود. |
| خالی | حاضر | خالی | خطا را به‌عنوان ناتوانی در محاسبه زمان شروع یا مدت پرتاب می‌کند. |
| خالی | خالی | خالی | خطا را به‌عنوان ناتوان در محاسبه زمان شروع، زمان پایان یا مدت نشان می‌دهد. |
با در نظر گرفتن موارد فوق، می توانید نموداری ایجاد کنید که یک رفت و آمد معمولی به محل کار را تنها با استفاده از مدت زمان هر کار مشخص می کند.
<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>
مسیربحرانی
مسیر بحرانی در نمودار گانت مسیر یا مسیرهایی است که مستقیماً بر تاریخ پایان تأثیر می گذارد. مسیر بحرانی در نمودارهای گوگل گانت به طور پیش فرض قرمز رنگ است و می توان آن را با استفاده از گزینه های 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 | |
|---|---|---|---|---|---|---|---|---|
| هدف: | شناسه وظیفه | نام وظیفه | شناسه منبع (اختیاری) | شروع کنید | پایان | مدت زمان (بر حسب میلی ثانیه) | درصد تکمیل شد | وابستگی ها |
| نوع داده: | رشته | رشته | رشته | تاریخ | تاریخ | عدد | عدد | رشته |
| نقش: | دامنه | داده ها | داده ها | داده ها | داده ها | داده ها | داده ها | داده ها |
گزینه های پیکربندی
| نام | تایپ کنید | پیش فرض | شرح |
|---|---|---|---|
| backgroundColor.fill | رشته | 'سفید' | رنگ پر کردن نمودار، به عنوان یک رشته رنگ HTML. |
| gantt.arrow | هدف - شی | خالی | برای نمودارهای گانت ، gantt.arrow ویژگی‌های مختلف فلش‌هایی را که وظایف را به هم متصل می‌کنند کنترل می‌کند. |
| gantt.arrow.angle | عدد | 45 | زاویه سر فلش. |
| gantt.arrow.color | رشته | '#000' | رنگ فلش ها. |
| gantt.arrow.length | عدد | 8 | طول سر پیکان. |
| gantt.arrow.radius | عدد | 15 | شعاع برای تعیین منحنی فلش بین دو کار. |
| gantt.arrow.spaceAfter | عدد | 4 | مقدار فضای خالی بین سر فلش و وظیفه ای که به آن اشاره می کند. |
| gantt.arrow.width | عدد | 1.4 | عرض فلش ها. |
| gantt.barCornerRadius | عدد | 2 | شعاع برای تعیین منحنی گوشه های میله. |
| gantt.barHeight | عدد | خالی | ارتفاع میله ها برای وظایف. |
| gantt.criticalPathEnabled | بولی | درست است، واقعی | اگر true هر فلش در مسیر بحرانی، سبک متفاوتی خواهد داشت. |
| gantt.criticalPathStyle | هدف - شی | خالی | یک شی حاوی سبک برای هر فلش مسیر بحرانی. |
| gantt.criticalPathStyle.stroke | رشته | خالی | رنگ هر فلش مسیر بحرانی. |
| gantt.criticalPathStyle.strokeWidth | عدد | 1.4 | ضخامت هر فلش مسیر بحرانی. |
| gantt.defaultStartDate | تاریخ / شماره | خالی | اگر تاریخ شروع را نتوان از مقادیر موجود در DataTable محاسبه کرد، تاریخ شروع روی این تنظیم می شود. یک مقدار date new Date(YYYY, M, D) ) یا یک عدد را می‌پذیرد که تعداد میلی‌ثانیه‌های مورد استفاده است. |
| gantt.innerGridHorizLine | هدف - شی | خالی | سبک خطوط شبکه افقی داخلی را تعریف می کند. |
| gantt.innerGridHorizLine.stroke | رشته | خالی | رنگ خطوط شبکه افقی داخلی. |
| gantt.innerGridHorizLine.strokeWidth | عدد | 1 | عرض خطوط شبکه افقی داخلی. |
| gantt.innerGridTrack.fill | رشته | خالی | رنگ پر کردن مسیر شبکه داخلی. اگر innerGridDarkTrack.fill مشخص نشده باشد، این برای هر مسیر شبکه اعمال می شود. |
| gantt.innerGridDarkTrack.fill | رشته | خالی | رنگ پر کردن مسیر شبکه داخلی تیره و متناوب. |
| gantt.labelMaxWidth | عدد | 300 | حداکثر فضای مجاز برای هر برچسب کار. |
| gantt.labelStyle | هدف - شی | خالی | یک شی حاوی سبک‌های برچسب‌های کار.
labelStyle: {
fontName: Roboto2,
fontSize: 14,
color: '#757575'
},
|
| gantt.percentEnabled | بولی | درست است، واقعی | نوار وظیفه را بر اساس درصد تکمیل شده برای کار پر می کند. |
| gantt.percentStyle.fill | رشته | خالی | رنگ بخش درصد تکمیل شده یک نوار وظیفه. |
| gantt.shadowEnabled | بولی | درست است، واقعی | اگر روی true تنظیم شود، زیر هر نوار وظیفه که دارای وابستگی است، سایه ای می کشد. |
| gantt.shadowColor | رشته | '#000' | رنگ سایه ها را در زیر هر نوار وظیفه ای که وابستگی دارد، مشخص می کند. |
| gantt.shadowOffset | عدد | 1 | افست سایه‌های زیر هر نوار وظیفه‌ای که وابستگی دارد را بر حسب پیکسل تعریف می‌کند. |
| gantt.sortTasks | بولی | درست است، واقعی | مشخص می کند که اگر درست باشد، وظایف باید از نظر توپولوژیکی مرتب شوند. در غیر این صورت از همان ترتیب ردیف های مربوط به DataTable استفاده کنید. |
| gantt.trackHeight | عدد | خالی | ارتفاع مسیرها. |
| عرض | عدد | عرض عنصر حاوی | عرض نمودار، بر حسب پیکسل. |
| ارتفاع | عدد | ارتفاع عنصر حاوی | ارتفاع نمودار بر حسب پیکسل |
مواد و روش ها
| روش | شرح |
|---|---|
draw(data, options) | نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد نوع بازگشت: ندارد |
getSelection() | آرایه ای از موجودیت های نمودار انتخاب شده را برمی گرداند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، در هر لحظه می توان تنها یک موجودیت را انتخاب کرد. نوع بازگشت: آرایه ای از عناصر انتخابی |
setSelection() | موجودیت های نمودار مشخص شده را انتخاب می کند. هر انتخاب قبلی را لغو می کند. موجودیت های قابل انتخاب میله ها، ورودی های افسانه و دسته ها هستند. برای این نمودار، تنها یک موجودیت را می توان در یک زمان انتخاب کرد. نوع بازگشت: ندارد |
clearChart() | نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد |
مناسبت ها
| رویداد | شرح |
|---|---|
click | هنگامی که کاربر در داخل نمودار کلیک می کند، فعال می شود. می توان برای شناسایی زمانی که عنوان، عناصر داده، ورودی های افسانه، محورها، خطوط شبکه یا برچسب ها کلیک می شود، استفاده کرد. ویژگی ها: targetID |
error | هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود. ویژگی ها: شناسه، پیام |
ready | نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی روش خواص: هیچ |
select | هنگامی که کاربر روی یک موجودیت بصری کلیک می کند فعال می شود. برای اطلاع از آنچه انتخاب شده است، خواص: هیچ |
خط مشی داده
همه کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.