参考：https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html
可使用NuGet、Bower、npm包管理器安装（应用在asp.net、nodejs等项目上）。
Nuget nuget install DHTMLX.Gantt npm npm install dhtmlx-gantt或使用CDN、下载JS库引入（简单HTML应用）。
CDN <link href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" type="text/css"> <script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script> js <script type="text/javascript" src="http://www.likecs.com/codebase/dhtmlxgantt.js"></script> <link href="http://www.likecs.com/codebase/dhtmlxgantt.css"> 初始化https://docs.dhtmlx.com/gantt/desktop__initializing_gantt_chart.html
<!DOCTYPE html> <html> <head> <script src="http://www.likecs.com/codebase/dhtmlxgantt.js"></script> <link href="http://www.likecs.com/codebase/dhtmlxgantt.css"> </head> <body> <div></div> <script type="text/javascript"> gantt.init("gantt_here"); </script> </body> </html> 初始化步骤引入js
引入css
定义容器div
js调用gantt.init初始化
属性、模板、配置参考：https://docs.dhtmlx.com/gantt/desktop__common_configuration.html
自定义甘特图，可实现自定义展示（通过config和templates），自定义交互（通过method和event）以及自定义组件布局（layout）。
两个配置文件
gantt.config - 配置dates数据, scale刻度（年度、月度等）, controls控件 等的选项
gantt.templates - 甘特图中使用的dates数据 and labels标签的格式化模板.
配置 API：https://docs.dhtmlx.com/gantt/api__refs__gantt_props.html 示例在API中查找到该属性的各元素定义，参照使用。
gantt.scales = [ { unit: "year", step: 1, format: "%Y" } ]; gantt.init("gantt_here"); 注意事项配置选项（gantt.xxx）要在初始化（gantt.init）前。
模板 API：https://docs.dhtmlx.com/gantt/api__refs__gantt_templates.html 示例例如使用模板格式化任务名称，首先查找到其原型定义。
gantt.templates.task_text=function(start, end, task){ return task.text; };然后参考原型方法，修改。
gantt.templates.task_text=function(start,end,task){ return "<b>名称:</b> "+task.text+",<b> 负责人:</b> "+task.users; }; gantt.init("gantt_here"); 注意事项：模板的定义（gantt.templates.xxx）要在初始化（gantt.init）前。
自定义布局https://docs.dhtmlx.com/gantt/desktop__layout_config.html
5.0及以上支持该配置。
默认布局为左侧是任务信息列表，右侧是甘特图时间线，自定义布局可在右侧、下方显示更多信息。
自定义布局可显示资源列表和资源的甘特图时间线，但仅Pro版本可用。
默认布局为：
gantt.config.layout = { css: "gantt_container", rows:[ { cols: [ { // 默认任务列表 view: "grid", scrollX:"scrollHor", scrollY:"scrollVer" }, { resizer: true, width: 1 }, { // 默认甘特图（时间线） view: "timeline", scrollX:"scrollHor", scrollY:"scrollVer" }, { view: "scrollbar", id:"scrollVer" } ]}, { view: "scrollbar", id:"scrollHor" } ] }自定义布局，修改gantt.config.layout即可。
grid - 定义甘特图的表格，显示任务的表格ID为grid;
timeline - 定义时间线，显示任务时间线ID为"timeline";
scrollbar - 滚动条（表格和时间线）.
事件处理https://docs.dhtmlx.com/gantt/desktop__handling_events.html
用户拖拽时间线、添加任务等事件的处理。
如果仅用作甘特图的展示，则可忽略该部分，并且通过template、config配置屏蔽掉添加任务等功能。
但可以通过配置event，实现可视化排程，在甘特图时间线和任务grid中添加任务、添加任务链接、修改任务属性，可拖拽来更新任务时间等。
在甘特图上所做操作，需要通过event的相应方法，结合ajax提交到后台更改数据，否则页面刷新后数据丢失。
附加事件后返回事件ID，使用该ID可移除
//附加事件，返回事件ID var eventId = gantt.attachEvent("onTaskClick", function(id, e) { alert("You've just clicked an item with添加并移除所有">添加并移除所有定义事件ID数组，添加时记录ID，移除时循环处理。
// save handler ids when attaching events var events = []; events.push(gantt.attachEvent("onTaskClick", function(id, e) { alert("You've just clicked an item withonTaskDblClick", function(id, e) { alert("You've just double clicked an item with检查是否有事件响应">检查是否有事件响应 gantt.attachEvent("onTaskClick", function(id, e) { alert("You've just clicked a task withonTaskClick"); //returns 'true' 事件处理函数中取消事件响应返回false，则中断事件响应链。
gantt.attachEvent("onBeforeTaskChanged", function(id, mode, old_task){ var task = gantt.getTask(id); if(mode == gantt.config.drag_mode.progress){ if(task.progress < old_task.progress){ dhtmlx.message(task.text + " progress can't be undone!"); return false; } } return true; }); 事件响应函数中访问甘特图对象 gantt.attachEvent("onTaskClick", function(id, e){ parentId = this.getTask(id).parent; });this.getTask(id) 等方法参考方法API。
https://docs.dhtmlx.com/gantt/api__refs__gantt_methods.html
https://docs.dhtmlx.com/gantt/api__refs__gantt_methods.html
其他Ajax等。
ajax i18N多语言 gantt.i18n.setLocale({ labels: { gantt_save_btn: "New Label", gantt_cancel_btn: "New Label" } }); 属性配置常用APIAjax等。
autofit 表格列自适应