官方文档

autofit

  • 表格列宽自适应

    类型可选值默认值
    booleantrue/falsefalse
  • demo:

    gantt.config.autofit = false;
    gantt.init("gantt_here");

autoscroll

  • 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果，相当于拖动滚动条

    类型可选值默认值
    booleantrue/falsefalse
  • demo:

    gantt.config.autoscroll = false;
    gantt.init("gantt_here");

autoscroll_speed

  • 自动滚动的速度 (ms)

    类型默认值
    number30

  • demo:

    gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;

gantt.init("gantt_here");

autosize

  • 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务

    类型可选值默认值
    booleantrue/falsefalse
    string“y” ( = true), “x”, “xy”-

  • demo:

    gantt.config.autosize = "xy";
gantt.init("gantt_here");

autosize_min_width

  • 在使用图表宽度自适应模式(autosize = ‘x’ or ‘xy’)时， 图表的最小宽度

    类型可选值默认值
    number-0

  • demo:

    gantt.config.autosize = "xy";
gantt.config.autosize_min_width = 800;

gantt.init("gantt_here");

buttons_left

  • 弹出框左下角的按钮

    类型可选值默认值
    array“gantt_save_btn”,”gantt_cancel_btn”, “complete_button”, “gantt_delete_btn”[“gantt_save_btn”, “gantt_cancel_bt”]

  • demo:

    <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>
  • 官网有图说明

buttons_right

  • 弹出框右下角的按钮

    类型可选值默认值
    array“gantt_save_btn”,”gantt_cancel_btn”, “complete_button”, “gantt_delete_btn”[“gantt_delete_btn”]

  • demo:

    <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_right = ["gantt_delete_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>
  • 官网有图说明

calendar_property

  • 修改要绑定到task/group的calender属性

    类型可选值默认值
    string属性名calendar_id

  • demo:

    gantt.config.calendar_property = "property_name";
  • calendar属性：

    {
    "id":2,
    "calendar_id":"custom",
    "text":"Task #1",
    "start_date":"02-04-2013",
    "duration":"8",
    "parent":"1",
    "progress":0.5,
    "open": true
    }

cascade_delete

  • 开启级联删除tasks和links

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.cascade_delete = false;
gantt.init("gantt_here");

columns

  • 表格列设置

    类型可选值默认值备注
    array--数组的每一项表示一列

  • demo:

    // default columns definition
gantt.config.columns=[
    {name:"text",       label:"Task name",  tree:true, width:'*' },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" },
    {name:"add",        label:"" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
                            return obj.holder+"("+obj.progress+")"} }
];
gantt.init("gantt_here");

  • 列属性详情

    属性说明值
    align设置标题水平对齐位置‘left’, ‘center’, ‘right’
    hide显示/隐藏列（pro收费版支持）boolean
    label标题内容string
    max_widthresize操作时的最大宽度number
    min_widthresize操作时的最小宽度number
    name列ID, 这个ID名称只能是特定的名称, 比如name: ‘add’的效果是该列会有一个+号，点击可以新增列的效果string
    resize允许通过拖拽的方式border改变列的宽度(pro收费版支持)boolean
    template列模版渲染方法function
    tree设置该列为树形控件boolean
    width定义宽度number

correct_work_time

  • 拖拽task的时候，自动将起始时间和结束时间矫正为工作日

    类型可选值默认值
    boolean-false

  • 备注：起始和结束时间遇到周末的时候，自动把时间改为工作日的时间

  • demo:

    gantt.config.work_time = true;
gantt.config.correct_work_time = true;

gantt.init("gantt_here");
  • 官网有图说明

date_grid

  • 设置“开始时间”所在的列的时间格式

    类型可选值默认值
    string-“%Y-%m-%d”

  • demo:

    gantt.config.date_grid = "%d/%m/%Y";

gantt.init("gantt_here");

date_scale

  • 设置x轴的日期格式

    类型可选值默认值
    string-“%d %M”

  • demo:

    gantt.config.scale_unit = "month";
gantt.config.step = 1;
gantt.config.date_scale = "%F, %Y";

gantt.init("gantt_here");

details_on_create

  • 点击 + 号添加列时，弹出lightbox弹出框

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.details_on_create = true;
gantt.init("gantt_here");

details_on_dblclick

  • 双击task时，弹出lightbox弹出框

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.details_on_dblclick = true;
gantt.init("gantt_here");

