Используйте библиотеку JavaScript, чтобы создать диаграмму Ганта и вывести свои усилия по управлению проектами на новый уровень.

Ранее в этом году моя команда искала инструмент управления проектами, который помог бы нам составить график различных задач, связанных с нашим проектом разработки приложений, с определенными временными рамками. Проведя небольшое исследование, мы наконец остановились на диаграммах Ганта.

Однако некоторые люди думают, что Гантта сложно создать.

Не правда!

Благодаря многочисленным библиотекам диаграмм JavaScript визуализация данных стала простой, гибкой и встраиваемой.

В нашей ситуации мы остановились на библиотеке AnyChart JS Charts из-за ее простоты использования, обширной документации, гибкой площадки для тестирования кода и других мощных функций.

В этом руководстве я расскажу, как создать простую интерактивную диаграмму Ганта с помощью этой библиотеки визуализации данных.

Вот что мы будем делать, и вы можете получить полный код для создания такой диаграммы Ганта в конце руководства:

Создание диаграммы Ганта на языке JS за 4 шага

Давайте запачкаем руки и воспользуемся библиотекой JavaScript, чтобы создать простую диаграмму Ганта для планирования и мониторинга деятельности по проекту.

В этом руководстве по построению диаграмм на JS мы выполним следующие четыре шага:

  • Шаг 1. Подготовка данных
  • Шаг 2. Получение зависимостей
  • Шаг 3. Объявление контейнера диаграммы
  • Шаг 4. Визуализация диаграммы Ганта.

Шаг 1. Подготовка данных

Первым шагом в построении диаграммы Ганта с использованием JavaScript является подготовка данных, которые будут отображаться. Библиотека AnyChart требует, чтобы данные были представлены с использованием древовидной модели данных.

В этой модели данные организованы в виде иерархической древовидной структуры, в которой отношения родитель-потомок используются для соединения различных элементов данных.

Таким образом, родительский элемент данных будет иметь поле данных дочерние, в котором дочерние элементы указаны в виде массива.

Позвольте мне показать вам пример того, о чем я говорю:

var data = [{
	id: "1",
	name: "Development Life Cycle",
	actualStart: Date.UTC(2018, 01, 02),
	actualEnd: Date.UTC(2018, 06, 15),
	children: [{
			id: "1_1",
			name: "Planning",
			actualStart: Date.UTC(2018, 01, 02),
			actualEnd: Date.UTC(2018, 01, 22),
			connectTo: "1_2",
			connectorType: "finish-start",
			progressValue: "75%"
		},
		// more data goes here
	]
}];

Шаг 2. Получение зависимостей

AnyChart использует минималистский модульный подход, который позволяет вам получить только те зависимости, которые необходимы для вашего проекта, что значительно уменьшает размер развернутого кода, что приводит к повышению производительности.

Для создания диаграммы Ганта мы добавим следующие модули Core и Gantt в раздел ‹head› нашей веб-страницы.

<head>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"> </script> 
<script src ="https://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>

Шаг 3. Объявление контейнера диаграммы

Затем давайте создадим контейнер, в который будет загружаться диаграмма Ганта.

<body>
<div id="container"></div>
<body>

Обратите внимание, что я дал ссылку на элемент ‹div› и id «контейнера» на следующем шаге.

Шаг 4. Визуализация диаграммы Ганта

Наконец, мы выполним следующие шаги, чтобы отобразить диаграмму Ганта:

  • Создайте дерево данных, передав подготовленные данные в метод anychart.data.tree (). Для второго параметра мы укажем его как «as-tree».
var treeData = anychart.data.tree(data, "as-tree");
  • Создайте диаграмму Ганта проекта, вызвав конструктор диаграммы anychart.ganttProject ():
var chart = anychart.ganttProject();
  • Задайте данные, передав созданное дерево данных методу диаграммы data ():
chart.data(treeData);
  • Настройте масштаб временной шкалы до даты завершения проекта:
chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
  • Ссылка на контейнер диаграммы id, который мы установили ранее:
chart.container("container");
  • Начните рисование диаграммы:
chart.draw();
  • Поместите указанные действия в ширину шкалы времени:
chart.fitAll();

Вот весь код, который я использовал для создания диаграммы Ганта на картинке выше:

(Вы также можете просмотреть код в этом репозитории CodePen).

