Диаграмма Ганта на сайте

Это один из режимов работы компонента Таблица.

Для показа диаграммы Ганта по дням или часам, необходимо сделать следующее: 
  1. Создать таблицу с колонками id (PK, можно строка), name, desc. Это будут строки Ганта
    (т.е. для каждого из этих элементов будет грузиться лента событий по датам). 
  2. В третьем select в GetItems указать тип вывода viewType=’gantt’
    select 'gantt' viewType, 'days' ganttScale, 'financeItemInfo' ganttItemForm, 'Описание деталей операции' ganttItemFormTitle, 'Финансы по датам' Title
  3. В четвертом select в GetItems (вместо данных футера) выводим данные по элементам Ганта. 
    select top 60 (select name from fin_financeCategories where id = categoryID) as  itemID,
           -- 'itemID' должен совпадать с id элемента из второго select
           created [from], -- дата начала и конца элемента Ганта
           dateadd(hour, 0.5, created) [to],
           'Х' [label], -- метка на диаграмме
           convert(nvarchar, created, 104) + ' : ' +  isnull((select name
                                                              from fin_financeCategories
                                                              where id = categoryID),
                                                              'Без категории')
           + ' : ' + try_cast(sum as nvarchar) [desc], -- подсказка при наведении на элемент
           'text-warning' customClass, --css класс для стилизации элемента на диаграмме
           cast(id  as nvarchar) dataObj-- идентификатор элемента, для показа модальной формы
    from fin_finances
    where isnull(isDeleted,0)=0
      and (isnull(@filterCategoryID,0)=0 or @filterCategoryID = categoryID)
      and created > dateadd(month, -3, getdate())
  4. Дополнительно в 3 запросе select можно настроить следующие параметры: 
    1. ganttScale - формат по умолчанию days, hours, weeks и т.д.
    2. ganttNavigate - как будет выводиться навигация по диаграмме - scroll, buttons
    3. ganttItemForm - код формы. Если указан, то при клике на элемент диаграммы в модальном окне будет вызываться форма
      (форму с указанным кодом необходимо будет реализовать отдельно, ей передается itemID=dataObj из 4 запроса select). 
    4. ganttItemFormTitle - заголовок диалогового окна формы
 Примечание по диаграммам Ганта: 
  • Пейджинг для диаграммы устанавливается равным пейджингу настроек таблицы. 
  • Элементы Ганта занимают минимально 1 час в сетке. Если у вас событие было с 14:02 до 15:02 то это займет 2 ячейки - 14 и 15. 
    Поэтому лучше делайте события длинной в 1 минуту.
  • Элементы могут налезать друг на друга, поэтому лучше группировать события по часам в дне + показывать количество в заголовке.
    А в модальном окне (форма) по клику показывать уже элементы, которые соответствуют ячейке. 
  • desc для категорий лучше ставить в какое-то значение, а не оставлять пустым
  • Если нужно раскрашивать элементы в цвета, используйте параметр customClass - ставьте классы bootstrap: bg-warning  
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK