dhtmlxGantt使用教程：如何设置规模

您可以通过在scales配置数组中设置比例尺对象来指定任意数量的比例尺。

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

dhtmlxGantt试用版

比例尺的配置是通过scales属性指定的。您可以通过在scales配置数组中设置比例尺对象来指定任意数量的比例尺：

// a single day-scalegantt.config.scales = [    {unit: "day", step: 1, format: "%j, %D"}];// several scales at oncegantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: weekScaleTemplate},    {unit: "day", step:1, format: "%D", css:daysStyle }];

时间单位

要设置比例单位，请在相应的比例对象中使用unit属性：

可能的值为：“分钟”，“小时”，“天”，“周”，“季度”，“月”，“年”。

gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "day", step: 1, format: "%j, %D"}];gantt.init("gantt_here");

范围

默认范围设置

如果未明确指定日期范围，则甘特图将使用已加载任务的日期，并在比例尺中的第一个任务和最后一个任务之后添加偏移量。偏移量是由时间刻度的设置定义的。根据scale_offset_minimal值，它可以是通过scales选项的unit属性定义的时间单位，也可以是最小的时间标度单位。

您可以使用getState方法以编程方式获取显示的日期范围。

var state = gantt.getState();console.log(state.min_date);// -> Mon Jan 01 2018 00:00:00console.log(state.max_date);// -> Tue Jan 01 2019 00:00:00

在甘特图渲染中重新计算比例范围。如果用户将任务移动到显示的时间范围之外，将显示任务行，但是直到完成完整的重新绘制操作，才可以看到条形元素。

为了自动调整比例，请使用fit_tasks配置。

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

明确设置日期范围

或者，您可以使用start_date和end_date配置选项显式设置日期范围：

gantt.config.start_date = new Date(2018, 02, 31);gantt.config.end_date = new Date(2018, 03, 09);gantt.init("gantt_here");

也可以在gantt初始化调用中指定它们：

gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));

除非标记为unscheduled，否则不适合指定时间间隔的任务将不会显示在甘特图中。

笔记

如果同时指定了start_date和end_date选项，并且您创建的任务不在范围内，则该任务将从图表中消失。 要在图表中显示任务，请使用show_tasks_outside_timescale配置。

gantt.config.start_date = new Date(2019, 02, 31);gantt.config.end_date = new Date(2019, 03, 09);gantt.config.show_tasks_outside_timescale = true;gantt.init("gantt_here");

如果您不使用此配置，则可以扩展范围：

gantt.attachEvent("onLightboxSave", function(id, task, is_new){ var taskStart = task.start_date; var taskEnd = task.end_date; var scaleStart = gantt.config.start_date; var scaleEnd = gantt.config.end_date; // if the task is out of the range if(scaleStart > taskEnd || scaleEnd < taskStart ){  // update timescale range  gantt.config.end_date=new Date(Math.max(taskEnd.valueOf(), scaleEnd.valueOf()));  gantt.config.start_date=new Date(Math.min(taskStart.valueOf(),scaleStart.valueOf()));  gantt.render(); }  return true;});

或向灯箱控件添加验证：

gantt.attachEvent("onLightboxSave", function(id, task, is_new){    var taskStart = task.start_date;    var taskEnd = task.end_date;    var scaleStart = gantt.config.start_date;    var scaleEnd = gantt.config.end_date;    // check if the task is out of the range    if(scaleStart > taskEnd || scaleEnd < taskStart ){        gantt.message({            type:"warning",            text:"Warning! The task is outside the date range!",            expire:5000        });          return false;    }    return true;});

动态改变显示范围

有几种方法可以即时更改显示的范围：

• 您可以借助start_date / end_date配置控制时间范围，但可以动态调整它们以显示加载的任务。

您可以通过在每次重新绘制甘特图时更新start_date / end_date配置来重新计算比例范围，以实现此目的：

gantt.attachEvent("onBeforeGanttRender", function(){   var range = gantt.getSubtaskDates();   var scaleUnit = gantt.getState().scale_unit;   if(range.start_date && range.end_date){     gantt.config.start_date = gantt.calculateEndDate(range.start_date, -4, scaleUnit);     gantt.config.end_date = gantt.calculateEndDate(range.end_date, 5, scaleUnit);   }});gantt.init("gantt_here");

要在每次任务不适合现有缩放间隔时“强制”缩放比例重新渲染，请将fit_tasks属性设置为true：

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

在这两种情况下的起始日期和END_DATE指定了选项，你需要使用上述选项之一为fit_tasks属性正常工作。

• 通过在onTaskDrag事件的处理程序中指定必要的逻辑，也可以在拖动任务时自动更改比例：

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){ var state = gantt.getState(); var minDate = state.min_date,     maxDate = state.max_date; var scaleStep=gantt.date.add(new Date(),state.scale_step,state.scale_unit)-new Date(); var showDate,  repaint = false;  if(mode == "resize" || mode == "move"){    if(Math.abs(task.start_date - minDate) < scaleStep){      showDate = task.start_date;      repaint = true;    }else if(Math.abs(task.end_date - maxDate) < scaleStep){      showDate = task.end_date;      repaint = true;    }    if(repaint){      gantt.render();      gantt.showDate(showDate);    }  }});

显示明确日期范围之外的任务

可以在甘特图中显示不符合指定日期范围的任务。

为此，您需要将show_tasks_outside_timescale配置参数设置为true：

var data = {  "tasks": [    {"id":1, "text":"Project #1", "start_date": "01-09-2018", "end_date": "02-09-2018"},    {"id":2, "text":"Project #2", "start_date": "01-09-2021", "end_date": "02-09-2021"},    {"id":3, "text":"Task #1", "start_date": "03-02-2020", "end_date": "05-02-2020"},    ],    "links":[]};gantt.config.show_tasks_outside_timescale = true;gantt.init("gantt_here", new Date(2020, 1, 1), new Date(2020, 2,1));

结果，标识为“ 1”和“ 2”的任务将在页面上显示为时间轴区域中的空行，并在 格中具有指定的名称和开始日期。

时间步长

要设置时间刻度的步进，请在相应的刻度对象中使用step属性：

var monthScaleTemplate = function (date) {    var dateToStr = gantt.date.date_to_str("%M");    var endDate = gantt.date.add(date, 2, "month");    return dateToStr(date) + " - " + dateToStr(endDate);};gantt.config.scales = [    {unit: "year", step: 1, format: "%Y"},    {unit: "month", step: 3, format: monthScaleTemplate},    {unit: "month", step: 1, format: "%M"}];gantt.init("gantt_here");

高度

要设置比例尺的高度，请使用scale_height属性：

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

如果您有多个比例尺，它们将平均分配指定的高度。例如，如果scale_height为60像素，并且您有3个比例，则每个比例的高度将为60/3 = 20像素。

日期格式

要设置比例尺的格式，请在相应的比例尺对象中使用format属性。日期的格式可以设置为字符串：

gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: weekScaleTemplate},    {unit: "day", step:1, format: "%D", css:daysStyle }];gantt.init("gantt_here");