drag_lightbox

  • 允许鼠标通过按住的lightbox头部拖拽的方式，调整lightbox的位置

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.drag_lightbox = false;
gantt.init("gantt_here");

  • 允许通过拖拽的方式新增任务依赖的线条

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.drag_links = false;
gantt.init("gantt_here");

drag_mode

  • 保存拖拽模式下，允许的拖拽类型

    类型可选值默认值
    object-{ “resize”:”resize”, “progress”:”progress”, “move”:”move”, “ignore”:”ignore” }

  • demo:

    gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
    var modes = gantt.config.drag_mode;
    switch (mode){
        case modes.move:

        break;
        case modes.resize:

        break;
        case modes.progress:

        break;

    }
    //...
});
  • detail
    • ”resize” - 用户通过拖拽任务的条形图来改变工期时触发
    • “progress” - 用户推拽条形图上用来调整进度百分比的小按钮时触发
    • “move” - 用户拖动条形图来改变位置时触发
    • “ignore” - 忽略拖拽行为

drag_move

  • 允许用户拖动条形图来改变位置

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.drag_move = false;
gantt.init("gantt_here");

drag_progress

  • 允许用户推拽条形图上用来调整进度百分比的小按钮

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.drag_progress = false;
gantt.init("gantt_here");

drag_resize

  • 允许用户通过拖拽任务的条形图的两端来改变工期

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.drag_resize = false;
gantt.init("gantt_here");

duration_step

  • 工期计算的倍数

    类型可选值默认值
    boolean-1

  • demo:

    gantt.config.duration_unit = "hour";
gantt.config.duration_step = 3; 
//当 task.duration = 2时, 工期为6 小时 (3*2)

duration_unit

  • 工期计算的基本单位

    类型可选值默认值
    string“minute”, “hour”, “day”, “week”, “month”, “year”“day”

  • demo:

    gantt.config.duration_unit = "hour";
gantt.config.duration_step = 3; 
//当 task.duration = 2时, 工期为6 小时 (3*2)

editable_property

  • changes the name of a property that affects the editing ability of tasks/links in the read-only Gantt chart

    类型可选值默认值
    string-“editable”

  • demo:

    gantt.config.editable_property = "property_name";

