安装

参考：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 rel="stylesheet" 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="codebase/dhtmlxgantt.js"></script>

<link rel="stylesheet" href="codebase/dhtmlxgantt.css">

初始化

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

<!DOCTYPE html>

<html>

<head>

   <script src="codebase/dhtmlxgantt.js"></script>

   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">

</head>

<body>

    <div id="gantt_here" style='width:1000px; height:400px;'></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/apirefsgantt_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/apirefsgantt_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提交到后台更改数据，否则页面刷新后数据丢失。

附加事件

gantt.attachEvent("onTaskClick", function(id, e) {

    alert("You've just clicked an item with id="+id);

});

移除

附加事件后返回事件ID，使用该ID可移除

//附加事件，返回事件ID

var eventId = gantt.attachEvent("onTaskClick", function(id, e) {

    alert("You've just clicked an item with id="+id);

});

//使用某个ID移除

gantt.detachEvent(eventId);

添加并移除所有

定义事件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 with id="+id);

});

events.push(gantt.attachEvent("onTaskDblClick", function(id, e) {

    alert("You've just double clicked an item with id="+id);

});

// detach all saved events

while (events.length)

   gantt.detachEvent(events.pop());

检查是否有事件响应

gantt.attachEvent("onTaskClick", function(id, e) {

    alert("You've just clicked a task with id="+id);

});

gantt.checkEvent("onTaskClick"); //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"

   }

});

属性配置常用API

Ajax等。

autofit 表格列自适应

默认为false，若设置为true则平均分布。

例如任务名称列内容较多，设置为true后则可能显示不全，设置为false后任务名称列会宽一些。

gantt.config.autofit = true;

gantt.config.grid_width = 500;

autoscroll 操作的任务或链接超出屏幕后自动滚动到该位置

默认为true。

autoscroll_speed 自动滚动的速度

默认为30ms。

gantt.config.autoscroll = true;

gantt.config.autoscroll_speed = 50;

gantt.init("gantt_here");

autosize 自动调整甘特图大小以适应屏幕

默认为false，即甘特图可超出屏幕大小，超出后有滚动条可拖动。

如果设置为xy，则竖直内容不足屏幕，则面板将缩小至其高度，水平内容超过屏幕，则截断无滚动条。

可赋值："y" ( or true),"x", "xy"

gantt.config.autosize = "xy";

gantt.init("gantt_here");

autosize_min_width 水平自动缩放时的最小宽度

默认值0.

gantt.config.autosize = "xy";

gantt.config.autosize_min_width = 800;

gantt.init("gantt_here");

bar_height 时间线中的任务条的高度

默认值full。

gantt.config.bar_height = 30;

gantt.init("gantt_here");

buttons_left 任务详情弹窗中左下角的按钮定义

默认 ["gantt_save_btn", "gantt_cancel_btn"]，保存和取消

可自定义按钮，并定义该按钮的事件响应函数。

<style>

    .complete_button{

        margin-top: 2px;

        background-image:url("common/v_complete.png");

        width: 20px;

    }

</style>

<script>

    gantt.locale.labels["complete_button"] = "Complete";

    gantt.attachEvent("onGanttReady", function(){

        gantt.config.buttons_left = ["gantt_save_btn","gantt_cancel_btn",

            "complete_button"];

    });

    gantt.init("gantt_here");

    gantt.attachEvent("onLightboxButton", function(button_id, node, e){

        if(button_id == "complete_button"){

            var id = gantt.getState().lightbox;

            gantt.getTask(id).progress = 1;

            gantt.updateTask(id);

            gantt.hideLightbox();

        }

    });

</script>

也可修改默认的按钮

gantt.locale.labels.icon_save = "New Label";

gantt.locale.labels.icon_cancel = "New Label";

gantt.init("gantt_here");

buttons_right 弹窗的右下角按钮

默认值：["gantt_delete_btn"]; 删除

calendar_property 任务绑定的日历

cascade_delete 级联删除任务和关联

默认值为true

gantt.config.cascade_delete = false;

gantt.init("gantt_here");

click_drag 启用拖拽功能

gantt.config.click_drag = {

    callback: function(

        startPosition,

        endPosition,

        startDate,

        endDate,

        tasksBetween,

        rowsBetween

    ){

        var parentId = gantt.config.root_id;

        if(rowsBetween.length){

            parentId = rowsBetween[0].id;

        }

        gantt.createTask({

            text: "新任务",

            start_date: gantt.roundDate(startDate),

            end_date: gantt.roundDate(endDate)

        }, parentId);

    },

    singleRow: true

};

