DevGang
Авторизоваться

Как создать простую диаграмму Ганта с помощью CSS Grid

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

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

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

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

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

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

Вот скриншот того, как диаграмма Ганта будет выглядеть в конце этого урока:

Давайте начнем!

Шаг 1: Создайте контейнерный div

Давайте начнем с создания элемента div контейнера для диаграммы Ганта:

Давайте добавим немного CSS-стилей к нему:

.container {
	max-width: 1200px;
	min-width: 650px;
	margin: 0 auto;
	padding: 50px;
}

Шаг 2: Создайте блок диаграммы

Давайте создадим div внутри нашего контейнера и назовем его chart. Это то место где будут происходить все остальные действия.

Давайте добавим немного CSS-стилей к нему:

.chart {
	display: grid;
	border: 2px solid #000;
	position: relative;
	overflow: hidden;
}

Обратите внимание, что я установил для свойства отображения класса значение grid. Следовательно, все его прямые потомки автоматически станут элементами сетки.

Шаг 3: Создайте строки диаграммы

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

JanuaryFebruaryMarch AprilMayJuneJuly AugustSeptemberOctober NovemberDecember

Обратите внимание, что я предоставил 12 элементов span, которые будут пересекать всю строку, показывая месяцы продолжительности проекта - с января по декабрь.

Вот его CSS:

.chart-row {
	display: grid;
	grid-template-columns: 50px 1fr;
	background-color: #DCDCDC;
}

.chart-period { 
	color:  #fff;
	background-color:  #708090 !important;
	border-bottom: 2px solid #000;
	grid-template-columns: 50px repeat(12, 1fr);
}

.chart-period > span {
	text-align: center;
	font-size: 13px;
	align-self: center;
	font-weight: bold;
	padding: 15px 0;
}

Обратите внимание, что я использовал  свойство grid-template-columns  для указания ширины и количества столбцов в сетке.

Давайте посмотрим, как это выглядит в браузере:

Далее, давайте добавим линии, которые будут проходить по всей диаграмме в стиле «прямоугольник», который помогает продемонстрировать продолжительность каждого проекта. 

Я также использовал 12 элементов span для создания линий.

Вот его CSS:

.chart-lines { 
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: transparent;
	grid-template-columns: 50px repeat(12, 1fr);
}

.chart-lines > span {  
	display: block;
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

Давайте посмотрим вывод в браузере:

Шаг 4: Добавить элементы процессов

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

Например, вот как я добавил первый элемент:

1
  • Planning

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

Вот стиль CSS для класса chart-row-bars:

.chart-row-bars {
	list-style: none;
	display: grid;
	padding: 15px 0;
	margin: 0;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 10px 0;
	border-bottom: 1px solid #000;
}

Элемент ввода определяется в теге li. Вот его стиль CSS:

li {  
	font-weight: 450;
	text-align: left;
	font-size: 15px;
	min-height: 15px;
	background-color: #708090;
	padding: 5px 15px;
	color: #fff;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	border-radius: 15px;
}

ul .chart-li-one {
	grid-column: 1/2;
	background-color: #588BAE;
}

Обратите внимание, что я использовал свойство grid-column, чтобы указать продолжительность проекта. 

Например, свойство  grid-column: 3/9; как и запись «Разработка», охватывает задачи по сетке с марта по август.

Вот как выглядит первый элемент записи в браузере:

Я добавил другие записи на графике, следуя тому же процессу, что и первая запись.

В конечном итоге это привело к красивой диаграмме Ганта, как и изображение, которое я показал ранее. 

В завершение

Вы можете просмотреть весь код для этого урока на CodePen:

Как вы уже видели, создание диаграммы Ганта с использованием CSS Grid несложно. С помощью этого типа диаграмм вы можете эффективно управлять своими проектами веб-разработки и следить за тем, чтобы все были на пути к достижению поставленных целей.

Источник:

#CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Напиши статью и выиграй годовую подписку на Яндекс плюс или лицензию от Jet Brains

Участвовать