免费JS甘特图组件dhtmlxgantt (3)

修改增加在完成部分显示完成的进度。

gantt.templates.progress_text = function (start, end, task) { return "<span>" + Math.round(task.progress * 100) + "% </span>"; }; task_class 时间线任务条的CSS gantt.templates.task_class = function(start, end, task){return "";}; task_unscheduled_time 未定义时间的任务 时间线任务条样式自定义

https://docs.dhtmlx.com/gantt/samples/04_customization/04_task_styles.html

示例中定义了高中低三个优先级的任务，根据不同的优先级应用不同的样式，优先级高的应用为红色。

也可以根据任务是否超期等应用不同的样式，例如超期为红色，普通为绿色。

时间线时间轴的缩放（通过按钮或鼠标滚轮）

适应屏幕、放大、缩小：
https://docs.dhtmlx.com/gantt/samples/03_scales/13_zoom_to_fit.html

滚动鼠标缩放：
https://docs.dhtmlx.com/gantt/samples/03_scales/14_scale_zoom_by_wheelmouse.html

实现多语言（汉化）

https://docs.dhtmlx.com/gantt/desktop__localization.html

i18n 多语言 API：
https://docs.dhtmlx.com/gantt/api__gantt_i18n_other.html

方法一，直接设置 gantt.i18n.setLocale({ labels: { new_task: "New task" } }); 方法二，定义然后设置 var localObject = { labels: { new_task: "New task" } }; gantt.i18n.addLocale("lang", localeObject); gantt.i18n.setLocale("lang"); 方法三，引入js后放置（推荐） gantt.i18n.addLocale("lang", localeObject); gantt.i18n.setLocale("lang"); 实现全屏切换

https://docs.dhtmlx.com/gantt/desktop__fullscreen_mode.html

使用全屏插件 gantt.plugins({ fullscreen: true }); 定义全屏按钮并切换

gantt.expand(); 全屏模式

gantt.collapse(); 普通模式

<input type="button" value="全屏"/> <script> var button = document.getElementById("fullscreen_button"); button.addEventListener("click", function(){ if (!gantt.getState().fullscreen) { gantt.expand(); } else { gantt.collapse(); } }, false); </script> 添加特定日期的时间线

例如标注当前日期，或标注某个特定日期（deadline）。

引入插件 gantt.plugins({ marker: true }); 添加一条线 var dateToStr = gantt.date.date_to_str(gantt.config.task_date); var today = new Date(); gantt.addMarker({ start_date: today, css: "today", text: "今天", title: "今天: " + dateToStr(today) }); 撤销、重做 <input value="撤销" type="button"> <input value="重做" type="button"> 提示

参考：https://docs.dhtmlx.com/gantt/desktop__tooltips.html
点击任务grid或时间线中的任务条后，在任务条上弹出（悬挂）提示框。

启用插件 gantt.plugins({ tooltip: true }); 使用template个性化内容 gantt.templates.tooltip_text = function(start,end,task){ return "<b>任务:</b> "+task.text+"<br/><b>开始时间:</b> "+dateToStr(task.start_date)+"<br/><b>工期:</b> " + task.duration; }; 任务grid分组

默认按照任务的层级分组，也可自定义按照任务的责任人、所属类别等分组。

<input value="默认树分组" type="button"> <input value="默认树分组" type="button"> 任务的三种类型

默认的三种任务类型：

一般任务（默认值），可以理解为任务，项目的任务 type:gantt.config.types.task

项目型任务，可以理解为项目或任务组 type:gantt.config.types.project

里程碑 type:gantt.config.types.milestone