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

ภาพรวม

แผนภูมิแกนต์คือแผนภูมิประเภทหนึ่งที่แสดงรายละเอียดของโปรเจ็กต์เป็นงานคอมโพเนนต์ แผนภูมิ 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)

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

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

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

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
setSelection()

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

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

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

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

เหตุการณ์

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

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

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

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

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

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

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

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

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

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

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