แผนภูมิแกนต์

ภาพรวม

แผนภูมิแกนต์ เป็นแผนภูมิประเภทหนึ่งที่แสดงรายละเอียดของโปรเจ็กต์เป็นงานคอมโพเนนต์ แผนภูมิ Google Gantt แสดงจุดเริ่มต้น จุดสิ้นสุด และระยะเวลาของงานในโปรเจ็กต์ รวมถึงทรัพยากร Dependency ต่างๆ ในงาน แผนภูมิ Google Gantt จะแสดงผลในเบราว์เซอร์โดยใช้ SVG เช่นเดียวกับแผนภูมิทั้งหมดของ Google แผนภูมิแกนต์จะแสดงเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือข้อมูล

หมายเหตุ: แผนภูมิแกนต์จะไม่ทำงานใน 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>

ไม่มีทรัพยากร Dependency

หากต้องการสร้างแผนภูมิ Gantt ที่ไม่มีทรัพยากร Dependency ให้ตรวจสอบว่ามีการตั้งค่าสุดท้ายสำหรับแต่ละแถวใน 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>

กำลังคำนวณจุดเริ่มต้น/สิ้นสุด/ระยะเวลา

แผนภูมิแกนต์จะยอมรับค่า 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 Gantt จะเป็นสีแดงโดยค่าเริ่มต้น และปรับแต่งได้โดยใช้ตัวเลือก 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
จุดประสงค์ในการใช้: รหัสงาน ชื่องาน รหัสทรัพยากร (ไม่บังคับ) เริ่ม สิ้นสุด ระยะเวลา (เป็นมิลลิวินาที) เปอร์เซ็นต์ที่อ่านไปแล้ว การอ้างอิง
ประเภทข้อมูล: string string string วันที่ วันที่ ตัวเลข ตัวเลข string
บทบาท: โดเมน ข้อมูล ข้อมูล ข้อมูล ข้อมูล ข้อมูล ข้อมูล ข้อมูล

 

ตัวเลือกการกำหนดค่า

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
backgroundColor.fill string "ขาว" สีเติมแผนภูมิ เป็นสตริงสี HTML
gantt.arrow ออบเจ็กต์ null สำหรับแผนภูมิแกนต์ gantt.arrow จะควบคุมพร็อพเพอร์ตี้ต่างๆ ของลูกศรที่เชื่อมต่องาน
gantt.arrow.angle ตัวเลข 45 มุมของหัวลูกศร
gantt.arrow.color string "#000" สีของลูกศร
gantt.arrow.length ตัวเลข 8 ความยาวของหัวลูกศร
gantt.arrow.radius ตัวเลข 15 รัศมีสำหรับกำหนดความโค้งของลูกศรระหว่างงาน 2 รายการ
gantt.arrow.spaceAfter ตัวเลข 4 จำนวนช่องว่างระหว่างส่วนหัวของลูกศรกับงานที่ลูกศรชี้
gantt.arrow.width ตัวเลข 1.4 ความกว้างของลูกศร
gantt.barCornerRadius ตัวเลข 2 รัศมีสำหรับกำหนดความโค้งของมุมของแท่ง
gantt.barHeight ตัวเลข null ความสูงของแถบข้อมูลสําหรับงาน
gantt.criticalPathEnabled boolean จริง หาก true ลูกศรใดบนเส้นทางสำคัญจะมีรูปแบบต่างออกไป
gantt.criticalPathStyle ออบเจ็กต์ null วัตถุที่มีรูปแบบสำหรับลูกศรเส้นทางวิกฤติ
gantt.criticalPathStyle.stroke string null สีของลูกศรเส้นทางสำคัญ
gantt.criticalPathStyle.strokeWidth ตัวเลข 1.4 ความหนาของลูกศรเส้นทางสำคัญ
gantt.defaultStartDate วันที่/หมายเลข null หากคำนวณวันที่เริ่มต้นจากค่าใน DataTable ไม่ได้ ระบบจะตั้งค่าวันที่เริ่มต้นเป็นวันที่นี้ ยอมรับค่า date (new Date(YYYY, M, D)) หรือตัวเลข ซึ่งเป็นจำนวนมิลลิวินาทีที่จะใช้
gantt.innerGridHorizLine ออบเจ็กต์ null กำหนดรูปแบบของเส้นตารางแนวนอนด้านใน
gantt.innerGridHorizLine.stroke string null สีของเส้นตารางกริดแนวนอนด้านใน
gantt.innerGridHorizLine.strokeWidth ตัวเลข 1 ความกว้างของเส้นตารางแนวนอนด้านใน
gantt.innerGridTrack.fill string null สีเติมของแทร็กตารางกริดด้านใน หากไม่ได้ระบุ innerGridDarkTrack.fill ระบบจะนำไปใช้กับแทร็กตารางกริดทุกแทร็ก
gantt.innerGridDarkTrack.fill string null สีเติมของแทร็กตารางกริดแบบมืดที่สำรองไว้
gantt.labelMaxWidth ตัวเลข 300 จํานวนพื้นที่สูงสุดที่อนุญาตสําหรับป้ายกํากับงานแต่ละรายการ
gantt.labelStyle ออบเจ็กต์ null

