autosize

заставляет диаграмму Ганта автоматически изменять свой размер, чтобы отобразить все задачи без прокрутки

Values

Example

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

Default value:

false

Конфигурация 'autosize' определяет, будет ли диаграмма Ганта подстраиваться под данные внутри размеров контейнера, в котором она инициализирована, показывая внутренние полосы прокрутки, или изменять размеры контейнера, чтобы отобразить все данные без внутренних прокруток:

• пример с размерами div диаграммы Ганта, определенными в css - внутренние полосы прокрутки активны при необходимости
• пример с размерами div диаграммы Ганта, рассчитанными компонентом - внутренние полосы прокрутки отключены

В случае, если диаграмма Ганта должна вписываться в определенную область на странице, размер контейнера диаграммы Ганта должен управляться вручную:

• autosizing должен быть отключен
• ширина/высота div должна рассчитываться либо по html-разметке, если используется готовое решение для адаптивных макетов, либо вручную в коде.

Прокрутка к скрытым элементам

В режиме по умолчанию диаграмма Ганта прокручивается автоматически, когда вы используете метод showTask или showDate. Но когда autosize включен, диаграмма Ганта увеличивает размер своего контейнера, чтобы показать себя на странице, вместо того чтобы отображать скрытый элемент.

Нет универсального способа избежать этой проблемы, так как на странице могут быть и другие элементы, кроме диаграммы Ганта, и некоторые из этих элементов также нужно прокручивать. Поэтому эту проблему следует решать в зависимости от конфигурации страницы/приложения.

В простом конфиге диаграмма Ганта может находиться перед или после некоторых элементов в вашем приложении. И она может работать корректно, если вы прокручиваете страницу.

В сложном конфиге контейнер диаграммы Ганта может быть помещен в другие контейнеры, которые также могут находиться в каких-то других контейнерах. В этом случае вам нужно вручную прокручивать только те элементы, которые вам нужны.

Одним из способов прокрутить страницу к необходимому элементу является использование метода element.scrollIntoView:

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

где id - это ID задачи, которую вы хотите показать.

Другим способом является модификация метода showTask или showDate диаграммы Ганта:

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

или создание пользовательской функции для отображения задачи:

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

Related sample:  Прокрутка к указанному элементу

К началу