editor_types

  • 定义行内编辑器类型, 定义好的类型，可以设置到colomuns配置

    类型可选值默认值
    object--

  • demo:

    gantt.config.editor_types.custom_editor = {// custom editor logic}


var textEditor = {type: "text", map_to: "text"};
var dateEditor =  {type: "date", map_to: "start_date", min: new Date(2018, 0, 1), max: new Date(2019, 0, 1)};

gantt.config.columns = [
    {name: "text", label: "Task name", tree: true, width: "*", editor: textEditor},
    {name: "start_date", label: "Start time", align: "center", editor: dateEditor}
];
  • 预先已经定义好的行内编辑器类型
    • text editor：编辑text类型的列，比如task的名称
    • number editor：编辑数值类型，比如工期duration，顺序order等
    • date editor：日期编辑器，编辑起始时间和结束时间的列
    • select editor：选择器
    • predecessor editor： for setting task-predecessor for the currently edited task. This editor gets the WBS codes of tasks to set connection with the predecessor task.

end_date

  • 设置图表区域的日期坐标最大值

    类型可选值默认值
    Date--

  • demo:

    gantt.config.start_date = new Date(2013, 08, 10);
gantt.config.end_date = new Date(2013, 08, 20);
gantt.init("gantt_here");

fit_tasks

  • 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.fit_tasks = true; 
gantt.init("gantt_here");
  • detail
    • 默认情况下， 用户增加task的长度时，只能增加到当前坐标轴的最大值。有时候想要继续增加task的长度，就需要设置这个选项，让坐标轴能重新渲染增加长度。
    • 有的通过设置工期来增加task的长度时，超出坐标轴的那部分也不会显示。
    • 官网有图说明

grid_resizer_attribute

  • 设置 resizer(调整宽度的那个东西) DOM元素的属性名

    类型可选值默认值
    string-grid_resizer

  • demo:

    gantt.config.grid_resizer_attribute = "gridresizer";

grid_resizer_column_attribute

  • 设置列表resizer DOM元素的属性名， 这个属性表示列表的索引

    类型可选值默认值
    string-column_index

  • demo:

    gantt.config.grid_resizer_column_attribute = "col_index";//"column_index" -> "col_index"

grid_width

  • 设置左侧表格的宽度

    类型可选值默认值
    number-350

  • demo:

    gantt.config.grid_width = 400;

gantt.init("gantt_here");

inherit_scale_class

  • 子坐标轴是否使用 scale_cell_class模版

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.inherit_scale_class=true;
gantt.init("gantt_here");

initial_scroll

  • timeline区域是否自动初始化滚动, 用于显示更早之前的任务

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.initial_scroll = false;
gantt.init("gantt_here");

keyboard_navigation_cells

  • 激活表格相关快捷键

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.keyboard_navigation_cells = true;

layout

  • 定义整个甘特图的布局

    类型可选值默认值
    object--

  • demo:

    gantt.config.layout = {
    css: "gantt_container",
    rows:[
      {
        cols: [
          {view: "grid", id: "grid", scrollX:"scrollHor", scrollY:"scrollVer"},
          {resizer: true, width: 1},
          {view: "timeline", id: "timeline", scrollX:"scrollHor", scrollY:"scrollVer"},
          {view: "scrollbar", scroll: "y", id:"scrollVer"}
        ]
       },
      {view: "scrollbar", scroll: "x", id:"scrollHor", height:20}
    ]
};

  • 定义lightbox弹出框

    类型可选值默认值
    object--

  • demo:

    gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea",focus:true},
    {name:"priority", height:22, map_to:"priority",type:"select",options:opts},                                                                        
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

gantt.init("gantt_here");

  • detail

    • lightbox有一个属性sections（有没有其他属性官网也没有说）
    • sections是一个对象数组，每个对象的属性如下
    属性说明值
    name名称用于索引国际化后的实际内容， 如name = time section,最后读取的是gantt.locale.labels.section_time的内容string
    heightsection高度number
    map_todata的属性名, 将相应的data属性映射到sectionstring
    typesection的编辑器类型string
    time_formatsection为”duration”或者”time”时的时间选择器顺序string
    focus设置为true时， 将会在lightbox打开时自动focus(聚焦)boolean
    default_value该section编辑器的默认值any
    onchange选择器的选项改变时触发function
    options编辑器的候选项， 用于选择器，单选radio，多选checkbox形如{ key: 1, lable: ‘demo’ } 的对象数组 array of objects
    readonly只读模式, 用在time and durationboolean
    year_range年份选择器的范围array/number, 数组形式:[2005 - 2025];number:10 = [current, current + 10]
    single_date设置后只有开始日期start Date可以选择，结束时间等于同一天，这个对于选择里程碑比较有用boolean
    allow_root设置为true的时候，会新增一个选项用于设置所有任务的根节点，使用的时候，要跟root_label属性一起使用（section是parent的时候才有）boolean
    root_label设置根节点的label（section是parent的时候才有）string
    filter选择器的过滤方法function
    sort选择器的排序方法function
    template选择器的option渲染方法（section是parent的时候才有）function

lightbox_additional_height

  • 设置lightbox的header和footer的高度 (height = header + footer)

    类型可选值默认值
    number-75

  • demo:

    gantt.config.lightbox_additional_height = 90;
gantt.init("gantt_here");

link_arrow_size

  • 连线的箭头大小

    类型可选值默认值
    number-6

  • demo:

    gantt.config.link_arrow_size = 8;
gantt.init("gantt_here");

link_attribute

  • 连线dom元素上存储ID值的属性名

    类型可选值默认值
    string-‘link_id’

  • demo:

    gantt.config.link_attribute = "l_id"
gantt.init("gantt_here");
// <div class="grantt_task_link" l_id="14">...<div>

link_line_width

  • 连线的线条宽度

    类型可选值默认值
    number-2

  • demo:

    gantt.config.link_line_width = 3;
gantt.init("gantt_here");

link_wrapper_width

  • 连线的拓展宽度，用于增加点击的范围

    类型可选值默认值
    number-20

  • demo:

    gantt.config.link_wrapper_width = 30;
gantt.init("gantt_here");
  • 官网图解

  • 存储线条的依赖

    类型可选值默认值
    object-{ “finish_to_start”:”0”, “start_to_start”:”1”, “finish_to_finish”:”2”, “start_to_finish”:”3” }

  • demo:

    var type1 = gantt.config.links.finish_to_start;
  • detail
    • ”finish_to_start”: 后置任务需要等待前置任务（依赖）完成才允许开始
    • “start_to_start” - 后置任务需要等待前置任务开始才允许开始
    • “finish_to_finish” - 后置任务需要等到前置任务结束才允许结束
    • “start_to_finish” - 后置任务需要等到前置任务开始才允许结束

min_column_width

  • 时间轴列的最小宽度

    类型可选值默认值
    number-70

  • demo:

    gantt.config.min_column_width = 100;
gantt.init("gantt_here");

min_duration

  • 调整timeline上task的长度时， 工期的变化幅度

    类型可选值默认值
    number-60*60*1000 (ms)

  • demo:

    gantt.config.min_duration = 24*60*60*1000;// 1 day
gantt.init("gantt_here");

min_grid_column_width

  • 左侧表格列的最小宽度

    类型可选值默认值
    number-70

  • demo:

    gantt.config.min_grid_column_width = 100;
gantt.init("gantt_here");

multiselect

  • 是否开启task任务多选

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.multiselect = false;
gantt.init("gantt_here");

multiselect_one_level

  • 任务多选的情况下，规定只能选取同一个level的任务

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.multiselect_one_level = true; 
gantt.init('gantt_here');

//前提时开启多选，下面是错误的例子
gantt.config.multiselect = false;   //关闭了多选
gantt.config.multiselect_one_level = true; 
gantt.init("gantt_here");

open_tree_initially

  • 初始化的时候就展开树结构

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.open_tree_initially = true;
gantt.init("gantt_here");

order_branch

  • 左侧树型结构调整时，只允许将任务拖放到某个父节点下

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.order_branch = true;
gantt.init("gantt_here");

order_branch_free

  • 左侧树型结构调整时，可以任意拖动任务到任意节点下

    类型可选值默认值
    boolean-false

  • demo:

    // reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
gantt.init("gantt_here");

placeholder_task

  • 在左侧任务列表的最后新增一个空白列，填写之后可以新增任务

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.placeholder_task = true;
gantt.init("gantt_here");
  • detail
    • 自动新增一个空白列到列表的最后
    • 只要UI修改了空白列的内容，并且执行gantt.updateTask()方法，就会追到新的任务到任务列表末尾。
    • 通过空白列新增的任务可以用下面的方法判断

      if(task.type == gantt.config.types.placeholder){
      // do something
      }
    • 通过这个方法新建任务后，会触发onTaskCreated和onAfterTaskAdd事件
    • gantt.dataProcessor也会触发onBeforeUpdate事件, 但不会触发后端的请求。

preserve_scroll

  • 图表刷新后，滚动条的位置跟原来保持一致

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.preserve_scroll = false;
gantt.init("gantt_here");

prevent_default_scroll

  • 阻止鼠标滚动事件冒泡

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.prevent_default_scroll = false;
gantt.init("gantt_here");
  • detail
    • 禁用该选项的时候，滚动鼠标只滚动图表内部的滚动条，图表外部的滚动条不滚动（接收不到滚动事件）

quick_info_detached

  • 在所选任务的附近弹出quick_info组件（一个popup组件）

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.quick_info_detached = false;
gantt.init("gantt_here");

quickinfo_buttons

  • 定义quickinfo组件的按钮

    类型可选值默认值
    array-[“icon_delete”,”icon_edit”]

  • demo:

    gantt.config.quickinfo_buttons=["icon_delete","icon_edit","advanced_details_button"]; 
gantt.locale.labels["advanced_details_button"] = "Advanced Info";
gantt.init("gantt_here");

gantt.$click.buttons.advanced_details_button=function(e, id, trg){
    alert("These are advanced details"); 
    return false; //blocks the default behavior
};

readonly

  • 只读模式的甘特图

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.readonly=true;
gantt.init("gantt_here");

readonly_property

  • 影响任务是否只读的属性, 这个属性是Data数据里面的某个键, 当该键对应的值为true时，所在的link或者task为只读

    类型可选值默认值
    string-“readonly”

  • demo:

    gantt.config.readonly_property = "property_name";
gantt.init("gantt_here");

redo

  • 开启重做功能

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.redo = true;
gantt.init("gantt_here");

resource_calendars

  • 给用户绑定工作日日历

    类型可选值默认值
    object--

  • demo:

    // 添加一个工作日日历
var johnCalendarId = gantt.addCalendar({
    worktime: {
        days: [0, 1, 0, 0, 0, 0, 0] //第一天是周日， 只有周一上班
    }
}),

// 绑定用户
gantt.config.resource_calendars = {
  "user":{
      1 : johnCalendarId
   }
};

// 指定日历到特定的任务
{
    "id":3, 
    "user:"1",
    "text":"Task #2", 
    "start_date":"11-04-2013", 
    "duration":"4", 
    "parent":"1", 
    "progress": 0.6, 
    "open": true
}

resource_render_empty_cells

  • 是否调用模版方法渲染source时间轴的空白元素。

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.resource_render_empty_cells = true;
gantt.init("gantt_here");

root_id

  • 设置虚拟根节点的ID

    类型可选值默认值
    numberstring-

  • demo:

    gantt.config.root_id = "root";  

var tasks =  {
    data:[
      {id:1, text:"Project #2", start_date:"01-04-2013", duration:18, parent:"root"},  // 这里的parent为定义的根节点ID
      {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8,  parent:1},
      {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8,  parent:1}
    ],
    links:[]
};

gantt.init("gantt_here");

gantt.parse(tasks);

round_dnd_dates

  • 将任务开始时间和结束时间自动“四舍五入”, 从而对齐坐标轴刻度

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.round_dnd_dates = false;
gantt.init("gantt_here");

row_height

  • 定义甘特图的行高

    类型可选值默认值
    number-25se

  • demo:

    gantt.config.row_height = 40;
gantt.init("gantt_here");

rtl

  • 定义甘特图为从右到左（本来是从左到右）显示模式， 除了修改控件的布局，还修改了坐标轴的方向，列的渲染顺序

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.rtl = true;
gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "scrollbar", id: "scrollVer"},
                {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
                {resizer: true, width: 1},
                {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"}
            ]
        },
        {view: "scrollbar", id: "scrollHor", height: 20}
    ]
};
gantt.init("gantt_here");

