這篇文章給大家?guī)?a >dhtmlxGantt如何自定義縮放時(shí)間尺度。

DhtmlxGantt正版試用下載

dhtmlxGantt提供了一個(gè)內(nèi)置模塊，用于方便地管理時(shí)間尺度縮放。如果您想自定義默認(rèn)縮放行為，有一個(gè)靈活的 API 允許您實(shí)現(xiàn)動態(tài)更改時(shí)間刻度設(shè)置的能力。

1、內(nèi)置縮放模塊

嵌入式縮放模塊在gantt.ext.zoom擴(kuò)展中聲明。要啟用該模塊，您需要調(diào)用gantt.ext.zoom.init(zoomConfig)并傳遞一個(gè)帶有配置設(shè)置的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);

2、自定義縮放設(shè)置

如果您不想使用縮放模塊并且更喜歡手動控制縮放設(shè)置，您可以通過相應(yīng)的配置選項(xiàng)來實(shí)現(xiàn)。

事實(shí)上，實(shí)現(xiàn)縮放功能意味著定義時(shí)間尺度配置（縮放級別）的多個(gè)預(yù)設(shè)，并為用戶提供在它們之間切換的能力。

您需要以下設(shè)置來配置時(shí)間刻度：

• gantt.config.scales - 允許設(shè)置任意數(shù)量的時(shí)間刻度行。
• gantt.config.min_column_width , gantt.config.scale_height - 刻度列寬和時(shí)間刻度的總高度。

讓我們考慮以下預(yù)設(shè)：

/* 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;
    }
}

所描述的功能可以通過從“日”到“年”時(shí)間尺度的四個(gè)預(yù)定義配置之一來配置甘特圖對象。甘特圖將需要完全重繪以顯示配置更改：

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

然后你可以為用戶實(shí)現(xiàn)一個(gè) 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();
    };
}

dhtmlxGantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫。了解更多內(nèi)容，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

慧都年終狂歡季，全場產(chǎn)品，限時(shí)特惠，立即了解詳情！