网页甘特图Js插件源码

一个简单的、轻量级的、交互式的甘特图Js插件。用户可以添加、编辑、扩张,计划等。

事件配置

var tasks = [
    {
      start: '2022-10-08',
      end: '2022-10-10',
      name: 'Deploy',
      id: "Task 4",
      progress: 50,
      dependencies: 'Task 2'
    },
    {
      start: '2022-10-11',
      end: '2022-10-11',
      name: 'Go Live!',
      id: "Task 5",
      progress: 10,
      dependencies: 'Task 4',
      custom_class: 'bar-milestone'
    }
]

甘特图配置

var gantt_chart = new Gantt(".gantt-target", tasks, {
    header_height: 50,
    column_width: 30,
    step: 24,
    view_modes: [
      'Quarter Day',
      'Half Day',
      'Day',
      'Week',
      'Month',
      'Year'
    ],
    bar_height: 20,
    bar_corner_radius: 3,
    arrow_curve: 5,
    padding: 18,
    view_mode: 'Day',
    date_format: 'YYYY-MM-DD',
    popup_trigger: 'click',
    custom_popup_html: null,
    language: 'en'
});

回调方法

var gantt_chart = new Gantt(".gantt-target", 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);
    },
});