scale_height

  • 设置甘特图的表头高度

    类型可选值默认值
    number-35

  • demo:

    gantt.config.scale_height = 50;
gantt.init("gantt_here");

scale_offset_minimal

  • sets the minimal scale unit (in case multiple scales are used) as the interval of leading/closing empty space

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.scale_offset_minimal = false;
  • detail
    • If the scale interval is not strictly specified ( by the start_date, end_date options) dhtmlxGantt calculates it based on the dates of the earliest and latest tasks. Plus, it adds an empty interval to the beginning and end of the scale. By default, this ‘empty’ interval is equal to the minimum unit of used scale (in case multiple scales are used).
    • If you disable the option, dhtmlxGantt will add an empty interval egual to the value of the scale_unit option.

scale_unit

  • 设置时间坐标轴单位

    类型可选值默认值
    string“minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”“day”

  • demo:

    gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
gantt.init("gantt_here");
  • 可以自定义单位

scroll_on_click

  • 当点击任务时，时间轴的滚动条滚动，将任务放在可见的范围。

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.scroll_on_click= false;
gantt.init("gantt_here");

scroll_size

  • 水平或垂直滚动条尺寸

    类型可选值默认值
    number--

  • demo:

    gantt.config.scroll_size = 20;
gantt.init("gantt_here");

