Biểu đồ Gantt

Tổng quan

Biểu đồ Gantt là một loại biểu đồ minh hoạ thông tin phân tích chi tiết của một dự án thành các tác vụ thành phần của dự án đó. Biểu đồ Gantt của Google minh hoạ thời điểm bắt đầu, kết thúc và thời lượng của các tác vụ trong một dự án, cũng như bất kỳ phần phụ thuộc nào mà một tác vụ có thể có. Các biểu đồ Gantt của Google được hiển thị trong trình duyệt bằng cách sử dụng SVG. Giống như tất cả các biểu đồ của Google, biểu đồ Gantt hiển thị chú thích khi người dùng di chuột qua dữ liệu.

Lưu ý: Biểu đồ Gantt sẽ không hoạt động trong các phiên bản cũ của Internet Explorer. (Các phiên bản IE8 và cũ hơn không hỗ trợ SVG mà Biểu đồ Gantt yêu cầu.)

Một ví dụ đơn giản

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

Không có phần phụ thuộc

Để tạo biểu đồ Gantt không có phần phụ thuộc, hãy đảm bảo rằng giá trị cuối cùng cho mỗi hàng trong DataTable của bạn được đặt thành 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>

Nhóm tài nguyên

Bạn có thể nhóm những việc có bản chất tương tự nhau bằng tài nguyên. Thêm một cột thuộc loại string vào dữ liệu của bạn (sau cột Task ID và Task Name) và đảm bảo mọi tác vụ cần được nhóm vào một tài nguyên đều có cùng mã nhận dạng tài nguyên. Các tài nguyên sẽ được nhóm theo màu. 

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

Thời gian bắt đầu/kết thúc/thời lượng tính toán

Biểu đồ Gantt chấp nhận 3 giá trị liên quan đến thời lượng của tác vụ: ngày bắt đầu, ngày kết thúc và thời lượng (tính bằng mili giây). Ví dụ: nếu không có ngày bắt đầu, biểu đồ có thể tính thời gian còn thiếu dựa trên ngày kết thúc và thời lượng. Công cụ tính ngày kết thúc cũng tương tự. Nếu bạn cung cấp cả ngày bắt đầu và ngày kết thúc, thì thời lượng có thể được tính giữa hai ngày.

Hãy xem bảng dưới đây để biết danh sách cách Gantt xử lý sự hiện diện của thời điểm bắt đầu, kết thúc và thời lượng trong nhiều trường hợp.

Bắt đầu End Thời lượng Kết quả
Trình bày Trình bày Trình bày Kiểm tra để đảm bảo thời lượng nhất quán với thời gian bắt đầu/kết thúc. Gửi lỗi nếu không nhất quán.
Trình bày Trình bày Null Tính toán thời lượng từ thời điểm bắt đầu đến thời điểm kết thúc.
Trình bày Null Trình bày Tính toán thời gian kết thúc.
Trình bày Null Null Gửi lỗi do không thể tính toán thời lượng hoặc thời gian kết thúc.
Null Trình bày Trình bày Thời gian bắt đầu tính toán.
Null Null Trình bày Tính toán thời gian bắt đầu dựa trên các phần phụ thuộc. Cùng với defaultStartDate, cho phép vẽ biểu đồ chỉ theo khoảng thời gian.
Null Trình bày Null Gửi lỗi khi không thể tính toán thời gian bắt đầu hoặc thời lượng.
Null Null Null Gửi lỗi khi không thể tính toán thời gian bắt đầu, thời gian kết thúc hoặc thời lượng.

Dựa trên những điều trên, bạn có thể tạo một biểu đồ trình bày đường đi làm thông thường chỉ với thời lượng của mỗi việc cần làm. 

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

Đường dẫn quan trọng

Đường dẫn quan trọng trong biểu đồ Gantt là các lộ trình có ảnh hưởng trực tiếp đến ngày kết thúc. Theo mặc định, đường dẫn quan trọng trong biểu đồ Gantt của Google có màu đỏ và bạn có thể tuỳ chỉnh đường dẫn này bằng các tuỳ chọn criticalPathStyle. Bạn cũng có thể tắt đường dẫn quan trọng bằng cách đặt criticalPathEnabled thành false. 

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

Tạo kiểu mũi tên

Bạn có thể tạo kiểu cho mũi tên phần phụ thuộc giữa các tác vụ bằng tuỳ chọn 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
            }
          }
        };

Tạo kiểu cho kênh

Việc định kiểu lưới được tổ hợp gồm innerGridHorizLine, innerGridTrack và innerGridDarkTrack xử lý. Nếu bạn chỉ đặt innerGridTrack, biểu đồ sẽ tính toán màu tối hơn cho innerGridDarkTrack, nhưng khi chỉ đặt innerGridDarkTrack, innerGridTrack sẽ sử dụng màu mặc định và không tính màu sáng hơn. 

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

Đang tải

Tên gói google.charts.load là "gantt". 

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

Tên lớp của hình ảnh trực quan là google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

Định dạng dữ liệu

Hàng: Mỗi hàng trong bảng đại diện cho một việc cần làm.

Cột:

  Cột 0 Cột 1 Cột 2 Cột 3 Cột 4 Cột 5 Cột 6 Cột 7