<html>
<head>
<script src="https://cdn.anychart.com/releases/8.6.0/js/anychart-core.min.js"> </script> 
<script src ="https://cdn.anychart.com/releases/8.6.0/js/anychart-gantt.min.js"></script>
</head>
<body>
<div id = "container" > </div>
<script>
anychart.onDocumentReady(function () {
	// create data
	var data = [{
		id: "1",
		name: "Development Life Cycle",
		actualStart: Date.UTC(2018, 01, 02),
		actualEnd: Date.UTC(2018, 06, 15),
		children: [{
				id: "1_1",
				name: "Planning",
				actualStart: Date.UTC(2018, 01, 02),
				actualEnd: Date.UTC(2018, 01, 22),
				connectTo: "1_2",
				connectorType: "finish-start",
				progressValue: "75%"
			},
			{
				id: "1_2",
				name: "Design and Prototyping",
				actualStart: Date.UTC(2018, 01, 23),
				actualEnd: Date.UTC(2018, 02, 20),
				connectTo: "1_3",
				connectorType: "start-start",
				progressValue: "60%"
			},
			{
				id: "1_3",
				name: "Evaluation Meeting",
				actualStart: Date.UTC(2018, 02, 23),
				actualEnd: Date.UTC(2018, 02, 23),
				connectTo: "1_4",
				connectorType: "start-start",
				progressValue: "80%"
			},
			{
				id: "1_4",
				name: "Application Development",
				actualStart: Date.UTC(2018, 02, 26),
				actualEnd: Date.UTC(2018, 04, 26),
				connectTo: "1_5",
				connectorType: "finish-finish",
				progressValue: "90%"
			},
			{
				id: "1_5",
				name: "Testing",
				actualStart: Date.UTC(2018, 04, 29),
				actualEnd: Date.UTC(2018, 05, 15),
				connectTo: "1_6",
				connectorType: "start-finish",
				progressValue: "60%"
			},
			{
				id: "1_6",
				name: "Deployment",
				actualStart: Date.UTC(2018, 05, 20),
				actualEnd: Date.UTC(2018, 05, 27),
				connectTo: "1_7",
				connectorType: "start-finish",
				progressValue: "100%"
			},
			{
				id: "1_7",
				name: "Maintenance",
				actualStart: Date.UTC(2018, 05, 30),
				actualEnd: Date.UTC(2018, 06, 11),
				progressValue: "40%"
			},

		]
	}];
	// create a data tree
	var treeData = anychart.data.tree(data, "as-tree");

	// create a chart
	var chart = anychart.ganttProject();

	// set the data
	chart.data(treeData);
	// configure the scale
	chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));
	// set the container id
	chart.container("container");
	// initiate drawing the chart
	chart.draw();
	// fit elements to the width of the timeline
	chart.fitAll();
});
</script>
</body>
</html>

Настройка дизайна диаграммы Ганта

AnyChart предоставляет широкий спектр возможностей для настройки дизайна визуализации данных в соответствии с вашими индивидуальными предпочтениями и потребностями. В полях данных вы можете установить различные атрибуты, чтобы настроить внешний вид вашей диаграммы Ганта.

Например, вот некоторые поля данных, которые я указал в приведенном выше примере диаграммы Ганта:

  • id - задает уникальный идентификатор каждой задачи;
  • name - задает название каждой задачи;
  • actualStart - устанавливает дату начала каждой задачи;
  • actualEnd - устанавливает дату окончания каждой задачи;
  • connectTo - тип коннектора, который ставит целевую задачу;
  • connectorType - задает тип соединителя, который может быть «старт-старт», «старт-финиш», «финиш-старт» или «финиш-финиш»;
  • progressValue - устанавливает значение прогресса каждой задачи в процентах.

Кроме того, AnyChart позволяет выполнять следующие типы задач, которые можно визуализировать по-разному:

  • обычные задачи - не связаны с другими задачами;
  • родительские задачи - имеют родительско-дочерние отношения с другими задачами;
  • вехи - визуализируйте события с нулевой продолжительностью. Их можно указать, установив одинаковую дату в полях actualStart и actualEnd.

Загрузка данных в виде таблицы

Если вы хотите создать диаграмму, загрузив данные из реляционной базы данных, вы можете организовать данные в виде таблицы с родительскими / дочерними связями.

В этом случае в поле parent каждого элемента должно быть указано значение id его родительского элемента. Кроме того, вы должны установить для родительского элемента корневого элемента значение null или просто не указывать его.

Вот о чем я говорю:

(Вы также можете просмотреть код в этом репозитории CodePen).

var data = [{
		id: 1,
		parent: null,
		name: "Root",
		actualStart: Date.UTC(2018, 01, 02),
		actualEnd: Date.UTC(2018, 06, 15),
	},
	{
		id: 2,
		parent: 1,
		name: "Parent 1",
		actualStart: Date.UTC(2018, 01, 02),
		actualEnd: Date.UTC(2018, 01, 22),
		progressValue: "90%"
	},
	{
		id: 3,
		parent: 2,
		name: "Child 1–1",
		actualStart: Date.UTC(2018, 01, 23),
		actualEnd: Date.UTC(2018, 02, 20),
		progressValue: "75%"
	},
	{
		id: 4,
		parent: 2,
		name: "Child 1–2",
		actualStart: Date.UTC(2018, 02, 23),
		actualEnd: Date.UTC(2018, 02, 23),
		progressValue: "60%"
	},
	{
		id: 5,
		parent: 1,
		name: "Parent 2",
		actualStart: Date.UTC(2018, 02, 26),
		actualEnd: Date.UTC(2018, 04, 26),
		progressValue: "80%"
	},
	{
		id: 7,
		parent: 6,
		name: "Child 2–1",
		actualStart: Date.UTC(2018, 04, 29),
		actualEnd: Date.UTC(2018, 05, 15),
		progressValue: "30%"
	},
];

Кроме того, когда вы загружаете данные в виде таблицы, не забудьте изменить второй параметр в методе anychart.data.tree () с «as-tree» на «as-table», чтобы вся строка выглядит следующим образом:

var treeData = anychart.data.tree(data, "as-table");

Вот скриншот диаграммы Ганта, созданной при загрузке данных в виде таблицы:

Заключение

Вот и все!

Как видите, создать диаграмму Ганта с помощью библиотеки диаграмм AnyChart JavaScript просто и понятно.

В этом руководстве я лишь поверхностно рассказал о том, чего можно достичь с помощью диаграмм Ганта. Надеюсь, вы узнали об удивительных возможностях этого типа диаграмм и о том, как они могут помочь вам в управлении задачами веб-разработки.

Конечно, вы можете взглянуть на простую в использовании документацию по диаграммам Ганта AnyChart, чтобы узнать больше о способах настройки диаграммы Ганта в соответствии с вашими требованиями к дизайну и помочь вам в отслеживании действий по управлению проектами.

Всего наилучшего.