columns 配置任务表格的列

默认列定义为：

// default columns definition

gantt.config.columns=[

    {name:"text",       label:"任务名称",  tree:true, width:'*' },

    {name:"start_date", label:"开始时间", align: "center" },

    {name:"duration",   label:"工期",   align: "center" },

    {name:"add",        label:"" }

];

gantt.init("gantt_here");

插件

使用插件可扩展甘特图的基本功能。

使用时，先引入插件，然后按照插件的使用配置甘特图（config属性配置）。

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

gantt.plugins({

    quick_info: true,

    keyboard_navigation: true,

    undo: true

});

click_drag: true 通过拖拽来创建和选择任务
auto_scheduling: true 自动排程，根据任务的链接自动排定时间
critical_path: true 最短路径，Pro版支持
drag_timeline: true 拖拽时间线
overlay: true 在甘特图上增加一个用户自定义的层来显示信息
fullscreen: true 全屏
grouping: true 按任务的任何属性来分组任务
keyboard_navigation: true 使用键盘快捷键来导航，创建任务、选中甘特图等.

gantt.config.keyboard_navigation_cells = true;
multiselect: true 允许选择多个任务
quick_info: true 点击任务或时间线中的任务条后，显示一个任务详细并带有删除和编辑按钮的浮窗
tooltip: true 提示
undo: true 取消、重做
marker: true 竖直标记线，高亮当前日期或特定日期

常见模板API

date_grid 任务表格的开始时间列的内容

gantt.templates.date_grid = function(date, task, column){

   if(task && gantt.isUnscheduled(task) && gantt.config.show_unscheduled){

        return gantt.templates.task_unscheduled_time(task);

    }else{

        return gantt.templates.grid_date_format(date);

   }

}

drag_link 用户创建一个新任务链接时显示的tooltip提示文本

gantt.templates.drag_link = function(from, from_start, to, to_start) {

    from = gantt.getTask(from);

    var text = "From:<b> " +from.text + "</b> " +(from_start?"Start":"End")+"<br/>";

    if(to){

        to = gantt.getTask(to);

        text += "To:<b> " + to.text + "</b> "+ (to_start?"Start":"End")+"<br/>";

    }

    return text;

};

drag_link_class 当用户拖拽任务链接时应用在弹窗的css样式表

gantt.templates.drag_link_class = function(from, from_start, to, to_start) {

    var add = "";

    if(from && to){

        var allowed = gantt.isLinkAllowed(from, to, from_start, to_start);

        add = " " + (allowed ? "gantt_link_allow" : "gantt_link_deny");

    }

    return "gantt_link_tooltip" + add;

};

format_date 转换日期对象为日期字符串，以发送给服务器端

var dateToStr = gantt.date.date_to_str("%Y-%m-%d %H:%i");

gantt.templates.format_date = function(date){

    return dateToStr (date);

};

grid_blank 在树形列中子项的自定义内容

gantt.templates.grid_blank = function(item) {

    return "<div class='gantt_tree_icon gantt_blank'></div>";

};

grid_file 设置树形列的子项图标

gantt.templates.grid_file = function(item) {

    return "<div class='gantt_tree_icon gantt_file'></div>";

};

grid_folder 设置树形列的父项图标

link_class 任务链接线的样式

gantt.templates.link_class = function(link){

    return "";

};

progress_text 时间线上任务条的完成部分的文本

默认不显示。默认尽在中部显示任务名称。

gantt.templates.progress_text=function(start, end, task){return "";};

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

