Диаграмма Ганта

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


Для показа диаграммы Ганта по дням или часам, необходимо сделать следующее: 
  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

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Бесплатное обучение разработке на Falcon Space

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space.
Примечание