Диаграмма Ганта на сайте
Это один из режимов работы компонента Таблица.
Для показа диаграммы Ганта по дням или часам, необходимо сделать следующее:
Для показа диаграммы Ганта по дням или часам, необходимо сделать следующее:
-
Создать таблицу с колонками id (PK, можно строка), name, desc. Это будут строки Ганта
(т.е. для каждого из этих элементов будет грузиться лента событий по датам). -
В третьем select в GetItems указать тип вывода viewType=’gantt’
select 'gantt' viewType, 'days' ganttScale, 'financeItemInfo' ganttItemForm, 'Описание деталей операции' ganttItemFormTitle, 'Финансы по датам' Title
-
В четвертом 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())
-
Дополнительно в 3 запросе select можно настроить следующие параметры:
-
ganttScale - формат по умолчанию days, hours, weeks и т.д.
-
ganttNavigate - как будет выводиться навигация по диаграмме - scroll, buttons
-
ganttItemForm - код формы. Если указан, то при клике на элемент диаграммы в модальном окне будет вызываться форма
(форму с указанным кодом необходимо будет реализовать отдельно, ей передается itemID=dataObj из 4 запроса select). -
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
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты Бизнес-процессы. Создание бизнес-процесса в личном кабинете Работа с показателями. Управление метриками на сайте Создание панелей-подсказок для пользователей в личном кабинете Отображение счетчиков в личном кабинете на сайте Работа с HTML блоками. Создание модулей верстки Работа с деревьями (иерархия). Вывод древовидных структур на сайте Добавление лайков, дизлайков, рейтингов, голосования за товары в личном кабинете Интерактивное дерево для отображения иерархических структур Диаграмма Ганта на сайте Доска Канбан Диаграмма Chartbar Карта с маркерами. Вывод точек на Google Maps Карточки Полоски прогресса Временная линия (timeline) для вывода событий на странице Вывод данных в виде графа на сайте Вывод движения заявки по статусам statusbar Интерактивные диаграммы, графики
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта