Tổng quan
Tiến trình là một 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ý một dự án phần mềm và muốn minh hoạ ai đang làm gì và khi nào, hoặc nếu bạn đang tổ chức một hội nghị và cần lên lịch cho phòng họp, thì dòng thời gian thường là một lựa chọn trực quan hợp lý. Một loại dòng thời gian phổ biến là biểu đồ Gantt.
Lưu ý: Trong đối tượng Ngày trong JavaScript, các tháng được lập chỉ mục bắt đầu từ 0 và tăng lên đến 11, trong đó tháng 1 là tháng 0 và tháng 12 là tháng 11. Nếu dòng thời gian của bạn có vẻ không đúng một tháng thì đó rất có thể là nguyên nhân. Để biết thêm thông tin, hãy xem trang Ngày và giờ.
Một ví dụ đơn giản
Giả sử bạn muốn lên kế hoạch thời điểm các tổng thống Mỹ thực hiện nhiệm vụ. Ở đây, "tài nguyên" chính 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 như một thanh:
Khi bạn di chuột qua một thanh, phần chú thích sẽ hiển thị với 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 hiển thị, phương thức drawChart() sẽ tạo thực thể cho google.visualization.Timeline(), sau đó điền vào dataTable một hàng cho mỗi chủ tịch.
Bên trong dataTable, cột đầu tiên là tên của chủ tịch, còn cột thứ hai và thứ ba là thời gian bắt đầu và kết thúc. Các mã này có loại Date JavaScript, nhưng cũng có thể là 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 hiển thị phương thức này bên trong div có cùng giá trị nhận dạng (timeline) được 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>
Dòng thời gian trên Google Biểu đồ có thể tuỳ chỉnh được và trong các ví dụ sau, chúng tôi sẽ hướng dẫn bạn một số cách phổ biến để điều chỉnh giao diện của dòng thời gian.
Gắn nhãn thanh
Ngoài các nhãn hàng ("Washington", "Adams", "Jefferson" ở trên), bạn có thể gắn nhãn từng thanh. Ở đây, chúng ta thay đổi nhãn hàng thành số đơn giản và đặt tên từng 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 để chứa
các nhãn thanh: tên đầy đủ của từng tổng thống. Khi có 4 cột trong dòng thời gian dataTable, cột đầu tiên được hiểu là nhãn hàng, cột thứ hai là nhãn thanh, 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>
Các nhãn hàng mới ở trên không cung cấp nhiều thông tin, vì vậy, hãy xoá các nhãn đó bằng tuỳ chọn dòng thời gian showRowLabels.
Theo mặc định, showRowLabels là true. Nếu bạn đặt chính sách này thành false, các nhãn hàng sẽ bị xoá:
<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 dòng thời gian của chúng ta phức tạp hơn, hãy thêm các phó tổng thống và thư ký quốc gia vào biểu đồ của chúng ta. John Adams là phó tổng thống trước khi trở thành tổng thống, còn Thomas Jefferson là ngoại trưởng, 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àu ngay cả khi xuất hiện trên nhiều hàng. Vì vậy, trong biểu đồ sau đây, mỗi người được biểu thị bằng một màu nhất quán.
Một số thư ký của tiểu bang đượ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 hiệu quả về việc 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 của thanh. Người dùng luôn có thể di chuột qua thanh này để xem thông tin về chú thích.
Tiến trình sẽ sắp xếp các hàng theo thứ tự – tổng thống đứng trên phó chủ tịch và đứng đầu thư ký quốc gia – bởi 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 2 tổng thư ký hoặc 2 tổng thống trong dataTable không ảnh hưởng đến biể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('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ác giáo hoàng, tại một thời điểm chỉ có một tổng thống Hoa Kỳ. Vì vậy, nếu chúng ta gắn nhãn tất cả các hàng của mình là "Tổng thống", tiến trình sẽ kết hợp 3 hàng của biểu đồ đầu tiên thành một hàng để bản trình bày trở nên rõ ràng hơn. Bạn có thể kiểm soát hành vi này bằng tuỳ 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 ba:
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, Google Biểu đồ chọn các màu được tối ưu hóa để tăng tính thẩm mỹ và tính dễ đọc (bao gồm cả người dùng khiếm thị). Bạn có thể điều chỉnh hành vi mặc định bằng các tuỳ chọn colorByRowLabel, singleColor, backgroundColor và colors.
Tuỳ chọn colorByRowLabel tô màu giống nhau cho 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ó 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 ta sẽ ghi đè 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 đều có cùng một màu bất kể các thanh đó nằm trên hàng nào, hãy sử dụng tuỳ chọn singleColor:
Trong mã bên dưới, singleColor được đặt thành giá trị hex để tô màu tất cả các thanh màu xanh lục nhạ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.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 hàng bằng tuỳ chọn backgroundColor:
backgroundColor được chỉ định dưới dạng một giá trị hex. Ở đây, chúng ta ghép nối nó với colorByRowLabel để hiển thị các kênh 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 màu xen kẽ hoặc không xen kẽ theo chỉ mục hàng, hãy sử dụng tuỳ chọn alternatingRowStyle (phiên bản hoạt động 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 của các thanh riêng lẻ, hãy sử dụng tuỳ chọn colors:
colors lấy một mảng giá trị hex, được á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 so với màu được liệt kê, 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 Biểu đồ trên Google, chứ không chỉ riêng dòng thời gian.)
Một cách khác để kiểm soát màu của các thanh riêng lẻ 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 từng hàng bằng rowLabelStyle và cho các nhãn trên mỗi thanh bằng barLabelStyle. Cả hai đều được minh hoạ bên dưới.
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 cho 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 các điểm cuối của 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, sau đây là 2 ví dụ, ví dụ đầu tiên có đường lưới chồng chéo và ví dụ thứ hai không có.
Sau đây là mã trùng lặp với đường 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ú thích
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 dòng thời gian bằng cách thêm cột chú thích 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 bạn di chuột qua một thanh, cửa sổ chú thích sẽ hiển thị với văn bản đượ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 các giá trị giả (ở đây là null) để chú giải công cụ 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 trực quan 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 đại diện cho một thanh dòng 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 của hàng | Nhãn thanh (không bắt buộc) | Chú thích (không bắt buộc) | Bắt đầu | End |
| Loại dữ liệu: | string | string | string | số hoặc ngày | số hoặc ngày |
| Vai trò: | data | data | chú giải công cụ | data | data |
Tuỳ chọn cấu hình
| Tên | |
|---|---|
| alternatingRowStyle |
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 chẵn sẽ có màu đậm hơn). Nếu giá trị là false (sai), nền biểu đồ sẽ có một màu đồng nhất. Nếu giá trị là true, nền biểu đồ sẽ thay thế sắc thái phủ của 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
|
| avoidOverlappingGridLines |
Liệu các phần tử hiển thị (ví dụ: các thanh trong dòng thời gian) có che khuất các đường lưới hay không. Nếu đặt là false, các đường lưới có thể bị các phần tử hiển thị che phủ hoàn toàn. Nếu là true, các phần tử hiển thị có thể được thay đổi để giữ cho các đường lưới hiển thị được. Loại: boolean
Mặc định: true
|
| backgroundColor |
Màu nền cho vùng chính của 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ẽ sử dụng cho các thành phần trong 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
|
| enableInteractivity |
Liệu biểu đồ có gửi các sự kiện dựa trên người dùng hay phản ứng với hoạt động tương tác của người dùng hay không. Nếu đặt là false, biểu đồ sẽ không gửi "select" (đã chọn) hoặc các sự kiện dựa trên hoạt động tương tác khác (nhưng sẽ gửi các sự kiện lỗi sẵn sàng hoặc 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
|
| fontName |
Phông chữ mặc định cho tất cả văn bản trong biểu đồ. Bạn có thể ghi đè thuộc tính này bằng cách sử dụng thuộc tính cho các phần tử cụ thể trong biểu đồ. Loại: chuỗi
Mặc định: "vi"
|
| fontSize |
Cỡ 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 đè thuộc tính này bằng cách sử dụng thuộc tính cho các phần tử cụ thể trong biểu đồ. Loại: số
Mặc định: tự động
|
| forceIFrame |
Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.) Loại: boolean
Mặc định: false
|
| độ 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
|
| timeline.barLabelStyle |
Đối tượng chỉ định kiểu văn bản của nhãn thanh. Nó có định dạng 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 chính sách này thành true, thì màu của mọi thanh trên hàng sẽ giống nhau. Tuỳ chọn mặc định là sử dụng một màu cho mỗi nhãn của thanh. Loại: boolean
Mặc định: false
|
| timeline.groupByRowLabel |
Nếu bạn đặt chính sách này thành false, hãy tạo một hàng cho mỗi mục nhập Loại: boolean
Mặc định: true
|
| timeline.rowLabelStyle |
Đối tượng chỉ định kiểu văn bản của nhãn hàng. Nó có định dạng sau: {color: <string>, fontName: <string>, fontSize: <string>}
Loại: đối tượng
Mặc định: rỗng
|
| timeline.showBarLabels |
Nếu bạn đặt thành false, hãy bỏ qua nhãn thanh. Lựa chọn mặc định là hiện các cột đó. Loại: boolean
Mặc định: true
|
| timeline.showRowLabels |
Nếu bạn đặt thành false, hãy bỏ qua các nhãn hàng. Lựa chọn mặc định là hiện các cột đó. Loại: boolean
Mặc định: true
|
| timeline.singleColor |
Màu sắc giống nhau cho tất cả các thanh. Được chỉ định dưới dạng một giá trị hex (ví dụ: "#8d8"). Loại: chuỗi
Mặc định: rỗng
|
| tooltip.isHtml |
Đặt thành Lưu ý: Tính năng tuỳ chỉnh nội dung chú thích HTML thông qua vai trò dữ liệu của cột chú giải công cụ không được hỗ trợ trong hình ảnh Biểu đồ bong bóng. Loại: boolean
Mặc định: true
|
| tooltip.trigger |
Hoạt động tương tác của người dùng khiến chú thích xuất hiện:
Loại: chuỗi
Mặc định: "lấy nét"
|
| 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 đồ 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
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ó
|
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ỳ.
Loại dữ liệu trả về: Mảng gồm 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. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. 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 rỗng) và một danh mục cho một hàng (chỉ mục của cột là rỗng). Tài sản: hàng, cột
|
onmouseout |
Được kích hoạt khi người dùng di chuột ra khỏi một thực thể trực quan. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. 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 rỗng) và một danh mục cho một hàng (chỉ mục của cột là rỗng). Tài sản: hàng, cột
|
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 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
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.