ออบเจ็กต์ที่มีรูปแบบสำหรับป้ายกำกับงาน

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean จริง เติมแถบงานตามเปอร์เซ็นต์งานที่ทำเสร็จแล้ว
gantt.percentStyle.fill string null สีของส่วนเปอร์เซ็นต์ที่เสร็จสมบูรณ์ของแถบงาน
gantt.shadowEnabled boolean จริง หากตั้งค่าเป็น true ให้วาดเงาใต้แถบงานแต่ละแถบที่มีทรัพยากร Dependency
gantt.shadowColor string "#000" กำหนดสีของเงาใต้แถบงานที่มีทรัพยากร Dependency
gantt.shadowOffset ตัวเลข 1 กำหนดออฟเซ็ตของเงาใต้แถบงานที่มีทรัพยากร Dependency ในหน่วยพิกเซล
gantt.sortTasks boolean จริง ระบุว่างานควรจัดเรียงแบบโทโพโลยี (หากเป็นจริง) หรือใช้ลำดับเดียวกับแถวที่เกี่ยวข้องของ DataTable
gantt.trackHeight ตัวเลข null ความสูงของแทร็ก
ความกว้าง ตัวเลข ความกว้างขององค์ประกอบที่มีอยู่ ความกว้างของแผนภูมิเป็นพิกเซล
ส่วนสูง ตัวเลข ความสูงขององค์ประกอบที่มี ความสูงของแผนภูมิเป็นพิกเซล

วิธีการ

วิธีการ คำอธิบาย
draw(data, options)

วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ready เริ่มทํางานแล้วเท่านั้น Extended description.

ประเภทการคืนสินค้า: ไม่มี
getSelection()

แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือแท่ง รายการคำอธิบาย และหมวดหมู่ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้เพียง 1 รายการในช่วงเวลาหนึ่งๆ Extended description

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
setSelection()

เลือกเอนทิตีแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า เอนทิตีที่เลือกได้คือแท่ง รายการคำอธิบาย และหมวดหมู่ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น Extended description

ประเภทการคืนสินค้า: ไม่มี
clearChart()

ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด

ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

เหตุการณ์ คำอธิบาย
click

เริ่มทำงานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุว่ามีการคลิกชื่อ องค์ประกอบข้อมูล รายการคำอธิบาย แกน เส้นตาราง หรือป้ายกำกับเมื่อใด

พร็อพเพอร์ตี้: targetID
error

เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
ready

แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น

พร็อพเพอร์ตี้: ไม่มี
select

เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา getSelection()

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