The Gantt pattern 

Gantt.config. columns = [{name: "project_num", label: "project_num", width: 80,align: "center"}, {name: "Project_type "," label ": "project_type", width: 80, align: "center"}, {name: "text", label: "project name ", width: 100, align: "Center"}, / / {name: "add", the label: ""}, / / ➕ icon column shows Click the pop-up add box Hide not];Copy the code

Time schedule display code block gantt.config.scale_unit = "year"; // The first time scale, that is, the units of the X-axis, includes: "minute", "hour", "day", "week", "month", "year" gantt.config.step = 1; gantt.config.date_scale="%Y"; Gantt.config. end_date= new Date(2025,11,31) gantt.config.start_date= new Date(2020,0,1) // 0 indicates January Subscales = [// second time scale unit // {unit: "day", step: 1, date: "%D"} //];Copy the code

There is no difference in the render property of the data structure

Data: [{id: 1, // task ID project_num:'p1', project_type:' project 1', text: 'task 1', start_date: }, {ID: 2, text: 0}, "03-04-2020", // type: "project", render: "split", parent: 0, Parent: 1,}, {id: 3, text: 1}, start_date: "03-04-2020", end_date: "03-12-2020", Duration: 1, parent: 1, color:'green'}, {id: 4, text: 2, start_date: "12-12-2020", end_date: "12-12-2021", duration: 2, parent: 1, color:'green'}, {id: 4, text: "Phase 3", start_date: "12-12-2022", end_date: "12-12-2023", duration: 1, parent: 1,}, {id: 5, project_num:'p2', project_type:' project 2', text: 'task 2', start_date: "12-12-2024", type: "project", render: "split", parent: 0, }, ],Copy the code

API quick links

  • DhtmlxGantt API task style configuration docs.dhtmlx.com/gantt/deskt…

www.jianshu.com/p/7039ca442… Code basic preparation docs.dhtmlx.com/gantt/api__ environment… DhtmlxGantt Api blog.csdn.net/qq_18209125… Basic configuration items dhtmlxGantt gantt chart blog.csdn.net/ArthurWang7… DHTMLX Gantt Chart custom style