dhtmlxGantt使用教程：如何管理时间刻度缩放

dhtmlxGantt提供了一个内置模块，可以方便地管理时间刻度缩放。如果您要自定义默认的缩放行为，则可以使用灵活的API来实现动态更改时间刻度设置的功能。

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

dhtmlxGantt试用版

dhtmlxGantt提供了一个内置模块，可以方便地管理时间刻度缩放。如果您要自定义默认的缩放行为，则可以使用灵活的API来实现动态更改时间刻度设置的功能。

内置变焦模块

嵌入式缩放模块在gantt.ext.zoom扩展中声明。要启用该模块，您需要调用gantt.ext.zoom.init（zoomConfig）并传递带有配置设置的zoomConfig对象，该配置设置包含一系列缩放级别。例如：

var zoomConfig = {    levels: [      {        name:"day",        scale_height: 27,        min_column_width:80,        scales:[            {unit: "day", step: 1, format: "%d %M"}        ]      },      {         name:"week",         scale_height: 50,         min_column_width:50,         scales:[          {unit: "week", step: 1, format: function (date) {           var dateToStr = gantt.date.date_to_str("%d %M");           var endDate = gantt.date.add(date, 6, "day");           var weekNum = gantt.date.date_to_str("%W")(date);           return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);           }},           {unit: "day", step: 1, format: "%j %D"}         ]       },       {         name:"month",         scale_height: 50,         min_column_width:120,         scales:[            {unit: "month", format: "%F, %Y"},            {unit: "week", format: "Week #%W"}         ]        },        {         name:"quarter",         height: 50,         min_column_width:90,         scales:[          {unit: "month", step: 1, format: "%M"},          {           unit: "quarter", step: 1, format: function (date) {            var dateToStr = gantt.date.date_to_str("%M");            var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");            return dateToStr(date) + " - " + dateToStr(endDate);           }         }        ]},        {          name:"year",          scale_height: 50,          min_column_width: 30,          scales:[            {unit: "year", step: 1, format: "%Y"}        ]}    ]};gantt.ext.zoom.init(zoomConfig);

有关Zooming模块及其API的详细信息，请参见“ Zoom Extension”一文。

自定义缩放设置

如果您不想使用缩放模块，而是希望手动控制缩放比例设置，则可以通过相应的配置选项进行操作。

实际上，实现缩放功能意味着定义时间刻度配置的多个预设（缩放级别），并为用户提供在它们之间切换的能力。

您需要以下设置来配置时间刻度：

• gantt.config.scales-允许设置任意数量的时间刻度行。
• gantt.config.min_column_width，gantt.config.scale_height-刻度栏宽度和时间刻度的整体高度。

让我们考虑以下预设：

/* global gantt */function setScaleConfig(level) {    switch (level) {        case "day":            gantt.config.scales = {                {unit: "day", step: 1, format: "%d %M"}            };            gantt.config.scale_height = 27;            break;        case "week":            var weekScaleTemplate = function (date) {              var dateToStr = gantt.date.date_to_str("%d %M");              var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");              return dateToStr(date) + " - " + dateToStr(endDate);            };            gantt.config.scales = {                {unit: "week", step: 1, format: weekScaleTemplate},                {unit: "day", step: 1, format: "%D"}            };            gantt.config.scale_height = 50;            break;        case "month":            gantt.config.scales = {                {unit: "month", step: 1, format: "%F, %Y"},                {unit: "day", step: 1, format: "%j, %D"}            };            gantt.config.scale_height = 50;            break;        case "year":            gantt.config.scales = {                {unit: "year", step: 1, format: "%Y"},                {unit: "month", step: 1, format: "%M"}            };            gantt.config.scale_height = 90;            break;    }}

所描述的功能可以通过四个预定义的配置之一（从“天”到“年”）配置甘特对象。甘特图将需要完整的重新粉刷以显示配置更改：

setScaleConfig("year");gantt.init("gantt_here");

然后，您可以为用户实现一个UI，以切换缩放级别：

<label><input type="radio" name="scale" value="day" checked/>Day scale</label><label><input type="radio" name="scale" value="week"/>Week scale</label><label><input type="radio" name="scale" value="month"/>Month scale</label><label><input type="radio" name="scale" value="year"/>Year scale</label>

var els = document.querySelectorAll("input[name='scale']");for (var i = 0; i < els.length; i++) {    els[i].onclick = function(e){        var el = e.target;        var value = el.value;        setScaleConfig(value);        gantt.render();    };}

关产品推荐：

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

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

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

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

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

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

来源：慧都