Có vẻ như bạn đang theo dõi chế độ xem biểu đồ Gantt nhiều hơn, mặc dù nếu bạn chỉ muốn đánh dấu ngày một cột mốc cần hoàn thành thì dòng thời gian sẽ hoạt động.
Google Visualization API
Trước hết tôi sẽ có một cái nhìn tại Google Visualization API. Cụ thể là annotated timeline visualization.Điều này thực sự rất giống với dòng thời gian được sử dụng trên Google finance website. Sử dụng chế độ xem này, mỗi dự án có thể là một đường ngang trên khung nhìn, với các mốc quan trọng được đánh dấu cho mỗi dự án. Lưu ý rằng các điểm đánh dấu là tương tác. Vì đây là tất cả Javascript, bạn cũng có thể có các điều khiển cross-viz, do đó, hãy nhấp vào một cái gì đó trên dòng thời gian, có thể thay đổi trực quan hóa khác trên cùng một trang chẳng hạn.
Bạn thực sự có thể thử các cấu hình khác nhau của tất cả các hình ảnh có sẵn bằng cách sử dụng Google Code Playground. Điều này sẽ cung cấp cho bạn một cách dễ dàng để xác minh nếu điều này (hoặc một cái khác) sẽ đáp ứng yêu cầu của bạn.
Tôi đã thực hiện một số thử nghiệm với sân chơi mã. Hãy thử mã dưới đây nếu bạn muốn. Bạn có thể sao chép/dán nó vào trình chỉnh sửa mã sân chơi.
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Project');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Project');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows(7);
data.setValue(0, 0, new Date(2008, 1 ,1));
data.setValue(0, 1, 1);
data.setValue(0, 2, 'P1:MS1');
data.setValue(0, 3, 'Project begins');
data.setValue(1, 0, new Date(2008, 1 ,2));
data.setValue(1, 1, 1);
data.setValue(1, 4, 2);
data.setValue(1, 5, 'P2:MS1');
data.setValue(1, 6, 'Project begins');
data.setValue(2, 0, new Date(2008, 1 ,3));
data.setValue(2, 1, 1);
data.setValue(2, 4, 2);
data.setValue(3, 0, new Date(2008, 1 ,4));
data.setValue(3, 1, 1);
data.setValue(3, 4, 2);
data.setValue(3, 5, 'P2:MS2');
data.setValue(3, 6, 'Completed development');
data.setValue(4, 0, new Date(2008, 1 ,5));
data.setValue(4, 1, 1);
data.setValue(4, 2, 'P1:MS2');
data.setValue(4, 3, 'Completed testing');
data.setValue(4, 4, 2);
data.setValue(5, 0, new Date(2008, 1 ,6));
data.setValue(5, 1, 1);
data.setValue(5, 4, 2);
data.setValue(6, 0, new Date(2008, 1 ,7));
data.setValue(6, 4, 2);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {
'displayAnnotations': true,
'displayExactValues': true,
'displayRangeSelector' : false,
'displayZoomButtons': false,
'legendPosition': 'newRow',
'max': 3,
'min': 0,
'scaleType': 'allfixed',
'thickness': 2,
});
}
Google Charts API
Một lựa chọn khác là sử dụng các Google Charts API để tạo ra một biểu đồ Gantt. Đây là một chút phức tạp hơn vì nó không có một trực quan cho việc này ra khỏi hộp. Tuy nhiên, bằng cách sử dụng một biểu đồ thanh ngang nó sẽ có thể quay của riêng bạn. This article sẽ đưa bạn qua các bước cần thiết để tạo ra một biểu đồ Gantt mà trông giống như sau:
Điểm thú vị ở đây là biểu đồ Gantt trên được tự động tạo ra qua API bảng xếp hạng sử dụng một URL. Thử nhấp vào URL dưới đây:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
Vâng tôi nghĩ rằng thats khá mát mẻ.
FusionWidgets v3
Như một gợi ý cuối cùng bạn có thể nhìn vào FusionWidgets, trong đó có một số tùy chọn hiển thị rất mạnh mẽ. Tất cả các widget của họ đều dựa trên flash. Điều này được liệt kê cuối cùng bởi vì nó không phải là mã nguồn mở và không miễn phí. Tôi đã không sử dụng nó cá nhân, không giống như trên hai, nhưng các ví dụ trông tuyệt vời.
Tôi hy vọng những đề xuất này sẽ hữu ích.
Dòng thời gian có siêu liên kết? – tster
có. . . . . . – leora
Nếu bạn muốn có một công cụ có lẽ bạn nên yêu cầu. –