或作为一个将日期对象作为参数的函数：

gantt.config.scales = [  { unit: "day", step:1, format: function(date){    return "<strong>Day " + dayNumber(date) + "</strong><br/>" + dateFormat(date);  }}]

造型风格

要设置时间标度的单元格样式，请在相应的标度对象中使用css属性。

function getWeekOfMonthNumber(date){    let adjustedDate = date.getDate()+date.getDay();    let prefixes = ['0', '1', '2', '3', '4', '5'];    return (parseInt(prefixes[0 | adjustedDate / 7])+1);}gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: function(date){       return "Week #" + getWeekOfMonthNumber(date);    }},    {unit: "day", step:1, format: "%j %D", css: function(date) {         if(!gantt.isWorkTime(date)){             return "week-end";         }    }}];

如果在标尺的配置中未指定css属性，则可以定义scale_cell_class模板，以将CSS类应用于标尺配置的数组的第一时间标度。

function getWeekOfMonthNumber(date){    let adjustedDate = date.getDate()+date.getDay();    let prefixes = ['0', '1', '2', '3', '4', '5'];    return (parseInt(prefixes[0 | adjustedDate / 7])+1);}gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: function(date){       return "Week #" + getWeekOfMonthNumber(date);    }},    {unit: "day", step:1, format: "%j %D"}];gantt.templates.scale_cell_class = function(date) {         if(!gantt.isWorkTime(date)){             return "week-end";         }};

要将scale_cell_class模板应用于时间标度的所有标度，请将Inherit_scale_class属性设置为true。

gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: function(date){       return "Week #" + getWeekOfMonthNumber(date);    }},    {unit: "day", step:1, format: "%j %D"}];gantt.templates.scale_cell_class = function(date) {         if(!gantt.isWorkTime(date)){             return "week-end";         }};gantt.config.inherit_scale_class = true;

请注意，在使用工作时间计算时，可以使用isWorkTime代替硬编码值：

gantt.config.work_time = true;gantt.templates.scale_cell_class = function(date){   if(!gantt.isWorkTime(date)){      return "weekend";   }};

在“突出显示时间段”文章中了解有关将自定义样式应用于时间轴区域的更多信息。

自定义时间单位

dhtmlxGantt允许您定义自定义时间单位并为比例配置中的标签设置模板。

要定义自定义单位，您需要在Date对象中定义2个函数：

Date gantt.date.<unit>_start(Date date);Date gantt.date.add_<unit>(Date date, Integer increment);

• 第一个函数应返回任何给定日期的开始时间单位（例如，2月14日的month_start-> 2月1日）。
• 第二个函数将日期增加任何给定数量的持续时间单位（例如，“日期减去2天”）

让我们创建一个“ fiscal_year”单位，并假设一个会计年度将在1月31日结束。这是可以指定新单位的方式：

var firstMonth = 1,    firstDay = 1;gantt.date.fiscal_year_start = function(date){     var next = new Date(date);   if(next.getMonth() < firstMonth ||      (next.getMonth() === firstMonth && next.getDate() < firstDay)){      next = gantt.date.add(next, -1, "year");   }  next = gantt.date.year_start(next);  next.setMonth(firstMonth);  next.setDate(firstDay);  return next;};gantt.date.add_fiscal_year = function(date, inc){    return gantt.date.add(date, inc, "year");};

然后在代码中使用它，如下所示：

var dateToStr = gantt.date.date_to_str("%Y");function fiscalYearLabel(date){    return dateToStr(gantt.date.fiscal_year_start(date));};gantt.config.scales = [  {unit:"year", step:1, format:"Calendar year %Y"},  {unit:"fiscal_year", step:1, format:fiscalYearLabel},  {unit:"month", step: 1, format: "%M %Y"},  {unit:"day", step: 1, format:"%d %M"}];

关产品推荐：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平台jQuery Gantt包

phGantt Time Package：对任务和时间的分配管理的甘特图

APS帮助提升企业生产效率，真正实现生产排程可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxGantt正版授权，或了解APS系统请点击【咨询在线客服】
标签：