Tổng quan
Biểu đồ Gantt là một loại biểu đồ minh họa bảng 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 đồ Google Gantt minh hoạ thời điểm bắt đầu, kết thúc và thời lượng của các nhiệm vụ trong một dự án, cũng như mọi phần phụ thuộc mà một nhiệm vụ có thể có. Biểu đồ Google Gantt được hiển thị trong trình duyệt bằng cách sử dụng SVG. Giống như tất cả biểu đồ của Google, biểu đồ Gantt hiển thị chú giải công cụ 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 Internet Explorer cũ. (IE8 và các phiên bản trước đó không hỗ trợ SVG. Yêu cầu này về Biểu đồ Gantt.)
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 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 các tài nguyên
Bạn có thể nhóm các nhiệm vụ có bản chất tương tự nhau bằng các 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 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>
Tính toán điểm bắt đầu/kết thúc/thời lượng
Biểu đồ Gantt chấp nhận 3 giá trị liên quan đến thời lượng của việc cần làm: 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 toán thời gian còn thiếu dựa trên ngày kết thúc và thời lượng. Việc tính toán ngày kết thúc cũng tương tự như vậy. Nếu đưa ra cả ngày bắt đầu và ngày kết thúc, thì bạn có thể tính thời lượng giữa hai ngày này.
Hãy xem bảng bên dưới để biết danh sách cách Gantt xử lý sự hiện diện của điểm bắt đầu, kết thúc và thời lượng trong các trường hợp khác nhau.
| Bắt đầu | Kết thúc | 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 giống 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 và thời gian 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 | Tạo ra lỗi 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 | Tính toán thời gian bắt đầu. |
| 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. Khi kết hợp với
defaultStartDate, bạn có thể bật biểu đồ chỉ bằng cách sử dụng thời lượng.
|
| Null | Trình bày | Null | Tạo ra lỗi không thể tính thời gian bắt đầu hoặc thời lượng. |
| Null | Null | Null | Tạo ra lỗi không thể tính thời gian bắt đầu, thời gian kết thúc hoặc thời lượng. |
Với thông tin nêu trên, bạn có thể tạo một biểu đồ cho thấy tuyến đường đi làm điển hình để chỉ sử dụng thời lượng của từng nhiệm vụ.
<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à đường dẫn hoặc các đường dẫn ảnh hưởng trực tiếp đến ngày kết thúc. Đường dẫn quan trọng trong biểu đồ Google Gantt được tô màu đỏ theo mặc định và có thể được tuỳ chỉnh 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 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 nhiệm vụ bằng các 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
Kiểu lưới được xử lý bằng cách kết hợp innerGridHorizLine, innerGridTrack và innerGridDarkTrack. Bằng cách 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à sẽ 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 trình bày 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: | ID 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 | Kết thúc | Thời lượng (tính bằng mili giây) | Phần trăm hoàn thành | Phần phụ thuộc |
| Loại dữ liệu: | chuỗi | chuỗi | chuỗi | ngày | ngày | number | number | chuỗi |
| Vai trò: | miền | data | data | data | data | data | data | data |
Các lựa chọn về cấu hình
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| backgroundColor.fill | chuỗi | "trắng" | Biểu đồ tô màu dưới dạng chuỗi màu HTML. |
| gantt.arrow | object | 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 nhiệm vụ.
|
| gantt.arrow.angle | number | 45 | Góc đầu mũi tên. |
| gantt.arrow.color | chuỗi | '#000' | Màu của các mũi tên. |
| gantt.arrow.length | number | 8 | Chiều dài của đầu 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.spaceSau | number | 4 | Lượng khoảng trắng giữa đầu mũi tên và nhiệm vụ mà mũi tên trỏ đến. |
| gantt.arrow.width | number | 1.4 | Chiều rộng các mũi tên. |
| gantt.barCornerRadius | number | 2 | Bán kính để xác định đường cong của các góc của thanh. |
| gantt.barHeight | number | null | Chiều cao của thanh đối với tác vụ. |
| 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 | object | null | Một đối tượng chứa kiểu cho mọi mũi tên đường dẫn quan trọng. |
| gantt.criticalPathStyle.stroke | chuỗi | null | Màu của bất kỳ mũi tên đường dẫn quan trọng nào. |
| gantt.criticalPathStyle.strokeWidth | number | 1.4 | Độ dày của mọi mũi tên đường dẫn quan trọng. |
| gantt.defaultStartDate | ngày/số | null |
Nếu không thể tính ngày bắt đầu từ các giá trị trong Bảng dữ liệu, 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 | object | null | Xác định kiểu của các đường lưới ngang bên trong. |
| gantt.innerGridHorizLine.stroke | chuỗi | null | Màu của các đường lưới ngang bên trong. |
| gantt.innerGridHorizLine.strokeWidth | number | 1 | Chiều rộng của đường lưới ngang bên trong. |
| gantt.innerGridTrack.fill | chuỗi | null |
Màu nền của đường lưới bên trong. Nếu bạn không chỉ định innerGridDarkTrack.fill, thì tùy chọn này sẽ áp dụng cho mọi kênh lưới.
|
| gantt.innerGridDarkTrack.fill | chuỗi | null | Màu tô của đường lưới màu tối thay thế. |
| gantt.labelMaxWidth | number | 300 | Dung lượng tối đa được phép của mỗi nhãn việc cần làm. |
| gantt.labelStyle | object | null |
Một đối tượng chứa các kiểu cho nhãn việc cần làm.
labelStyle: {
fontName: Roboto2,
fontSize: 14,
color: '#757575'
},
|
| gantt.percentEnabled | boolean | đúng | Điền vào thanh việc cần làm dựa trên tỷ lệ phần trăm hoàn thành cho việc cần làm đó. |
| gantt.percentStyle.fill | chuỗi | null | Màu của phần trăm hoàn thành phần thanh tác vụ. |
| gantt.shadowEnabled | boolean | đúng |
Nếu đặt thành true, hãy vẽ bóng đổ dưới mỗi thanh tác vụ có các phần phụ thuộc.
|
| gantt.shadowColor | chuỗi | '#000' | Xác định màu của bóng đổ trong mọi thanh tác vụ có các phần phụ thuộc. |
| gantt.shadowOffset | number | 1 | Xác định độ lệch (tính bằng pixel) của bóng trong mọi thanh tác vụ có các phần phụ thuộc. |
| gantt.sortTasks | boolean | đúng | Xác định rằng các tác vụ phải đượ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 một thứ tự như các hàng tương ứng của DataTable. |
| gantt.trackHeight | number | null | Chiều cao bản nhạc. |
| 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 | Mô tả |
|---|---|
draw(data, options) |
Vẽ biểu đồ. Biểu đồ chỉ chấp nhận các lệnh gọi phương thức khác sau khi sự kiện Loại dữ liệu trả về: không có
|
getSelection() |
Trả về một mảng các thực thể biểu đồ đã chọn.
Cá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, chỉ có thể chọn một thực thể vào bất kỳ thời điểm nào.
Loại dữ liệu trả về: Một mảng các phần tử lựa chọn
|
setSelection() |
Chọn các thực thể biểu đồ đã chỉ định. Hủy mọi lựa chọn trước đó.
Cá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ể.
Loại dữ liệu trả về: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên được phân bổ của biểu đồ. Loại dữ liệu trả về: không có
|
Sự kiện
| Event (Sự kiện) | Mô tả |
|---|---|
click |
Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, các phần tử dữ liệu, mục nhập chú giải, trục, đường lưới, hoặc nhãn. Thuộc tính: 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 đồ đã 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 bạn gọi phương thức 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 bạn đã chọn, hãy gọi
Thuộc tính: không có
|
Chính sách về dữ liệu
Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.