autosize

Erzwingt, dass das Gantt-Diagramm automatisch seine Größe ändert, um alle Aufgaben ohne Scrollen anzuzeigen.

boolean| string autosize;

Values

"y" (oder true), "x", "xy"

Example

gantt.config.autosize = "xy";
 
gantt.init("gantt_here");

Default value:

false

Details

Die 'autosize'-Konfiguration definiert, ob das Gantt-Diagramm die Daten innerhalb der Größen des Containers, in dem es initialisiert wird, anzeigt und innere Scrollleisten zeigt, oder die Größen des Containers ändert, um alle Daten ohne innere Scrollleisten anzuzeigen:

ein Beispiel mit in CSS definierten Größen des Gantt-Divs - innere Scrollleisten sind bei Bedarf aktiv
ein Beispiel mit vom Komponente berechneten Größen des Gantt-Divs - innere Scrollleisten sind deaktiviert

Falls das Gantt-Diagramm einen bestimmten Bereich auf einer Seite ausfüllen soll, muss die Größe des Gantt-Containers manuell verwaltet werden:

Autosizing sollte deaktiviert werden
Breite/Höhe eines Divs sollte entweder durch das HTML-Layout berechnet werden, wenn eine fertige Lösung für responsive Layouts verwendet wird, oder manuell durch Code.

Scrollen zu versteckten Elementen

Im Standardmodus wird das Gantt-Diagramm automatisch gescrollt, wenn Sie die showTask oder showDate Methode verwenden. Wenn jedoch autosize aktiviert ist, erhöht das Gantt-Diagramm die Größe seines Containers, um sich selbst auf der Seite anzuzeigen, anstatt das versteckte Element anzuzeigen.

Es gibt keinen universellen Weg, um das Problem zu umgehen, da die Seite auch andere Elemente außer dem Gantt-Diagramm enthalten kann, und einige dieser Elemente ebenfalls gescrollt werden müssen. Daher sollte dieses Problem abhängig von der Seiten-/Anwendungskonfiguration gelöst werden.

In einer einfachen Konfiguration kann das Gantt-Diagramm vor oder nach einigen Elementen in Ihrer Anwendung platziert sein. Es kann korrekt funktionieren, wenn Sie die Seite scrollen.

In einer komplexen Konfiguration kann der Gantt-Container in andere Container platziert werden, die ebenfalls in einige andere Container platziert werden können. In diesem Fall müssen Sie manuell nur die Elemente scrollen, die Sie benötigen.

Eine Möglichkeit, die Seite zu dem notwendigen Element zu scrollen, ist die Verwendung der element.scrollIntoView Methode:

var attr = gantt.config.task_attribute;
var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
if(timelineElement)
    timelineElement.scrollIntoView({block:"center"});

wobei id die Aufgaben-ID ist, die Sie anzeigen möchten.

Eine andere Möglichkeit besteht darin, die showTask oder showDate Methode des Gantt-Diagramms zu modifizieren:

var showTask = gantt.showTask;
 
gantt.showTask = function(id){
  showTask.apply(this, [id]);
  var attr = gantt.config.task_attribute;
  var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
  if(timelineElement)
    timelineElement.scrollIntoView({block:"center"});
};

oder eine benutzerdefinierte Funktion zu erstellen, um die Aufgabe anzuzeigen:

function showTask(id){
  gantt.showTask(id);
  var attr = gantt.config.task_attribute;
  var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
    if(timelineElement)
      timelineElement.scrollIntoView({block:"center"});
}