Einrichten von Skalen

Sie können Skalen mit der scales Eigenschaft konfigurieren. Um mehrere Skalen einzuschließen, fügen Sie einfach Skalenobjekte in das scales Array in der Konfiguration ein:

// Beispiel einer einzelnen Tages-Skala
gantt.config.scales = [
    {unit: "day", step: 1, format: "%j, %D"}
];
 
// Beispiel mit mehreren Skalen
gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "week", step: 1, format: weekScaleTemplate},
    {unit: "day", step:1, format: "%D", css:daysStyle }
];

Die Zeitskala (X-Achse) kann auf verschiedene Weise angepasst werden:

1. Einheit
2. Bereich
3. Schritt
4. Höhe
5. Format
6. Stil

Sie haben auch die Möglichkeit, eine benutzerdefinierte Skala zu erstellen.

Zeiteinheiten

Die unit Eigenschaft in einem Skalenobjekt definiert die Zeiteinheit für die Skala.

Die verfügbaren Einheiten sind: "minute", "hour", "day" (Standard), "week", "quarter", "month" und "year".

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

Related sample:  Month view

Bereich

Standardbereichseinstellungen

Wenn Sie keinen Datumsbereich explizit festlegen, berechnet Gantt diesen automatisch basierend auf den geladenen Aufgabendaten. Es fügt etwas Puffer vor der frühesten Aufgabe und nach der neuesten hinzu, wie in den Zeitskaleneinstellungen definiert. Die Größe dieses Offsets hängt vom Wert scale_offset_minimal ab. Es könnte entweder der unit-Attribut in der Skalenkonfiguration entsprechen oder die kleinste Einheit der Zeitskala verwenden.

Um den angezeigten Datumsbereich zu überprüfen, können Sie die gantt.getState() Methode verwenden:

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

Der Skalenbereich aktualisiert sich automatisch, wenn Gantt gerendert wird. Wenn ein Benutzer jedoch eine Aufgabe außerhalb des sichtbaren Bereichs verschiebt, wird ihre Zeile weiterhin angezeigt, aber die Aufgabenleiste erscheint erst, wenn das Diagramm vollständig neu gezeichnet ist.

Um die Skala automatisch anzupassen, können Sie die fit_tasks Konfiguration aktivieren:

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

Related sample:  Auto resize scale

---

Datumsbereich explizit festlegen

Bei Bedarf können Sie den Datumsbereich manuell mit den Konfigurationsoptionen start_date und end_date festlegen:

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

Alternativ können Sie diese Daten direkt während der Initialisierung angeben:

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

Related sample:  Define displayed date range

Aufgaben, die außerhalb des definierten Bereichs liegen, erscheinen nicht im Gantt-Diagramm, es sei denn, sie sind nicht terminierte Aufgaben.

Related sample:  Show Unscheduled Tasks

Hinweis

Wenn sowohl start_date als auch end_date festgelegt sind, werden Aufgaben, die außerhalb dieses Bereichs erstellt werden, nicht im Diagramm angezeigt. Um solche Aufgaben einzuschließen, aktivieren Sie die show_tasks_outside_timescale Konfiguration:

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

Alternativ können Sie den Bereich dynamisch erweitern:

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(scaleStart > taskEnd || scaleEnd < taskStart ){
  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;
});

Oder Sie können eine Validierung hinzufügen, um zu verhindern, dass Aufgaben außerhalb des Bereichs gespeichert werden:

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(scaleStart > taskEnd || scaleEnd < taskStart ){
        gantt.message({
            type: "warning", 
            text: "Warnung! Die Aufgabe liegt außerhalb des Datumsbereichs!",
            expire: 5000
        });
        return false;
    } 
    return true;
});

---

Dynamische Änderung des angezeigten Bereichs

Es gibt einige Möglichkeiten, den angezeigten Bereich spontan anzupassen:

1. Verwenden Sie die start_date und end_date Konfigurationen, um sie dynamisch zu aktualisieren und die geladenen Aufgaben einzuschließen. Zum Beispiel können Sie den Skalenbereich während des Neuzeichnens neu berechnen:

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

1. Aktivieren Sie die fit_tasks Eigenschaft, um die Skala automatisch anzupassen, wenn Aufgaben außerhalb des sichtbaren Bereichs fallen:

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

Wenn sowohl start_date als auch end_date angegeben sind, müssen Sie dies mit anderen Methoden kombinieren, um sicherzustellen, dass fit_tasks ordnungsgemäß funktioniert.

1. Ändern Sie die Skala dynamisch, während Sie eine Aufgabe ziehen. Dies kann durch Hinzufügen von Logik zum onTaskDrag Ereignishandler erfolgen:

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

Related sample:  

---

