ภาพรวม
แผนภูมิแกนต์คือแผนภูมิประเภทหนึ่งที่แสดงรายละเอียดของโปรเจ็กต์เป็นงานคอมโพเนนต์ แผนภูมิ Google Gantt แสดงจุดเริ่มต้น จุดสิ้นสุด และระยะเวลาของงานภายในโปรเจ็กต์ รวมถึงทรัพยากร Dependency ใดๆ ที่งานอาจมี แผนภูมิแกนต์ Google จะแสดงผลในเบราว์เซอร์โดยใช้ 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>
ไม่มีทรัพยากร Dependency
หากต้องการสร้างแผนภูมิแกนต์ที่ไม่มีทรัพยากร Dependency โปรดตรวจสอบว่าได้ตั้งค่าสุดท้ายสําหรับแต่ละแถวในตารางข้อมูลเป็น 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>
การคํานวณเริ่มต้น/สิ้นสุด/ระยะเวลา
แผนภูมิแกนต์ยอมรับค่า 3 ค่าที่เกี่ยวข้องกับระยะเวลาของงาน ได้แก่ วันที่เริ่มต้น วันที่สิ้นสุด และระยะเวลา (เป็นมิลลิวินาที) เช่น หากไม่มีวันที่เริ่มต้น แผนภูมิจะคํานวณเวลาที่ขาดหายไปโดยอิงตามวันที่สิ้นสุดและระยะเวลาได้ การคํานวณวันที่สิ้นสุดก็เหมือนกัน หากมีการระบุทั้งวันที่เริ่มต้นและวันที่สิ้นสุด ระบบจะคํานวณระยะเวลาระหว่าง 2 วันที่นี้
ตารางด้านล่างแสดงรายการวิธีที่ Gantt จัดการเกี่ยวกับการเริ่มต้น การสิ้นสุด และระยะเวลาในสถานการณ์ต่างๆ
เริ่ม | สิ้นสุด | ระยะเวลา | ผลลัพธ์ |
---|---|---|---|
ปัจจุบัน | ปัจจุบัน | ปัจจุบัน | ตรวจสอบว่าระยะเวลาดังกล่าวสอดคล้องกับเวลาเริ่มต้น/สิ้นสุด เกิดข้อผิดพลาดหากไม่สอดคล้องกัน |
ปัจจุบัน | ปัจจุบัน | Null | คํานวณระยะเวลาจากเวลาเริ่มต้นและเวลาสิ้นสุด |
ปัจจุบัน | Null | ปัจจุบัน | เวลาสิ้นสุดของการประมวลผล |
ปัจจุบัน | Null | Null | ทิ้งข้อผิดพลาดเนื่องจากคํานวณระยะเวลาหรือเวลาสิ้นสุดไม่ได้ |
Null | ปัจจุบัน | ปัจจุบัน | เวลาเริ่มต้นของการประมวลผล |
Null | Null | ปัจจุบัน |
คํานวณเวลาเริ่มต้นตามทรัพยากร Dependency ใช้ร่วมกับ 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 จะเป็นสีแดงโดยค่าเริ่มต้น และสามารถปรับแต่งได้โดยใช้ตัวเลือก criticalPathStyle
นอกจากนี้ คุณยังปิดเส้นทางที่สําคัญได้โดยตั้งค่า criticalPathEnabled
เป็น false
var options = { height: 275, gantt: { criticalPathEnabled: true, criticalPathStyle: { stroke: '#e64a19', strokeWidth: 5 } } };
ลูกศรการจัดรูปแบบ
คุณจัดรูปแบบลูกศร Dependency ระหว่างงานได้ด้วยตัวเลือก 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 | |
---|---|---|---|---|---|---|---|---|
จุดประสงค์ในการใช้: | รหัสงาน | ชื่องาน | รหัสทรัพยากร (ไม่บังคับ) | เริ่ม | สิ้นสุด | ระยะเวลา (เป็นมิลลิวินาที) | เปอร์เซ็นต์ที่สมบูรณ์ | การอ้างอิง |
ประเภทข้อมูล: | สตริง | สตริง | สตริง | วันที่ | วันที่ | number | number | สตริง |
บทบาท: | โดเมน | ข้อมูล | ข้อมูล | ข้อมูล | ข้อมูล | ข้อมูล | ข้อมูล | ข้อมูล |
ตัวเลือกการกําหนดค่า
ชื่อ | ประเภท | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
พื้นหลังสีเติม | สตริง | "สีขาว" | สีเติมของแผนภูมิเป็นสตริงสี HTML |
gantt.arrow | ออบเจ็กต์ | null |
สําหรับแผนภูมิแกนต์ gantt.arrow จะควบคุมพร็อพเพอร์ตี้ต่างๆ ของลูกศรที่เชื่อมต่องาน
|
gantt.arrow.angle | number | 45 | มุมของลูกศร |
gantt.arrow.color | สตริง | "#000" | สีของลูกศร |
gantt.arrow.length | number | 8 | ความยาวของศีรษะของลูกศร |
gantt.arrow.รัศมี | number | 15 | รัศมีสําหรับกําหนดเส้นโค้งของลูกศรระหว่างงาน 2 งาน |
gantt.arrow.spaceหลัง | number | 4 | ปริมาณระหว่างช่องว่างของลูกศรกับงานที่ชี้ไป |
gantt.arrow.width | number | 1.4 | ความกว้างของลูกศร |
gantt.barCornerRadius | number | 2 | รัศมีสําหรับกําหนดความโค้งของมุมของแถบ |
gantt.barHeight | number | null | ความสูงของแถบสําหรับงาน |
gantt.ticPathEnabled | บูลีน | จริง |
หาก true ลูกศรใดๆ ในเส้นทางที่สําคัญมีการจัดรูปแบบต่างกัน
|
gantt.ticPathStyle | ออบเจ็กต์ | null | ออบเจ็กต์ที่มีรูปแบบของลูกศรเส้นทางที่สําคัญ |
gantt.ticPathStyle.score | สตริง | null | สีของลูกศรเส้นทางที่สําคัญ |
gantt.ticPathStyle.strWidth | number | 1.4 | ความหนาของลูกศรเส้นทางที่สําคัญ |
gantt.defaultStartDate | วันที่/ตัวเลข | null |
หากไม่สามารถคํานวณวันที่เริ่มต้นจากค่าในตารางข้อมูล ระบบจะตั้งค่าวันที่เริ่มต้นเป็นค่านี้ ยอมรับค่า date (new Date(YYYY, M, D) ) หรือตัวเลข ซึ่งเป็นจํานวนมิลลิวินาทีที่จะใช้
|
gantt.innerGridHorizLine | ออบเจ็กต์ | null | กําหนดรูปแบบของเส้นตารางแนวนอนภายใน |
gantt.innerGridHorizLine.Stack | สตริง | null | สีของเส้นตารางแนวนอนด้านใน |
gantt.innerGridHorizLine.strWidth | number | 1 | ความกว้างของเส้นตารางแนวนอนด้านใน |
gantt.innerGridTrack.fill | สตริง | null |
สีเติมของเส้นตารางภายใน หากไม่ได้ระบุ innerGridDarkTrack.fill นโยบายนี้จะมีผลกับแทร็กตารางกริดทั้งหมด
|
gantt.innerGridDarkTrack.fill | สตริง | null | สีเติมของเส้นตารางตารางกริดสีเข้มแบบมืด |
gantt.labelMaxWidth | number | 300 | จํานวนพื้นที่ว่างสูงสุดที่อนุญาตสําหรับป้ายกํากับงานแต่ละป้าย |
gantt.labelStyle | ออบเจ็กต์ | null |
ออบเจ็กต์ที่มีรูปแบบของป้ายกํากับงาน labelStyle: { fontName: Roboto2, fontSize: 14, color: '#757575' }, |
gantt.percentEnabled | บูลีน | จริง | แสดงแถบงานตามเปอร์เซ็นต์ที่สมบูรณ์ของงาน |
gantt.percentStyle.fill | สตริง | null | สีของเปอร์เซ็นต์ที่เสร็จสมบูรณ์ของแถบงาน |
เปิดตัวแล้ว | บูลีน | จริง |
หากตั้งค่าเป็น true ให้วาดเงาใต้แถบงานแต่ละรายการที่มีทรัพยากร Dependency
|
Ggant.เงา | สตริง | "#000" | กําหนดสีของเงาภายใต้แถบงานที่มีทรัพยากร Dependency |
Gantt.Shadsetset | number | 1 | กําหนดการชดเชยในหน่วยพิกเซลของเงาใต้แถบงานที่มีทรัพยากร Dependency |
gantt.sortTasks | บูลีน | จริง | ระบุว่าควรจัดเรียงงานแบบตามความเป็นจริงหรือไม่ หากเป็นจริง ให้ใช้ลําดับเดียวกับแถวที่เกี่ยวข้องของตารางข้อมูล |
gantt.trackHeight | number | null | ความสูงของแทร็ก |
ความกว้าง | number | ความกว้างขององค์ประกอบที่มี | ความกว้างของแผนภูมิเป็นพิกเซล |
ความสูง | number | ความสูงขององค์ประกอบ | ความสูงของแผนภูมิเป็นพิกเซล |
เมธอด
วิธีการ | คำอธิบาย |
---|---|
draw(data, options) |
วาดแผนภูมิ แผนภูมินี้ยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ประเภทการคืนสินค้า: ไม่มี
|
getSelection() |
แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก
เอนทิตีที่เลือกได้คือแถบ รายการคําอธิบาย และหมวดหมู่
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้เพียงรายการเดียวในช่วงเวลาที่กําหนด
ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
|
setSelection() |
เลือกเอนทิตีของแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า
เอนทิตีที่เลือกได้คือแถบ รายการคําอธิบาย และหมวดหมู่
สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น
ประเภทการคืนสินค้า: ไม่มี
|
clearChart() |
ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด ประเภทการคืนสินค้า: ไม่มี
|
เหตุการณ์
เหตุการณ์ | คำอธิบาย |
---|---|
click |
เริ่มทํางานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุได้เมื่อมีการคลิกชื่อ องค์ประกอบข้อมูล รายการคําอธิบาย แกน ตารางกริด หรือป้ายกํากับ พร็อพเพอร์ตี้: targetID
|
error |
เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ พร็อพเพอร์ตี้: รหัส ข้อความ
|
ready |
แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการโทรหลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด พร็อพเพอร์ตี้: ไม่มี
|
select |
เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา พร็อพเพอร์ตี้: ไม่มี
|
นโยบายข้อมูล
โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