Топ 5: Лучшие бесплатные jQuery и JavaScript динамические диаграммы Ганта для веб-приложений

Если вы работаете в области управления проектами или у вас есть должность, которая включает планирование задач и ресурсов, то диаграмма Ганта, вероятно, не покажется вам неизвестной. С помощью диаграммы Ганта вы будете иметь в своем распоряжении очень четкое представление обо всех запланированных действиях, о том, как долго каждый из них будет продолжаться, где действия пересекаются с другими действиями и где размещены все ресурсы. Эти диаграммы помогут вам прояснить, как различные задачи взаимосвязаны и, кроме того, полагаться на выполнение другой задачи для достижения определенных целей. Если вы веб-разработчик и ищете потрясающий встраиваемый компонент Gantt Chart с JavaScript, больше не ищите, я уверен, что вы найдете то, что вам нужно, в этом топе.

Наслаждайтесь нашей коллекцией из 5 лучших бесплатных компонентов Dynamic Gantt для ваших веб-приложений.

5. jsGanttImproved

Github

Полнофункциональный компонент диаграммы Ганта, полностью построенный на Javascript, CSS и AJAX. Он легкий и не требует внешних библиотек или дополнительных изображений. Основные функции этого проекта:

  • Задачи Складные целевые группы.
  • Зависимости.
  • Завершение задачи.
  • Задача Стайлинг.
  • Основные этапы.
  • Ресурсы.
  • Динамическая загрузка задач.
  • Динамическое изменение формата: час, день, неделя, месяц, квартал.
  • Загрузить Гантт из XML
    • Из внешних файлов (включая экспериментальную поддержку файлов MS Project XML).
    • Из строк JavaScript.
  • Поддержка интернационализации (все жестко закодированные строки могут быть переопределены)

4. JQuery Gantt

Github

Компонент jQuery Gantt

jQuery Gantt Chart — это простая диаграмма, которая реализует функциональность Ганта как компонент jQuery. Это в состоянии:

  • Читать данные JSON
  • Пейджинговые результаты
  • Отображать разные цвета для каждой задачи
  • Показать краткое описание в виде подсказок
  • Отмечать праздники

Плагин был протестирован и должен работать на:

  • Firefox 4+
  • Chrome 13+
  • Safari 5+
  • Опера 9+
  • IE 8+
Читайте также:  Как выделить код на стороне сервера с помощью PHP в Laravel

Этот плагин распространяется под лицензией MIT.

3. JQuery GanttView

Github

Плагин jQuery.ganttView — это очень легкий плагин для создания диаграммы Ганта в обычном HTML, без векторной графики и изображений. Плагин поддерживает перетаскивание и изменение размеров блоков Ганта и обратных вызовов для захвата обновленных данных.

Плагин зависит от следующих библиотек:

  • JQuery 1.4 или выше (очевидно)
  • jQuery-UI 1.8 или выше
  • date.js

В настоящее время плагин был протестирован и работает в: FF 3.5+, Chrome 5+, Safari 4+, IE8 +. В IE7 есть незначительные проблемы, и я даже не пытался использовать его в IE6. Если у вас возникли проблемы с какой-либо версией Internet Explorer и вы хотите внести исправления CSS, посетите хранилище и создайте запросы извлечения, несколько человек обратились за поддержкой IE6.

2. Т. В. Гантт

Github | Документация

Изначально Twproject Gantt editor — это бесплатный онлайн-инструмент для создания и совместного использования Gantts, однако они предоставляют компонент Gantt, написанный на JavaScript и построенный на jQuery для создания Gantts, деревьев задач, зависимостей, которые экспортируют полученные данные в формате JSON.

  • редактирование на месте.
  • тащить, тянуть понижаться.
  • масштабирование.
  • делать / отмены.
  • множественные зависимости.
  • критический путь.
  • полное редактирование.
  • даты.
  • ярлыки.
  • css skin.
  • вехи.
  • несколько браузеров.
  • редактирование ресурсов.
  • несколько назначений.
  • экспорт данных в формате JSON свиток SVG гладкий рисунок для печати.

Хотя средство просмотра Gantt (следовательно, только для чтения) можно легко упаковать как один компонент, редактор Gantt представляет собой более сложный объект, поэтому авторы предпочитают думать о нем как о встроенном jQuery-приложении, а не только как о плагине.

1. DHTMLX Диаграмма Ганта

Документация | демос

Гантт DXHTML Бесплатный компонент

dhtmlxGantt предоставляет богатый и гибкий JavaScript API, который позволяет вам настраивать каждый элемент вашей диаграммы Ганта: настраивать масштаб времени, определять структуру сетки, изменять окраску панелей задач, добавлять текст или любой другой HTML-код на панели задач, определять зависимости ( отношения) между задачами и многое другое. Форма редактирования задачи (лайтбокс) также может быть настроена для включения новых настраиваемых полей. Основными функциями этой библиотеки являются:

  • Редактируемая или только для чтения диаграмма Ганта
  • Полный контроль с JavaScript API
  • Кросс-браузер: IE, FF, Chrome, Safari, Opera
  • Клавиатурная навигация
  • Поддержка сенсорных устройств: iOS, Android
  • Интеграция jQuery
  • Полноэкранный режим
  • Загрузка из XML, JSON
  • Богатое поведение перетаскивания для управления задачами
  • Возможность отмечать определенное время в области шкалы времени
  • Всплывающие
  • Расчет критического пути (только PRO)
  • Обратное планирование
  • Дополнительный вид дерева
  • Настраиваемая форма редактирования задачи (лайтбокс)
  • Группировка задач (только PRO)
  • Поддержка базовых сроков, сроков и других пользовательских элементов (только PRO)
  • Три типа задач: проект (только для PRO), задача, этап (только для PRO)
  • Процент окраски прогресса для задач
  • Автоматическое планирование (только для PRO)
  • Поддержка внеплановых задач
  • Стрелки зависимости
  • Простой API для управления режимами редактирования / чтения только для отдельной задачи
  • Экспорт / импорт из MS Project
  • Умный рендеринг
  • Отменить / повторить функциональность
  • доступность
Читайте также:  Как настроить NetBeans в Windows для автоматической компиляции файлов LESS в CSS

Диаграмму Ганта можно легко использовать с фреймворками jQuery, NodeJS, Angular, Angular 2. Будучи полностью клиентским решением, вы можете использовать его с любой серверной технологией, включая PHP (Laravel, Slim и другие php-фреймворки), ASP.NET, Ruby on Rails и другие. Компонент DHTMLX Gantt chart поддерживает все основные браузеры, в частности Google Chrome, Firefox, Internet Explorer (8+), Microsoft Edge, Safari. Этот компонент является бесплатным по лицензии GPL.

Похвальные грамоты

JQuery Gantt

Github

JQuery Gantt

jQuery Gantt — полезный плагин jQuery для создания диаграммы Ганта. Основными функциями этого плагина являются:

  • Localizationable
  • Простая настройка
  • Легкий вес (5 КБ в сжатом виде)
  • Работает во всех основных браузерах, включая IE11 +

Если вы знаете другого удивительного свободно Компонент DHTMLX Gantt Chart, написанный на JavaScript для веб-приложений, поделитесь им с сообществом в поле для комментариев.

Ссылка на основную публикацию
Adblock
detector