Вот список наших библиотек:
Bryntum Gantt является инструментом, позволяющим добавить диаграмму Ганта к проекту, разработанному с помощью Ext JS. Bryntum Gantt является детищем компании Bryntum, которая также известна благодаря такому плагину для Ext JS как Bryntum Scheduler
DHTMLX Gantt, автономный JavaScript компонент для создания полнофункциональных диаграмм Ганта для кросс-браузерных и кросс-платформенных приложений
Google Gantt chart, диаграмма Ганта от всем известного веб-гиганта. Согласно документации, Google Gantt chart в данный момент находится в состоянии беты, но, тем не менее, не будет лишним узнать, какие возможности нам доступны на данном этапе развития
А теперь давайте проверим их в действии. Мы увидим, как выглядят и работают базовые приложения, построенные с помощью этих библиотек, а также узнаем, какой расширенный функционал нам доступен.
Bryntum Gantt
Давайте начнем со списка основных возможностей:
- Определение критического пути
- Масштабирование
- Встроенное контекстное меню
- Drag and drop
- Возможность настроить отставание и опережение для тасков
- Фильтрование тасков
- Разные виды зависимостей между тасками (FF/FS/SF/SS)
- Интеграция с популярными серверными технологиями, такими как PHP, JavaScript, ASP.NET, и т.д.
- Экспорт в PDF/PNG, импорт из MS Project
А также многие другие возможности. Выглядит впечатляюще. К сожалению, руководство для новичков не является достаточно детальным. Похоже на то, что оно было разработано скорее для опытных разработчиков, которые уже имеют представление о том, как все работает.
После того, как вы добавите необходимые JavaScript и CSS файлы на страницу, вы должны инициализировать чарт:
Ext.onReady(function(){
var taskStore = Ext.create('Gnt.data.TaskStore', {
autoLoad : true,
proxy : {
type : 'memory',
reader : {
type : 'json'
},
data : [
{
/* define the required tasks here */
}
]
// eof data
}
// eof proxy
});
/* panel definition */
});
В этом коде TaskStore содержит дерево тасков, которое нужно отобразить на экране. После его создания, мы определили, что мы хотим автоматически загрузить некоторые данные в JSON формате. Определение тасков может выглядеть примерно вот так:
"StartDate" : "2017-01-18",
"EndDate" : "2017-02-02",
"Id" : 1,
"Name" : "Planning",
"expanded" : true,
Каждый таск имеет начальную и конечную дату, ID, а также имя. Вы также можете определить будет ли раскрыто подробное описание таска ("expanded" : true). Кроме этого, вы можете создавать вложенные таски.
После этого не забудьте настроить и отобразить на экране панель управления:
var ganttPanel = Ext.create('Gnt.panel.Gantt', {
height : 400,
width : 1000,
viewPreset : 'weekAndDayLetter',
startDate : new Date(2017, 0, 15),
endDate : Sch.util.Date.add(new Date(2017, 0, 15), Sch.util.Date.WEEK, 3),
columns : [
{
xtype : 'treecolumn',
header : 'Tasks',
sortable : false,
dataIndex : 'Name',
width : 200
}
],
taskStore : taskStore
});
ganttPanel.render(Ext.getBody());
Вы должны определить размер панели, вид по-умолчанию, отображаемый временной период, столбцы, которые будут отображены, а также источник данных. В результате вы получите чарт, который выглядит примерно вот так:
Базовое приложение выглядит довольно функциональным, но главный вопрос состоит в том, существует ли более удобный способ создания диаграммы Ганта. Давайте выясним.
DHTMLX Gantt
По сложившейся традиции, давайте начнем с основных возможностей:
- Кросс-браузерные диаграммы Ганта с поддержкой мобильных платформ
- Экспорт/импорт из MS Project
- Подсчет критического пути
- Обратное планирование
- Бэйслайны, дэдлайны и прочие полезные элементы
- Автоматическое планирование
- Простой API для показа/скрытия столбцов
- Динамическая загрузка
- Поддержка пользовательских типов
Мы не упоминали отдельно такие тривиальные возможности, как drag-and-drop или разные типы зависимостей между тасками, поскольку они повторяют аналогичный функционал Bryntum Gantt. Что более интересно, так это, например такие возможности, как автоматическое планирование. Стоит отметить, что не каждая библиотека позволяет вам использовать подобные функции.
Согласно документации, все, что вам нужно сделать, чтобы создать базовое приложение, это добавить необходимые JavaScript и CSS файлы на страницу, создать DIV контейнер, который будет содержать чарт, а затем использовать команду gantt.init() для инициализации чарта:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxGantt</title>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
</script>
</body>
</html>
Вы можете создать несколько тасков и связей между ними, чтобы протестировать работу приложения:
var tasks = {
data:[
{id:1, text:"Project #1",start_date:"01-04-2013", duration:11,
progress: 0.6, open: true},
{ /* more tasks */ }
],
links:[
{id:1, source:1, target:2, type:"1"},
{ /* more links */}
]
};
А затем отобразить их на диаграмме:
gantt.init("gantt_here");
gantt.parse (tasks);
Это все, что от вас требуется для получения следующего результата:
Вы можете добавлять и удалять таски, перемещать их и менять их длительность, определять зависимости между ними, а также определять процент выполнения того или иного таска. Короче говоря, вы можете создать работающее приложение с необходимым набором базовых функций, используя несколько строк кода. Добавление последующих улучшений, таких как возможность работы с базой данных, подсчет критического пути, вне всякого сомнения, потребует определенных усилий. Но подробная страница документации со множеством пошаговых инструкций будет вам хорошим помощником.
Google Gantt Chart
Диаграммы Ганта являются новым пополнением в семействе Google Charts и они становятся все более популярными в последнее время. Впрочем, ничего удивительного. В конце концов, это очередное изобретение от Google. На момент написания этой статьи, этот чарт находился в статусе беты с вероятностью привнесений существенных изменений в будущем. Поэтому, в отличие от прочих инструментов из этой статьи, этот вариант, возможно, не является лучшим выбором для разработки корпоративного приложения.
Диаграмма Ганта от Google помогает отобразить дату начала и конца таска, его продолжительность, а также зависимости между разными тасками. При наведении курсора появляется всплывающая подсказка.
Для создания простого чарта мы должны использовать объект DataTable, который представляет из себя двухмерную таблицу. Именно эту таблицу мы и заполним данными, описывающими имеющиеся таски. С помощью метода addColumn() мы можем определить из каких данных будут состоять наши таски (ID, название, продолжительность, и т.д.), а затем с помощью метода addRows() мы можем добавить так много тасков, как нам нужно.
Вот пример кода:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
/* more columns */
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
<...more rows...>
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
Затем нужно создать новый объект Gantt, относящийся к определенному DIV контейнеру на странице и отобразить в нем наши таски:
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
В результате мы получим вот такой аккуратно выглядящий график:
Полный пример доступен здесь.
Помимо этой базовой функциональности вы также можете отключить отображение зависимостей между тасками, вычислить критический путь, изменить стиль и настроить внешний вид. Практически все, что вам может понадобиться для создания легковесного, аккуратного и приятно выглядящего приложения. Но стоит отметить, что Google Gantt Chart на данный момент уступает в функциональности двум предыдущим примерам.
Заключение
Bryntum Gantt выглядит довольно продвинутым инструментом для создания диаграмм Ганта с обширным набором полезных функций. Исчерпывающая документация, снабженная подробными руководствами и демо, поможет вам понять, чего и каким образом можно достичь с помощью Bryntum Gantt. Но, тем не менее, данный вариант подойдет не каждому. Поскольку это плагин для Ext JS, возможно, это не самый лучший вариант, если вы уже не используете эту библиотеку в качестве одной из основных технологий.
DHTMLX Gantt, в свою очередь, является автономной JavaScript библиотекой без лишних зависимостей. Хотите создать высокопроизводительное и настраиваемое онлайн приложение? Обратите внимание на DHTMLX Gantt. Богатый API и детальная документация со множеством пошаговых руководств будут хорошим подспорьем на первых порах. Продвинутые функции, такие как автоматическое планирование, делают этот вариант еще более привлекательным.
Google Gantt Chart в своем текущем состоянии не может соревноваться с более функциональными альтернативами. Легкие и быстрые приложения с набором основных функций, таких как поиск критического пути, а также детальная документация -- вот основные достоинства этого инструмента. Но, если вы ищете библиотеку, которая может похвастаться большим набором возможностей, возможно, стоит поискать что-то еще.
Перевод. Оригинал статьи находится здесь.
