简介
一个简单,互动,现代的甘特图图表库,可以拖动,调整大小,调整依赖关系和调整时间尺度。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> `; } });
如下截图:
本文暂时没有评论,来添加一个吧(●'◡'●)