Anzeigen von Aufgaben außerhalb des expliziten Datumsbereichs

Aufgaben außerhalb des definierten Datumsbereichs können dennoch angezeigt werden, indem die show_tasks_outside_timescale Konfiguration aktiviert wird:

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

Related sample:  Tasks outside timescale

Aufgaben, die außerhalb des Bereichs fallen, erscheinen als leere Zeilen in der Zeitleiste und zeigen weiterhin ihre Details im Raster an.

---

[Fahren Sie mit den nächsten Abschnitten fort, um mehr Details über Zeitschritt, Höhe, Datumsformat, Styling und benutzerdefinierte Zeiteinheiten zu erhalten.]

Beispiel 1

Hier ist, wie Sie eine "fiscal_year" Einheit definieren können, vorausgesetzt, das Geschäftsjahr endet am 31. Januar. Dieses Snippet demonstriert die Einrichtung:

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

Sobald definiert, können Sie es in Ihre Konfiguration wie folgt integrieren:

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:"Kalenderjahr %Y"},
  {unit:"fiscal_year", step:1, format:fiscalYearLabel},
  {unit:"month", step: 1, format: "%M %Y"},
  {unit:"day", step: 1, format:"%d %M"}
];

Beispiel 2

Sie können jede "day"-Zelle in drei "hour"-Zellen aufteilen, die als 00, 08 und 16 beschriftet sind. Hier ist, wie diese Logik implementiert werden kann:

gantt.date.hour_custom_start = function (date) {
    return date;
};
 
