Диаграмма Ганта — это удобный тип гистограммы, который используется в управлении проектами для демонстрации расписания задач. На этой диаграмме деятельность проекта представлена в виде каскадных горизонтальных полос, ширина которых отображает продолжительность проекта.
Как интерфейсный веб-дизайнер или разработчик, вы можете использовать диаграммы Ганта для управления проектами и повышения производительности в вашей команде.
В этой статье я собираюсь показать вам, как создать простую диаграмму Ганта, используя систему CSS Grid Layout — без внешних библиотек или другого пуха, просто чистый CSS.
Вам также может понравиться:
Редизайн сайта с использованием CSS Grid и Flexbox .
Вы можете обратиться к этому руководству, чтобы понять, как использовать систему макетов для применения правил CSS.
Диаграмма покажет типичный процесс жизненного цикла разработки программного обеспечения, с января по декабрь.
Вот скриншот того, как диаграмма Ганта будет выглядеть в конце этого урока:
Давайте начнем!
Шаг 1: Создайте контейнерный div
Давайте начнем с создания элемента div контейнера для диаграммы Ганта:
HTML
xxxxxxxxxx
1
<div class="container">
2
3
</div>
Давайте добавим немного CSS-стиля к нему:
CSS
xxxxxxxxxx
1
.container {
2
max-width: 1200px;
3
min-width: 650px;
4
margin: 0 auto;
5
padding: 50px;
6
}
Шаг 2: Создайте блок диаграммы
Давайте создадим div внутри всеобъемлющего контейнера и назовем его chart. Это где все остальные действия будут происходить.
HTML
xxxxxxxxxx
1
<div class="chart">
2
3
</div>
Давайте добавим немного CSS-стиля к нему:
CSS
xxxxxxxxxx
1
.chart {
2
display: grid;
3
border: 2px solid #000;
4
position: relative;
5
overflow: hidden;
6
}
Обратите внимание, что я установил для свойства отображения класса значение grid. Следовательно, все его прямые потомки автоматически станут элементами сетки .
Шаг 3: Создайте строки диаграммы
Давайте начнем с создания первой строки, которая будет заголовком диаграммы Ганта.
HTML
x
1
<div class="chart-row chart-period">
2
<div class="chart-row-item">
3
</div><span>January</span><span>February</span>span>March</span>
4
<span>April</span><span>May</span><span>June</span><span>July</span>
5
<span>August</span><span>September</span><span>October</span>
6
<span>November</span><span>December</span>
7
</div>
Обратите внимание, что я предоставил 12 элементов span, которые будут пересекать всю строку, показывая месяцы продолжительности проекта — с января по декабрь.
Вот его CSS:
CSS
xxxxxxxxxx
1
.chart-row {
2
display: grid;
3
grid-template-columns: 50px 1fr;
4
background-color: #DCDCDC;
5
}
CSS
xxxxxxxxxx
1
.chart-period {
2
color: #fff;
3
background-color: #708090 !important;
4
border-bottom: 2px solid #000;
5
grid-template-columns: 50px repeat(12, 1fr);
6
}
8
.chart-period > span {
10
text-align: center;
11
font-size: 13px;
12
align-self: center;
13
font-weight: bold;
14
padding: 15px 0;
15
}
Обратите внимание, что я использовал свойство grid-template-columns для указания ширины и количества столбцов в сетке.
Давайте посмотрим, как это выглядит в браузере, пока:
Далее, давайте добавим линии, которые будут проходить по всей диаграмме в стиле «прямоугольник», который помогает продемонстрировать продолжительность каждого проекта.
Я также использовал 12 элементов span для создания линий.
CSS
xxxxxxxxxx
1
<div class="chart-row chart-lines">
2
<span></span><span></span><span></span>
3
<span></span><span></span><span></span>
4
<span></span><span></span><span></span>
5
<span></span><span></span> <span></span>
6
</div>
Вот его CSS:
CSS
xxxxxxxxxx
1
.chart-lines {
2
position: absolute;
3
height: 100%;
4
width: 100%;
5
background-color: transparent;
6
grid-template-columns: 50px repeat(12, 1fr);}
7
.chart-lines > span {
9
display: block; border-right: 1px solid rgba(0, 0, 0, 0.3);
10
}
Давайте посмотрим вывод в браузере:
Шаг 4: Добавить элементы входа
Наконец, давайте добавим элементы, которые иллюстрируют процесс создания программного обеспечения в течение года.
Например, вот как я добавил первый элемент записи:
CSS
xxxxxxxxxx
1
<div class="chart-row">
2
<div class="chart-row-item">1</div>
3
<ul class="chart-row-bars">
4
<li class="chart-li-one">Planning</li>
5
</ul>
6
</div>
Позвольте мне описать, что происходит в коде выше:
- Во-первых, охватывающий элемент div имеет класс строки графика , который я иллюстрировал ранее.
- DIV с классом штурманского пропашного элемента используется для нумерации пунктов входа на диаграмме Ганта. Вот его CSS:
- Чтобы показать задачи на диаграмме Ганта, я создал неупорядоченный список и стилизовал его для отображения горизонтальной полосы, длина которой отображала продолжительность задачи.
Вот стиль CSS для класса chart-row-bars :
CSS
xxxxxxxxxx
1
.chart-row-bars {
2
list-style: none;
3
display: grid; padding: 15px 0;
4
margin: 0;
5
grid-template-columns: repeat(12, 1fr);
6
grid-gap: 10px 0;
7
border-bottom: 1px solid #000;
8
}
- Элемент ввода определяется в теге li . Вот его стиль CSS:
CSS
xxxxxxxxxx
1
li {
2
font-weight: 450;
3
text-align: left;
4
font-size: 15px; min-height: 15px;
5
background-color: #708090;
6
padding: 5px 15px; color: #fff;
7
overflow: hidden;
8
position: relative;
9
cursor: pointer;
10
border-radius: 15px;
11
}
12
13
ul .chart-li-one {
14
grid-column: 1/2;
15
background-color: #588BAE;
16
}
Обратите внимание, что я использовал свойство grid-column, чтобы указать продолжительность проекта.
Например, свойство grid-column: 3/9; как и запись «Разработка», охватывает задачи по сетке с марта по август.
Вот как выглядит первый элемент записи в браузере:
Я добавил другие записи на графике, следуя тому же процессу, что и первая запись.
В конечном итоге это привело к красивой диаграмме Ганта, как и изображение, которое я показал ранее.
Завершение
Это оно! Вы можете просмотреть весь код для этого урока на CodePen:
Как вы уже видели, создание диаграммы Ганта с использованием CSS Grid несложно. С помощью этого типа диаграмм вы можете эффективно управлять своими проектами веб-разработки и следить за тем, чтобы все были на пути к достижению поставленных целей.
Кроме того, диаграммы Ганта могут также использоваться в других отраслях для управления проектами. Например, если вы продаете компостные туалеты , вы можете использовать диаграммы Ганта, чтобы продемонстрировать количество продаж, совершенных за определенный период времени.
Конечно, я только что рассказал о том, чего можно достичь с помощью диаграмм Ганта.
Есть несколько других настроек, которые вы можете внести в диаграммы Ганта, чтобы удовлетворить ваши конкретные требования и цели проекта.
Например, вы можете использовать их, чтобы показать взаимосвязь между различными задачами и то, как завершение одной задачи зависит от другой, показать, как ресурсы могут быть выделены для успеха проектов, и показать четкие требования проекта, которые гарантируют, что все находятся на одной странице.
У вас есть вопросы или комментарии?
Пожалуйста, свяжитесь, и я сделаю все возможное, чтобы ответить.
Эта статья впервые появилась на freeCodeCamp .