gantt.templates.progress_text = function (start, end, task) {

    return "<span style='text-align:left;'>" + 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 id="fullscreen_button" 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" onclick='gantt.undo()' style='margin:0 5px;'>

<input value="重做" type="button" onclick='gantt.redo()' style='margin:0 5px;'>

提示

参考：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 class="action" id="default" value="默认树分组" type="button" onclick="showGroups()" style='margin:0 5px;'>

<input class="action" id="user" value="默认树分组" type="button" onclick="showGroups('user')" style='margin:0 5px;'>

任务的三种类型

默认的三种任务类型：

一般任务（默认值），可以理解为任务，项目的任务 type:gantt.config.types.task
项目型任务，可以理解为项目或任务组 type:gantt.config.types.project
里程碑 type:gantt.config.types.milestone
project，任务的开始或结束时间为自任务的最早开始时间和最晚结束时间，其自身定义的 start_date, end_date, duration 将被忽略。progress自定义，不由子任务决定。
milestone 里程碑，工期为0.

免费JS甘特图组件dhtmlxgantt的更多相关文章

基于dhtmlxGantt的Blazor甘特图组件
基于dhtmlxGantt实现的甘特图组件,目前仅做到了数据展现,方法及插槽暂未实现,若需可按照dhtmlxGantt的文档及微软的Balzor文档,自行扩展. 数据发生变化后甘特图会立即发生变化. ...
Twproject Gantt – 开源的 JavaScript 甘特图组件
Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...
交互式甘特图组件VARCHART XGantt 如何在活动中标注非工作间隔
甘特图从1998年的第一个商用版本开始就致力于计划编制和项目管理方面控件的研究和开发,经过20多年的积累和沉淀,目前可为软件开发商和最终用户提供最顶级的计划编制和项目管理的控件产品,帮助用户快速的整合 ...
两款不错的js甘特图控件
dhtmlx:https://docs.dhtmlx.com/ jQuery.Gantt:http://taitems.github.io/jQuery.Gantt/
Java甘特图控件swing版免费下载地址
FlexGantt 控件是现在Java 平台下最先进的甘特图解决方案,使用一个很高的抽象层次,能适用于多种不同的域,例如 ERP 系统.生产计划和日程安排.制造流程系统或项目公文管理程序等.这些使得 ...
Twproject Gantt开源甘特图功能扩展
1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CS ...
MVC使用Gantt Chart实现甘特图,管理事情进度
借助"甘特图",可以直观地了解任务.活动.工作的进度.dhtmlxGantt是一个开源的Javacirpt库,能帮助我们快速创建"甘特图",本篇体验在MVC中的 ...
基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...

随机推荐

92反转链表II
# Definition for singly-linked list.# 这道题还是有点复杂的,但是是有套路的,套用反转链表的想法class ListNode: def __init__(self, ...
CentOS7使用NTP搭建时间同步服务器
前言为什么要搭建时间同步服务器呢?场景是这样的. 我们有两台CentOS服务器,其中一台是可以连接外网的,下文中我们称它为A服务器,另一台不能连接外网,但是与A服务器在同一局域网中,下文中我们称它为 ...
Kubernetes 实战 —— 04. 副本机制和其他控制器：部署托管的 pod
保持 pod 健康 P84 只要 pod 调度到某个节点,该节点上的 Kubelet 就会运行 pod 的容器,从此只要该 pod 存在,就会保持运行.如果容器的主进程奔溃, Kubelet 就会自动 ...
Android Studio配置colors.xml
•colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <! ...
GO基础知识分享
目录 GO基础知识分享 go语言的基本事项关键字字符串的拼接和变量的定义方式空白符 const常量 iota的用法运算符 Go 没有三目运算符,不能适用?: 语言条件语句 for循环的方式函 ...
Java开发工程师面试-Web基础与数据处理
Servlet执行流程客户端浏览器向Tomcat服务器发送Http请求 Tomcat解析web.xml文件,找到对应的url以及servlet-name,根据servlet-name找到对应的ser ...
Kubernetes,kubectl常用命令详解
kubectl概述祭出一张图,转载至 kubernetes-handbook/kubectl命令概述 ,可以对命令族有个整体的概念. 环境准备允许master节点部署pod,使用命令如下: kub ...
istio服务条目（ServiceEntry）介绍
使用服务条目资源(ServiceEntry)可以将条目添加到 Istio 内部维护的服务注册表中.添加服务条目后,Envoy 代理可以将流量发送到该服务,就好像该服务条目是网格中的服务一样.通过配置服 ...
[Kong 与 Konga 与 Postgres数据库] 之 Kuberneres 部署
1.Kong的概述 Kong是一个clould-native.快速的.可扩展的.分布式的微服务抽象层(也称为API网关.API中间件或在某些情况下称为服务网格)框架.Kong作为开源项目在2015年推 ...
Distributed | MapReduce
最近终于抽出时间开始学习MIT 6.824,本文为我看MapReduce论文和做lab后的总结. [MapReduce英文论文] lab要用到go语言,这也是我第一次接触.可以参考go语言圣经学习基本 ...

免费JS甘特图组件dhtmlxgantt

安装