简介

一个简单，互动，现代的甘特图图表库，可以拖动，调整大小，调整依赖关系和调整时间尺度。Github star 13K+，基于MIT协议，运行效果截图如下：

快速上手

安装

 
npm install frappe-gantt
 

用法

依赖momentjs和snapsvg

将其包含在您的HTML中

 
<script src="frappe-gantt.min.js" />
 

创建一个svg元素

 
<svg id="gantt"></svg>
 

初始化一个新的甘特对象

 
var tasks = [
 {
 id: 'Task 1',
 name: 'Redesign website',
 start: '2016-12-28',
 end: '2016-12-31',
 progress: 20,
 dependencies: 'Task 2, Task 3'
 },
 ...
]
var gantt = new Gantt("#gantt", tasks);

高级用法

添加事件侦听器

 
var gantt = new Gantt('#gantt', tasks, {
 on_click: function (task) {
 console.log(task);
 },
 on_date_change: function(task, start, end) {
 console.log(task, start, end);
 },
 on_progress_change: function(task, progress) {
 console.log(task, progress);
 },
 on_view_change: function(mode) {
 console.log(mode);
 }
});

弹出窗口中的自定义HTML

 
var gantt = new Gantt('#gantt', tasks, {
 // can be a function that returns html
 // or a simple html string
 custom_popup_html: function(task) {
 // the task object will contain the updated
 // dates and progress value
 const end_date = task._end.format('MMM D');
 return `
 <div class="details-container">
 <h5>${task.name}</h5>
 <p>Expected to finish by ${end_date}</p>
 <p>${task.progress}% completed!</p>
 </div>
 `;
 }
});

如下截图：