select_task

  • 任务可以点击选中

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.select_task  = false;
gantt.init("gantt_here");

server_utc

  • 当发送数据给后端，将UTC时间转换成local时间

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.server_utc = true;
gantt.init("gantt_here");

show_chart

  • 是否显示时间轴

    类型可选值默认值
    boolean-true

  • demo:

    //隐藏时间轴
gantt.config.show_chart = false;
gantt.init("gantt_here");

show_errors

  • 发生异常时，允许弹出警告到UI界面

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.show_errors = false;

show_grid

  • 是否显示左侧表格

    类型可选值默认值
    boolean-true

  • demo:

    //隐藏表格
gantt.config.show_grid = false;

  • 是否显示依赖连线

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.show_links = false;

show_markers

  • 是否显示标记线

    类型可选值默认值
    boolean-true

  • demo:

    var marker1 = gantt.addMarker({ ...}); 
var marker2 = gantt.addMarker({ ...}); 
var marker3 = gantt.addMarker({ ...}); 

gantt.config.show_markers = false;// 隐藏所有标记

show_progress

  • 是否在任务条形图中显示制进度条（通常以不同颜色区分）

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.show_progress = true;
gantt.init("gantt_here");

show_quick_info

  • 是否显示quick_info（带有任务信息的popup表单）

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.show_quick_info = false;
gantt.init("gantt_here");

