Dhtmlx Gantt教程：创建交互式甘特图的完整指南

// 引入dhtmlxGantt库
import gantt from "dhtmlx-gantt";
 
// 初始化甘特图
gantt.init(document.querySelector('#gantt_here'));
 
// 配置甘特图的设置
gantt.config.columns = [
    {name:"text", label:"Task", width:"*" },
    {name:"start_date", label:"Start Date", align: "center" },
    {name:"duration", label:"Duration", align: "center" }
];
 
gantt.config.lightbox.sections = [
    {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
    {name: "time", type: "duration", map_to: "auto", time_format: [
        "%Y-%m-%d", "%H:%i"
    ]},
];
 
gantt.config.scale_height = 50;
gantt.config.subscales = [
    {unit:"day", step:1, date:"%j %D"}
];
 
// 添加数据到甘特图
gantt.parse(tasks);
 
// 这里的tasks是一个包含任务数据的数组，格式如下：
// [
//   {
//     id: 1,
//     text: "任务1",
//     start_date: "2023-04-01",
//     duration: 5
//   },
//   // ... 更多任务
// ]

这段代码展示了如何使用dhtmlxGantt库来初始化甘特图，设置列和编辑框的配置，并添加数据到图中。这是一个基本的示例，实际应用中可能需要根据具体需求进行更复杂的配置。