Mục đích: Mã việc cần làm Tên việc cần làm Mã tài nguyên (không bắt buộc) Bắt đầu End Thời lượng (tính bằng mili giây) Phần trăm hoàn tất Phần phụ thuộc
Loại dữ liệu: string string string date date number number string
Vai trò: tên miền data data data data data data data

 

Tuỳ chọn cấu hình

Tên Loại Mặc định Nội dung mô tả
backgroundColor.fill string "white" Màu nền biểu đồ, dưới dạng chuỗi màu HTML.
gantt.arrow đối tượng null Đối với Biểu đồ Gantt, gantt.arrow kiểm soát các thuộc tính khác nhau của các mũi tên kết nối các tác vụ.
gantt.arrow.angle number 45 Góc của đầu mũi tên.
gantt.arrow.color string "#000" Màu của mũi tên.
gantt.arrow.length number 8 Chiều dài phần đầu của mũi tên.
gantt.arrow.radius number 15 Bán kính để xác định đường cong của mũi tên giữa hai nhiệm vụ.
gantt.arrow.spaceAfter number 4 Lượng khoảng trắng giữa phần đầu của một mũi tên và công việc mà mũi tên đó trỏ đến.
gantt.arrow.width number 1.4 Chiều rộng của mũi tên.
gantt.barCornerRadius number 2 Bán kính để xác định đường cong của các góc thanh.
gantt.barHeight number null Chiều cao của thanh cho việc cần làm.
gantt.criticalPathEnabled boolean đúng Nếu true, bất kỳ mũi tên nào trên đường dẫn quan trọng sẽ được tạo kiểu khác.
gantt.criticalPathStyle đối tượng null Một đối tượng chứa kiểu của mọi mũi tên đường dẫn quan trọng.
gantt.criticalPathStyle.stroke string null Màu của mọi mũi tên đường dẫn quan trọng.
gantt.criticalPathStyle.strokeWidth number 1.4 Độ dày của mọi mũi tên đường đi quan trọng.
gantt.defaultStartDate ngày/số null Nếu không thể tính được ngày bắt đầu từ các giá trị trong DataTable, thì ngày bắt đầu sẽ được đặt thành ngày này. Chấp nhận giá trị date (new Date(YYYY, M, D)) hoặc số, là số mili giây cần sử dụng.
gantt.innerGridHorizLine đối tượng null Xác định kiểu của các đường lưới ngang bên trong.
gantt.innerGridHorizLine.stroke string null Màu của đường lưới ngang bên trong.
gantt.innerGridHorizLine.strokeWidth number 1 Chiều rộng của các đường lưới ngang bên trong.
gantt.innerGridTrack.fill string null Màu nền của thành phần lưới bên trong. Nếu bạn không chỉ định innerGridDarkTrack.fill, giá trị này sẽ áp dụng cho mọi kênh trong lưới.
gantt.innerGridDarkTrack.fill string null Màu nền của đường lưới bên trong tối thay thế.
gantt.labelMaxWidth number 300 Dung lượng tối đa được phép cho mỗi nhãn tác vụ.
gantt.labelStyle đối tượng null

Một đối tượng chứa các kiểu cho nhãn công việc.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean đúng Lấp đầy thanh tác vụ dựa trên tỷ lệ phần trăm đã hoàn thành của việc cần làm đó.
gantt.percentStyle.fill string null Màu của phần phần trăm đã hoàn thành trên thanh tác vụ.
gantt.shadowEnabled boolean đúng Nếu bạn đặt thành true, hãy vẽ một bóng đổ bên dưới mỗi thanh tác vụ có các phần phụ thuộc.
gantt.shadowColor string "#000" Xác định màu của bóng đổ trong bất kỳ thanh tác vụ nào có phần phụ thuộc.
gantt.shadowOffset number 1 Xác định độ lệch (tính bằng pixel) của bóng dưới bất kỳ thanh tác vụ nào có phần phụ thuộc.
gantt.sortTasks boolean đúng Chỉ định rằng các tác vụ nên được sắp xếp theo cấu trúc liên kết, nếu đúng; nếu không, hãy sử dụng cùng thứ tự như các hàng tương ứng của DataTable.
gantt.trackHeight number null Chiều cao của tuyến đường.
chiều rộng number chiều rộng của phần tử chứa Chiều rộng của biểu đồ, tính bằng pixel.
độ cao number chiều cao của phần tử chứa chiều cao của biểu đồ, tính bằng pixel.

Phương thức

Phương thức Nội dung mô tả
draw(data, options)

Vẽ biểu đồ. Biểu đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện ready. Extended description.

Loại trả lại: không có
getSelection()

Trả về một mảng gồm các thực thể biểu đồ đã chọn. Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục. Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. Extended description .

Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó. Thực thể có thể chọn là thanh, mục nhập chú giải và danh mục. Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. Extended description .

Loại trả lại: không có
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: không có

Sự kiện

Sự kiện Nội dung mô tả
click

Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Thông tin này có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, phần tử dữ liệu, mục chú giải, trục, đường lưới hoặc nhãn.

Tài sản: targetID
error

Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ.

Thuộc tính: mã nhận dạng, thông báo
ready

Biểu đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

Thuộc tính: không có
select

Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục đã được chọn, hãy gọi hàm getSelection().

Thuộc tính: không có

Chính sách dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.