show_task_cells

  • 时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.show_task_cells = false;
gantt.init("gantt_here");

show_unscheduled

  • 为true时，树形结构会显示没有排期的任务节点，并且左侧的表格没有时间轴条形图。设置为false的时候，会强制给任务设置起始时间，左侧的表格会有时间轴条形图。

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.show_unscheduled = true;
gantt.init("gantt_here");

smart_rendering

  • 按需渲染（原谅我的翻译），仅仅渲染在屏幕可见的那部分任务和依赖线。这个在显示大量的任务时，性能比较高。不过需要引入插件 dhtmlxgantt_smart_rendering.js

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.smart_rendering = true;
gantt.init("gantt_here");

smart_scales

  • 按需渲染（原谅我的翻译），仅仅渲染在屏幕可见的那部分时间轴。在处理时间轴非常长的时候，可以提升性能。需要引入插件 dhtmlxgantt_smart_rendering.js

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.smart_scales = true;

sort

  • 启用排序功能，点击表头可以排序

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.sort = true;
gantt.init("gantt_here");

start_date

  • 设置时间轴起始时间

    类型可选值默认值
    Date--

  • demo:

    gantt.config.start_date = new Date(2013, 08, 10);
gantt.config.end_date = new Date(2013, 08, 20);
gantt.init("gantt_here");

start_on_monday

  • 将每周的第一天设置为周一，否则为周日。

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.start_on_monday = false; // 第一天将变为周日
gantt.init("gantt_here");

step

  • 时间轴的X坐标值之间的间隔

    类型可选值默认值
    number-1

  • demo:

    gantt.config.scale_unit = "year";
gantt.config.step = 1;
gantt.config.date_scale = "%Y";
gantt.init("gantt_here");

subscales

  • 设置子坐标轴，将会在时间轴X的下面新增一行或多行坐标轴X（只不过单位粒度不一样），新增行数取决于数组的长度，即数组每一项表示一行

    类型可选值默认值
    array-[]

  • demo:

    gantt.config.scale_unit = "month";

gantt.config.subscales = [
    {unit:"week", step:1, template:weekScaleTemplate},
    {unit:"day",  step:1, date:"%D" }
];

gantt.init("gantt_here");

  • detail

    • 对象数组的对象属性
    属性描述值
    css生成坐标轴每个列的CSS类名的函数，参数当前坐标轴时间点的对象function
    format时间轴label的显示格式string
    stepX值的间隔string， 默认1
    template比format更高级的用法，用函数生成label，参数当前坐标轴时间点的对象function
    unit时间轴的单位：”minute”, “hour”, “day”, “week”, “month”, “year”string, 默认 “day”

task_attribute

  • 任务ID要放在dom节点的哪个属性

    类型可选值默认值
    string-task_id

  • demo:

    gantt.config.task_attribute = "t_id"
gantt.init("gantt_here");
// <div t_id=11 class='gantt_task_line'></div>

task_date

  • lightbox的任务时间选择部分中，时间的显示格式

    类型可选值默认值
    string-“%d %F %Y”

  • demo:

    gantt.config.task_date = "%d-%m-%Y";
gantt.init("gantt_here");

task_height

  • 时间轴图表中，任务条形图的高度

    类型可选值默认值
    number-24

  • demo:

    gantt.config.task_height = 30;
gantt.init("gantt_here");

task_scroll_offset

  • 坐标轴左侧的边框最近的任务的距离（像素值）

  • 备注：每次选中任务的时候，会适调整水平滚动条的位置，让最近的任务跟时间轴图表最左侧的距离保持一定的offset

    类型可选值默认值
    number-100

  • demo:

    gantt.config.task_scroll_offset = 120;
gantt.init("gantt_here");

time_picker

  • lightbox的时间选择区域中， 时间下拉选择控件每一项的显示格式

    类型可选值默认值
    string-“%H:%i”

  • demo:

    gantt.config.time_picker = "%H:%s";
gantt.init("gantt_here");

time_step

  • 任务的时间间隔

    类型可选值默认值
    number-60

  • demo:

    gantt.config.time_step = 15;
gantt.init("gantt_here");
  • detail
    • 任务的开始和结束时间将会时这个step值的整数倍，比如time_step=20,开始时间只有XX:0,XX:20,XX:40分
    • lightbox 时间选择器的间隔保持一直

