Zoomfunktion

dhtmlxGantt enthält ein praktisches integriertes Modul zur Verwaltung der Zeitskalen-Zoomfunktion. Wenn Sie das Standard-Zoomverhalten anpassen möchten, steht Ihnen eine flexible API zur Verfügung, mit der Sie die Zeitskaleneinstellungen dynamisch anpassen können.

Integriertes Zoom-Modul

Das Zoom-Modul ist Teil der gantt.ext.zoom Erweiterung. Um es zu aktivieren, rufen Sie gantt.ext.zoom.init(zoomConfig) auf und übergeben ein zoomConfig Objekt mit einem Array von Zoomstufen. Hier ist ein Beispiel:

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);

Related sample:  Mouse wheel zoom

Benutzerdefinierte Zoom-Einstellungen

Wenn Sie das Zoom-Modul nicht verwenden und die Skalen-Einstellungen selbst verwalten möchten, können Sie dies mit den entsprechenden Konfigurationsoptionen tun.

Im Wesentlichen beinhaltet das Hinzufügen einer Zoomfunktion das Einrichten mehrerer Zeitskalen-Presets (Zoomstufen) und das Bereitstellen einer Möglichkeit für Benutzer, zwischen ihnen zu wechseln.

Hier sind die Einstellungen, die Sie zur Konfiguration der Zeitskala benötigen:

• gantt.config.scales - ermöglicht es Ihnen, mehrere Zeilen für die Zeitskala zu definieren.

• gantt.config.min_column_width, gantt.config.scale_height - steuern die Spaltenbreite und die Gesamthöhe der Zeitskala.

Nachfolgend ein Beispiel zur Erstellung einiger Presets:

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

Diese Funktion passt das Gantt-Objekt an eine der vier vordefinierten Konfigurationen an, die von "Tag" bis "Jahr" reichen. Nach der Änderung der Konfiguration muss Gantt vollständig neu gezeichnet werden, um die Updates anzuwenden:

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

Sie können auch eine einfache Benutzeroberfläche erstellen, die es Benutzern ermöglicht, die Zoomstufe auszuwählen:

<label><input type="radio" name="scale" value="day" checked/>Tagesskala</label>
<label><input type="radio" name="scale" value="week"/>Wochenskala</label>
<label><input type="radio" name="scale" value="month"/>Monatsskala</label>
<label><input type="radio" name="scale" value="year"/>Jahresskala</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();
    };
}

Related sample:  Dynamic scales

Zurück nach oben