หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ภาพรวม

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

หมายเหตุ: แผนภูมิแกนต์จะไม่ทำงานใน Internet Explorer เวอร์ชันเก่า (IE8 และเวอร์ชันก่อนหน้าไม่รองรับ SVG ซึ่งแผนภูมิ Gantt ต้องใช้)

ตัวอย่างง่ายๆ

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);
    }

<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

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);
    }

<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) และตรวจสอบว่างานทั้งหมดที่ควรจัดกลุ่มลงในทรัพยากรมีรหัสทรัพยากรเดียวกัน แหล่งข้อมูลจะจัดกลุ่มตามสี

google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

function drawChart() {

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);
    }

<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	เกิดข้อผิดพลาดเนื่องจากไม่สามารถคำนวณเวลาเริ่มต้น เวลาสิ้นสุด หรือระยะเวลา

ด้วยเหตุผลข้างต้น คุณสามารถสร้างแผนภูมิที่แสดงการเดินทางไปที่ทำงานโดยทั่วไปโดยใช้ระยะเวลาของงานแต่ละชิ้นเท่านั้น

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);
      }

<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

google.charts.load('current', {'packages':['gantt']});
      google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
        return days * 24 * 60 * 60 * 1000;
      }

function drawChart() {

var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
      }

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

การจัดรูปแบบลูกศร

คุณจัดรูปแบบลูกศรทรัพยากร Dependency ระหว่างงานต่างๆ ได้ด้วยตัวเลือก gantt.arrow ดังนี้

google.charts.load('current', {'packages':['gantt']});
      google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
        return days * 24 * 60 * 60 * 1000;
      }

function drawChart() {

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
            }
          }
        };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
      }

        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 จะใช้สีเริ่มต้นและจะไม่คำนวณสีที่อ่อนกว่า

google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

function drawChart() {

var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
    }

      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()` พร็อพเพอร์ตี้: ไม่มี

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

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