tooltip_hide_timeout

  • 设置当鼠标离开任务后，tooltip还会显示多长时间(ms)才关闭。

  • 备注：如果是鼠标移动到其他的任务，在这个间隔内如果没有关闭，当显示其他任务tooltip后，前一个计时不再生效。

    类型可选值默认值
    number--

  • demo:

    gantt.config.tooltip_hide_timeout = 5000;
gantt.init("gantt_here");

tooltip_offset_x

  • tooltip距离鼠标的水平偏移

    类型可选值默认值
    number-10

  • demo:

    gantt.config.tooltip_offset_x = 30;
gantt.init("gantt_here");

tooltip_offset_y

  • tooltip距离鼠标的垂直偏移

    类型可选值默认值
    number-20

  • demo:

    gantt.config.tooltip_offset_y = 40;
gantt.init("gantt_here");

tooltip_timeout

  • 设置tooltip要鼠标悬停多久才显示出来

    类型可选值默认值
    number-30 (ms)

  • demo:

    gantt.config.tooltip_offset_x = 50;
gantt.init("gantt_here");

touch

  • 开启触屏模式

    类型可选值默认值
    boolean,stringtrue,false, ‘force’-

  • demo:

    gantt.config.touch = "force";
gantt.init("gantt_here");
  • detail
    • true: 通过浏览器UA来识别触屏设备，识别到则开启触屏模式
    • ‘force’: 不检测UA，直接开启触屏模式
    • false: 禁用触屏模式

touch_drag

  • 触屏设备，定义时间长按首饰响应时间。用于区分滚动操作和长按操作。设置false时无法拖动任务

    类型可选值默认值
    number,boolean-50

  • demo:

    gantt.config.touch_drag = 75;
gantt.init("gantt_here");

touch_feedback

  • 触屏拖放操作时，有震动反馈。

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.touch_feedback = false;
gantt.init("gantt_here");
  • detail
    • 注意，该选项的前提时touch选项不是false, 并且浏览器支持震动API

touch_feedback_duration

  • 定义震动反馈持续时间(ms)

    类型可选值默认值
    number--

  • demo:

    gantt.config.touch_feedback_duration = 1;
gantt.init("gantt_here");

undo

  • 启用回退功能

    类型可选值默认值
    boolean-true

  • demo:

    gantt.config.undo = true;
gantt.init("gantt_here");

undo_actions

  • 设置可以回退的动作

    类型可选值默认值
    object--

  • demo:

    gantt.config.undo_actions = {
    update:"update",
    remove:"remove", // remove an item from datastore
    add:"add"
};

undo_steps

  • 设置可以回退的次数

    类型可选值默认值
    number-10

  • demo:

    gantt.config.undo_steps = 10;
gantt.init("gantt_here");

undo_types

  • 设置回退作用的实体

    类型可选值默认值
    object--

  • demo:

    gantt.config.undo_types = {
    link:"link",
    task:"task"
};

wai_aria_attributes

  • 可访问性支持

    类型可选值默认值
    boolean-false

  • demo:

    gantt.config.wai_aria_attributes = true;
gantt.init("gantt_here");

work_time

  • 以工作时间计算工期，比如忽略周末

    类型可选值默认值
    boolean-false

  • demo:

    //calculates duration in working hours and hides non-working time from the chart
gantt.config.duration_unit = "hour";
gantt.config.work_time = true;
gantt.config.skip_off_time = true;
gantt.init("gantt_here");

xml_date

  • 定义从后端获取或发送到后端的日期数据解析格式

    类型可选值默认值
    string-“%d-%m-%Y %H:%i”

  • demo:

    gantt.config.xml_date="%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load("../data/tasks.json");
# 甘特图
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

【Spring Boot 】Spring Boot + HikariCP 连接池使用示例

文章目录示例工具版本HikariCP 依赖HikariCP 配置1. connectionTimeout2. minimumIdle3. maximumPoolSize4. idleTimeout5. maxLifetime6. autoCommitSpring Boot Data + HikariCP + MySQL示例测试应用程序1. 使用 Maven 命令2. 使用 Eclipse3. 使用

avatar 开放原子开发者工作坊
cover

基于NSGAII的三目标优化算法

avatar 开放原子开发者工作坊
cover

教你python自动识别图文验证码的解决方案！

avatar 开放原子开发者工作坊