gantt.date.add_hour_custom = function (date, inc) { // inc hängt vom "step" ab
    const nextDate = new Date(date);
    if (nextDate.getHours() % 8 != 0) { // der Stundenwert ist nicht 0, 8 oder 16         const diff = Math.abs(8 - nextDate.getHours());         return gantt.date.add(nextDate, diff * inc, "hour");     }     return gantt.date.add(date, 8 * inc, "hour"); };
 
gantt.config.scales = [
    { unit: "day", step: 1, date: "%d %F" },
    { unit: "hour_custom", step: 1, date: "%H" },
];
 
gantt.config.date_grid = "%Y-%m-%d %H:%i"

Related sample:  Custom hours on the scale

Um die erste "hour"-Zelle zu generieren, passt Gantt die Zeit basierend auf der Startzeit der Aufgabe an. Wenn die früheste Aufgabe beispielsweise um 07:00 Uhr beginnt, was kein Vielfaches von acht ist, wendet Gantt diese Regel an:

if (nextDate.getHours() % 8 != 0) {
    const diff = Math.abs(8 - nextDate.getHours());  // 8 - 7 = 1
    return gantt.date.add(nextDate, diff * inc, "hour"); // 7 - 1 = 6
}

• Es berechnet die Lücke zwischen 08:00 und 07:00:
  diff = 08:00 - 07:00 = 1 Stunde

• Dann multipliziert es das Intervall mit dem Inkrement:
  diff * inc = 1 Stunde * (-1) = -1 Stunde
  Der Inkrementwert (inc) ist hier negativ (-1).

• Schließlich passt es die früheste Aufgabenzeit an:
  07:00 + (- 1 Stunde) = 06:00
  Der Wert der ersten Zelle wird 06.

Die zweite "hour"-Zelle wird ähnlich berechnet, jedoch mit einem positiven Inkrement:

• diff = 08:00 - 06:00 = 2 Stunden

• diff * inc = 2 Stunden * 1 = 2 Stunden

• 06:00 + 2 Stunden = 08:00
  Der Wert der zweiten Zelle ist 08.

Sobald 08:00 erreicht ist, was ein Vielfaches von acht ist, folgen die folgenden Zellen dem Muster: 08:00 + 8 Stunden = 16:00, und so weiter.

Für weitere Beispiele konsultieren Sie den Leitfaden How to add a custom scale.

---

Benutzerdefinierte Zeitspannen

Dieser Abschnitt bietet Beispiele zur Anpassung der Zeitskala, um nicht arbeitsfreie Stunden einzuschließen oder auszuschließen. Es behandelt auch das Ausblenden von Zellen mit nicht arbeitsfreien Stunden am Anfang der Skala, selbst wenn der skip_off_time Modus aktiv ist.

Hier ist eine gängige Einrichtung, bei der die Arbeitszeiten von 08:00 bis 12:00 und von 13:00 bis 17:00 sind:

gantt.date.day_custom_start = function (date) {
    return date;
};
 
gantt.date.add_day_custom = function (date, inc) {     const nextDate = new Date(date);     if (nextDate.getHours() < 8) {  // Aussage 1        const diff = 8 - nextDate.getHours();         return gantt.date.add(nextDate, diff * inc, "hour");     }     if (nextDate.getHours() == 8) {  // Aussage 2        return gantt.date.add(nextDate, 9 * inc, "hour");     }     if (nextDate.getHours() == 17) {  // Aussage 3        return gantt.date.add(nextDate, 15 * inc, "hour");     }  
    return gantt.date.add(date, 8 * inc, "hour"); };
 
gantt.config.scales = [
    { unit: "day_custom", step: 1, date: "%d %H:00" },
];
 
// gantt.config.skip_off_time = true;
gantt.config.work_time = true;
gantt.config.correct_work_time = true;
gantt.plugins({
    auto_scheduling: true,
});
gantt.setWorkTime({ hours: ["8:00-12:00", "13:00-17:00"] });  
gantt.config.duration_unit = "minute";
gantt.config.duration_step = 1;
gantt.config.time_step = 1;
gantt.config.round_dnd_dates = false;

Related sample:  Custom time spans

Stellen Sie sich vor, die früheste Aufgabe beginnt am 08:00 am 1. April 2025. Abhängig von der gantt.config.skip_off_time Einstellung passt Gantt die Zeitskala unterschiedlich an.

Wenn nicht arbeitsfreie Stunden ausgeblendet werden:

gantt.config.skip_off_time = true;

Gantt berechnet die erste "hour"-Zelle, indem es die früheste Aufgabenzzeit bis zur vorherigen Arbeitszeit am Tag dekrementiert:

• Es subtrahiert 9 Stunden von 08:00 am 1. April 2025 (Aussage 2):
  08:00 - 9 Stunden = 23:00
  
• Da 23:00 nicht arbeitsfrei ist, zieht es weitere 8 Stunden ab:
  23:00 - 8 Stunden = 15:00
• Die resultierende Zeit, 15:00 am 31. März 2025, liegt innerhalb der Arbeitszeit.

Der Wert der ersten Zelle wird somit 31 15:00.

Wenn nicht arbeitsfreie Stunden angezeigt werden:

gantt.config.skip_off_time = false;

Die erste Zelle beginnt immer noch bei 31 15:00, aber zusätzliche leere Zellen erscheinen vor der frühesten Aufgabe. Diese Zellen repräsentieren nicht arbeitsfreie Stunden.

Zum Beispiel:

• Die zweite Zelle: 15:00 + 8 Stunden = 23:00
• Die dritte Zelle: 23:00 + 8 Stunden = 07:00
• Die vierte Zelle: 07:00 + 1 Stunde = 08:00 (früheste Aufgabenzzeit).

---

Wenn Sie eine konsistente Einzelzellenverschiebung unabhängig von der skip_off_time Einstellung wünschen, können Sie diese Logik verwenden:

gantt.date.add_day_custom = function (date, inc) {
    // Für geladene Aufgaben, berechnen Sie das Datum der ersten Zelle
    if (inc < 0 && gantt.getTaskByTime().length) {
        return gantt.calculateEndDate({ 
            start_date: date, duration: -1, unit: gantt.config._duration_unit 
        })
    }
 
    // Berechnen Sie die Start- und Endzeiten des Arbeitstages
    if (date.getHours() == 8) {
        return gantt.calculateEndDate(date, 8);
    }
    if (date.getHours() == 17) {
        return gantt.date.add(date, 15 * inc, "hour");
    }
 
    // Für Aufgaben oder vollständige Skala, berechnen Sie die Daten entsprechend
    date = gantt.date.add(date, 1 * inc, "day");
    gantt.date.day_start(date);
    date = gantt.getClosestWorkTime({ date, dir: "future" })
    return date
};
 
gantt.config.scales = [
    { unit: "day_custom", step: 1, date: "%d %H:%i" },
];
gantt.config.work_time = true;
 
gantt.config.skip_off_time = false;

Related sample:  Equal offset for custom scales

So sieht es aus, wenn nicht arbeitsfreie Stunden ausgeblendet sind:

Und wenn sie angezeigt werden (skip_off_time deaktiviert):

---

Unendliches Scrollen

Für detaillierte Beispiele zur Implementierung des unendlichen Scrollens in der Zeitleiste, konsultieren Sie den verwandten Artikel.

---

Feste Etiketten

Ab Version 9.0 sind die Zeitskalenetiketten standardmäßig fest. Dies stellt sicher, dass Etiketten sichtbar bleiben, während Sie durch die Zeitleiste scrollen, was die Lesbarkeit verbessert, insbesondere beim Hinein- oder Herauszoomen.

Um diese Funktion zu deaktivieren und zu zentrierten Etiketten zurückzukehren, setzen Sie sticky auf false:

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

Um feste Etiketten unabhängig von der Zellbreite zu erzwingen, setzen Sie sticky auf true:

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

Zurück nach oben