Tổng quan
Dòng thời gian là biểu đồ mô tả cách sử dụng một nhóm tài nguyên theo thời gian. Nếu bạn đang quản lý dự án phần mềm và muốn minh hoạ cho xem ai đang làm gì, khi nào hoặc nếu bạn đang tổ chức hội nghị và cần lên lịch cho các phòng họp, thì tiến trình thường là một lựa chọn trực quan hợp lý. Một loại tiến trình phổ biến là biểu đồ Gantt.
Lưu ý: Trong các đối tượng Ngày JavaScript, các tháng được lập chỉ mục từ 0 cho đến 11, trong đó tháng 1 là tháng 1 và tháng 12 là tháng 11. Nếu có vẻ như dòng thời gian của bạn không có sẵn trong một tháng, thì rất có thể đây là lý do. Để biết thêm thông tin, hãy xem trang Ngày và giờ.
Ví dụ đơn giản
Giả sử bạn muốn lập âm mưu khi các tổng thống Mỹ phục vụ nhiệm kỳ của họ. Ở đây, "tài nguyên" là các tổng thống và chúng ta có thể minh hoạ nhiệm kỳ của mỗi tổng thống dưới dạng một thanh:
Khi di chuột qua một thanh, bạn sẽ thấy chú giải công cụ chứa thông tin chi tiết hơn.
Sau khi tải gói timeline và xác định lệnh gọi lại để vẽ biểu đồ khi trang được hiển thị, phương thức drawChart() sẽ tạo bản sao của google.visualization.Timeline() và sau đó điền vào dataTable bằng một hàng cho mỗi tổng thống.
Bên trong dataTable, cột đầu tiên là tên của chủ sở hữu và cột thứ hai và thứ ba là thời gian bắt đầu và kết thúc. Các biến này có loại Date của JavaScript, nhưng cũng có thể là các số thuần tuý.
Cuối cùng, chúng tôi gọi phương thức draw() của biểu đồ. Phương thức này sẽ hiển thị phương thức này bên trong div với cùng giá trị nhận dạng (timeline) được sử dụng khi container được khai báo trong dòng đầu tiên của drawChart().
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>
Bạn có thể tùy chỉnh tiến trình của Biểu đồ Google và trong các ví dụ sau, chúng tôi sẽ chỉ cho bạn một số cách phổ biến để điều chỉnh giao diện của tiến trình.
Gắn nhãn cho thanh
Ngoài các nhãn hàng ("ington", "Adams", "Jefferson" ở trên), bạn có thể gắn nhãn cho từng thanh. Ở đây, chúng tôi thay đổi nhãn hàng thành các số đơn giản và đặt tên của tổng thống trên thanh của ông.
Trong mã này, chúng tôi đã chèn một cột mới vào dữ liệu của mình để giữ các nhãn thanh: tên đầy đủ của mỗi tổng thống. Khi có bốn cột trong tiến trình dataTable, cột đầu tiên được hiểu là nhãn hàng, cột thứ hai là nhãn thanh và cột thứ ba và thứ tư là bắt đầu và kết thúc.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 200px;"></div>
Nhãn hàng mới ở trên không nhiều thông tin, vì vậy hãy xoá
các hàng này bằng dòng thời gian showRowLabels.
Theo mặc định, showRowLabels là true. Việc đặt thành false sẽ xóa nhãn hàng:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { showRowLabels: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example2.2" style="height: 180px;"></div>
Ví dụ nâng cao
Để làm cho tiến trình của chúng ta trở nên phức tạp hơn, hãy thêm phó tổng thống và tổng thư ký tiểu bang vào biểu đồ của chúng tôi. John Adams là phó tổng thống trước khi trở thành tổng thống và Thomas Jefferson là thư ký tiểu bang, sau đó là phó tổng thống và cuối cùng là tổng thống.
Trong dòng thời gian, một tài nguyên sẽ có cùng một màu ngay cả khi nó xuất hiện trên nhiều hàng, vì vậy, trong biểu đồ sau, mỗi người được biểu thị bằng một màu nhất quán.
Một số thư ký trạng thái được phân phát trong thời gian rất ngắn, vì vậy, biểu đồ này là một thử nghiệm tốt để gắn nhãn. Khi nhãn quá lớn so với thanh, nhãn đó sẽ được viết tắt hoặc bị loại bỏ, tuỳ thuộc vào kích thước thanh. Người dùng luôn có thể di chuột qua thanh để xem thông tin về chú giải công cụ.
Tiến trình sẽ sắp xếp các hàng theo thứ tự—chủ tịch trên phó tổng thống ở phía trên cùng của tổng thư ký tiểu bang—vì đó là thứ tự xuất hiện trong mã bên dưới. Tuy nhiên, bố cục của các thanh chỉ được xác định theo thời gian bắt đầu và kết thúc, vì vậy việc hoán đổi hai thư ký của tiểu bang hoặc hai tổng thống trong dataTable không ảnh hưởng đến biểu đồ này.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
chart.draw(dataTable);
}
</script>
<div id="example3.1" style="height: 200px;"></div>
Đặt các thanh trên một hàng
Không giống như
cửa sổ bật lên, mỗi lần chỉ có thể có một tổng thống Hoa Kỳ. Vì vậy, nếu gắn nhãn tất cả các hàng là "Chủ tịch", thì tiến trình sẽ kết hợp ba hàng của biểu đồ đầu tiên thành một hàng để trình bày rõ hơn. Bạn có thể kiểm soát hành vi này bằng
tùy chọn groupByRowLabel.
Dưới đây là hành vi mặc định:
Bây giờ, hãy đặt groupByRowLabel thành false và chia một hàng thành 3 hàng:
Mã để tắt tính năng nhóm:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
timeline: { groupByRowLabel: false }
};
chart.draw(dataTable, options);
}
</script>
<div id="example4.2" style="height: 200px;"></div>
Kiểm soát màu sắc
Theo mặc định, Bảng xếp hạng của Google chọn màu được tối ưu hoá để thể hiện tính thẩm mỹ và khả năng dễ đọc (bao gồm cả người dùng bị khiếm thị). Bạn có thể điều chỉnh hành vi mặc định bằng các tùy chọn colorByRowLabel, singleColor, backgroundColor và colors.
Tuỳ chọn colorByRowLabel tô màu tất cả các thanh trên cùng một hàng. Đây có thể là lựa chọn phù hợp khi có các khoảng trống giữa các thanh của bạn.
colorByRowLabel mặc định là false, vì vậy
ở đây, chúng tôi ghi đè giá trị này và đặt thành true.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ],
[ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 100px;"></div>
Nếu bạn muốn tất cả các thanh có cùng một màu sắc, bất kể các thanh đó ở trên hàng nào, hãy sử dụng tùy chọn singleColor:
Trong mã bên dưới, singleColor được đặt thành giá trị thập lục phân để tô màu xanh lục cho tất cả các thanh:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { singleColor: '#8d8' },
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.2" style="height: 150px;"></div>
Bạn có thể kiểm soát màu nền của các hàng bằng tuỳ chọn backgroundColor:
backgroundColor được chỉ định làm giá trị thập lục phân. Ở đây,
chúng tôi sẽ ghép nối nó với colorByRowLabel để hiển thị các bản nhạc trong
một hội nghị:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.3" style="height: 150px;"></div>
Sau đó, để đặt màu nền thành xen kẽ hoặc không sắp xếp theo chỉ mục hàng,
hãy sử dụng tùy chọn alternatingRowStyle (đang hoạt động phiên bản 51 trở lên):
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.4');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ],
[ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
[ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
[ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
[ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);
var options = {
timeline: { colorByRowLabel: true },
alternatingRowStyle: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.4" style="height: 150px;"></div>
Nếu bạn muốn kiểm soát màu sắc của từng thanh, hãy sử dụng tùy chọn colors:
colors lấy một mảng giá trị thập lục phân, áp dụng cho các thanh theo thứ tự:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.5');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.5" style="height: 150px;"></div>
Nếu biểu đồ của bạn yêu cầu nhiều màu hơn màu được liệt kê, thì biểu đồ sẽ hoạt động như thể singleColor được đặt thành màu đầu tiên trong danh sách. (Điều này đúng với tất cả các Bảng xếp hạng của Google, chứ không chỉ dòng thời gian.)
Một cách khác để kiểm soát màu sắc của từng thanh là sử dụng cột có vai trò định kiểu.
Mã để thêm và điền vào cột kiểu:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.6');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
[ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example5.6" style="height: 150px;"></div>
Thay đổi phông chữ
Bạn có thể chọn kiểu chữ và phông chữ cho nhãn của mỗi hàng bằng rowLabelStyle, và cho nhãn trên mỗi thanh bằng barLabelStyle. Cả hai đều được minh hoạ dưới đây.
Lưu ý: Hãy nhớ chọn kiểu chữ mà trình duyệt của người dùng có thể hiển thị.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example6.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var options = {
colors: ['#cbb69d', '#603913', '#c69c6e'],
timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
};
chart.draw(dataTable, options);
}
</script>
<div id="example6.1" style="height: 200px;"></div>
Bạn không thể đặt màu của văn bản barLabel.
Đường lưới chồng chéo
Google Biểu đồ thực hiện những điều chỉnh nhỏ đối với điểm cuối thanh để tránh che khuất đường lưới dòng thời gian. Để ngăn hành vi này, hãy đặt tuỳ chọn avoidOverlappingGridLines thành false.
Để minh hoạ hiệu ứng này, dưới đây là hai ví dụ, ví dụ đầu tiên có đường lưới trùng lặp và ví dụ thứ hai không có lưới.
Dưới đây là mã chồng chéo lên các lưới:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example7.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
[ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}
</script>
<div id="example7.1" style="height: 200px;"></div>
Tuỳ chỉnh chú giải công cụ
Bạn có thể tuỳ chỉnh nội dung mà người dùng nhìn thấy khi họ di chuột qua các thanh của tiến trình bằng cách thêm cột chú giải công cụ vào bảng dữ liệu gồm 5 cột. Để cung cấp chú giải công cụ không mặc định, mỗi hàng của bảng dữ liệu phải có tất cả 5 cột (nhãn hàng, nhãn thanh, chú giải công cụ, bắt đầu và kết thúc):
Khi di chuột qua một thanh, bạn sẽ thấy chú giải công cụ có nội dung được xác định trong cột thứ ba. Trong biểu đồ này, chúng ta phải đặt cột thứ hai thành
giá trị giả (tại đây, null) để chú giải công cụ của chúng tôi có thể tồn tại
trong cột thứ ba.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
chart.draw(dataTable);
}
</script>
</head>
<body>
<div id="timeline-tooltip" style="height: 180px;"></div>
</body>
</html>
Đang tải
Tên gói google.charts.load là timeline:
google.charts.load("current", {packages: ["timeline"]});
Tên lớp của hình ảnh là google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
Định dạng dữ liệu
Hàng: Mỗi hàng trong bảng trình bày thanh thời gian.
Cột:
| Cột 0 | Cột 1 | Cột 2 | Cột 3 | Cột 4 | |
|---|---|---|---|---|---|
| Mục đích: | Nhãn hàng | Nhãn thanh (không bắt buộc) | Chú giải công cụ (không bắt buộc) | Bắt đầu | Kết thúc |
| Loại dữ liệu: | chuỗi | chuỗi | chuỗi | số hoặc ngày | số hoặc ngày |
| Vai trò: | data | data | chú giải công cụ | data | data |
Các lựa chọn về cấu hình
| Tên | |
|---|---|
| kiểu hàng chỉnh |
Liệu biểu đồ có nên thay thế màu nền theo chỉ mục hàng hay không (tức là màu nền phủ màu của các hàng được lập chỉ mục đều màu sắc tối hơn). Nếu giá trị sai thì nền biểu đồ sẽ có một màu đồng nhất. Nếu là true, nền của biểu đồ sẽ thay thế phủ màu theo chỉ mục hàng. (Lưu ý: phiên bản 51 trở lên đang hoạt động) Loại: Boolean
Mặc định: true
|
| tránh tránh lưới chồng chéo |
Liệu các phần tử hiển thị (ví dụ: các thanh trong dòng thời gian) có nên che khuất các đường lưới hay không. Nếu giá trị là false, các đường lưới có thể bị bao phủ hoàn toàn bởi các phần tử hiển thị. Nếu là true, các thành phần hiển thị có thể được thay đổi để hiển thị các đường lưới. Loại: Boolean
Mặc định: true
|
| màu nền |
Màu nền của vùng chính trên biểu đồ. Có thể là một chuỗi màu HTML đơn giản, ví dụ: Loại: chuỗi hoặc đối tượng
Mặc định: "trắng"
|
| màu |
Màu sắc sử dụng cho các phần tử biểu đồ. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: Loại: Mảng chuỗi
Mặc định: màu mặc định
|
| bật sự tương tác |
Biểu đồ có gửi sự kiện dựa trên người dùng hay phản ứng với tương tác của người dùng không. Nếu giá trị là sai, biểu đồ sẽ không gửi "sự kiện" hoặc các sự kiện dựa trên lượt tương tác khác (nhưng sẽ gửi sự kiện sẵn sàng hoặc sự kiện lỗi) và sẽ không hiển thị văn bản di chuột hay thay đổi tuỳ thuộc vào hoạt động đầu vào của người dùng. Loại: Boolean
Mặc định: true
|
| phông chữ |
Phông chữ mặc định cho tất cả văn bản trong biểu đồ. Bạn có thể ghi đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể. Loại: chuỗi
Mặc định: 'Arial'
|
| Kích thước phông chữ |
Kích thước phông chữ mặc định, tính bằng pixel, của tất cả văn bản trong biểu đồ. Bạn có thể ghi đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể. Loại: số
Mặc định: tự động
|
| forceIFrame |
Vẽ biểu đồ bên trong một khung cùng dòng. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.) Loại: Boolean
Mặc định: sai
|
| độ cao |
Chiều cao của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều cao của phần tử chứa
|
| Dòng thời gian.barLabelStyle |
Một đối tượng chỉ định kiểu văn bản của nhãn thanh. Phần nội dung có định dạng như sau: {fontName: <string>, fontSize: <string>}
Ngoài ra, hãy xem Loại: đối tượng
Mặc định: rỗng
|
| timeline.colorByRowLabel |
Nếu bạn đặt giá trị thành true, hãy đặt màu giống nhau cho mọi thanh trên hàng. Tuỳ chọn mặc định là sử dụng một màu cho mỗi nhãn thanh. Loại: Boolean
Mặc định: sai
|
| Dòng thời gian.groupByRowLabel |
Nếu bạn đặt giá trị này thành false, hãy tạo một hàng cho mỗi mục Loại: Boolean
Mặc định: true
|
| Dòng thời gian.hàng Nhãn |
Đối tượng chỉ định kiểu văn bản nhãn hàng. Phần nội dung có định dạng như sau: {color: <string>, fontName: <string>, fontSize: <string>}
Loại: đối tượng
Mặc định: rỗng
|
| timeline.showBarLabels |
Nếu đặt thành false, hãy bỏ qua các nhãn thanh. Tùy chọn mặc định là hiển thị các đề xuất đó. Loại: Boolean
Mặc định: true
|
| timeline.showRowLabels |
Nếu đặt thành false, hãy bỏ qua nhãn hàng. Tùy chọn mặc định là hiển thị các đề xuất đó. Loại: Boolean
Mặc định: true
|
| tiến trình.singleColor |
Tất cả các thanh đều có màu sắc giống nhau. Được chỉ định dưới dạng giá trị thập lục phân (ví dụ: "#8d8"). Loại: chuỗi
Mặc định: rỗng
|
| chú giải công cụ.isHtml |
Hãy đặt thành Lưu ý: tuỳ chỉnh nội dung chú giải công cụ HTML thông qua vai trò dữ liệu cột chú giải công cụ không được hỗ trợ bởi hình ảnh Biểu đồ bong bóng. Loại: Boolean
Mặc định: true
|
| chú giải công cụ trong trình kích hoạt |
Tương tác của người dùng khiến chú giải công cụ được hiển thị:
Loại: chuỗi
Mặc định: "tiêu điểm"
|
| chiều rộng |
Chiều rộng của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều rộng của phần tử chứa
|
Phương thức
| Phương thức | |
|---|---|
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ó
|
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ó
|
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
|
Sự kiện
| Tên | |
|---|---|
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
|
onmouseover |
Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Truyền lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng bị rỗng) và một danh mục cho một hàng (chỉ mục cột rỗng). Tài sản: hàng, cột
|
onmouseout |
Được kích hoạt khi người dùng di chuột khỏi một thực thể hình ảnh. Chuyển trở lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng bị rỗng) và một danh mục cho một hàng (chỉ mục cột rỗng). Tài sản: hàng, cột
|
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.