Гистограмма — распространённый способ визуальной подачи информации. Это может использоваться в администраторских панелях или отчётах. В этом испытании вы создадите собственный вариант гистограммы.
Гистограмма представляет собой таблицу с точки зрения вёрстки. Это важный момент — если стили не загрузятся, то вся информация будет выведена в виде таблицы, а значит её можно будет прочитать. Такое поведение будет почти невозможно при использовании других структур.
Заголовок гистограммы
В качестве заголовка гистограммы используется шапка таблицы. Внутри неё расположите три табличных заголовка с названием жанров литературы:
- Классическая
- Фантастика
- Романы
Структура шапки:
<thead class="histogram-header">
<tr>
<th>Жанры:</th>
<th class="px-20 histogram-header-[color]">[genre]</th>
</tr>
</thead>
Где [color]
— цвет жанра, а [genre]
— название. Класс .px-20
уже доступен в файле app.css, поэтому его описывать отдельно не нужно.
В испытании используется три основных цвета гистограммы:
- Красный
- Синий
- Зелёный
Каждый из цветов уже есть в файле app.css в виде переменной. Используйте их для создания гибкой структуры цветовой схемы.
.histogram-red {
background-color: var(--red);
}
Слева от каждого жанра нарисуйте квадрат со стороной 10 пикселей. Разместите его на 5 пикселей правее от левого края названия. Это нужно для создания правильного расположения относительно внутреннего отступа <th>
. Для отцентровки квадрата по вертикали можете использовать следующий шаблон:
top: 50%;
transform: translateY(-50%);
Заголовки расположите по центру всей гистограммы. Обратите внимание, что всё испытание строится на Flex. Пусть наличие табличной вёрстки не вводит в заблуждение. Как и было описано, это делается для доступности.
Столбцы
- Отступ от tbody: 50px сверху
Столбцы реализуются по следующему шаблону:
<tr class="histogram-row">
<td class="histogram-name">[year]</td>
<td class="histogram-col">
<span [value] class="w-50px histogram-[color]"></span>
<p>[value description]</p>
</td>
</tr>
где:
[year]
— год[value]
— data-атрибут со значением высоты столбца[color]
— цвет столбца[value description]
— текстовое описание столбца
Каждая строка .histogram-row
содержит все значения, которые относятся к текущему году.
Используя Flex расположите элементы контейнера .histogram-row
в соответствии с шаблоном, учитывая следующие моменты:
- Минимальная высота строки: 400 пикселей.
- Внутренние отступы по горизонтали: по 50 пикселей.
Год, указывающий период продаж книг использует абсолютное позиционирование. Элемент располагается на 5 пикселей выше максимального столбца. Для получения нужного значения обратите внимание на внутренние отступы колонок .histogram-col
Расположите элементы внутри контейнера .histogram-col
в соответствии с шаблоном, учитывая следующие моменты:
- Внутренние отступы контейнера: по 10 пикселей с каждой стороны.
- Для определения высоты столбца используйте проценты. В HTML используйте data-атрибут, в котором будете хранить значение и, используя селектор по атрибуту, устанавливать необходимую высоту. Эти значения равны числу проданных книг без учёта тысяч. Например, 40k = 40% высоты.
Данные гистограммы
2018 год
- Классическая: 40k
- Фантастика: 80k
- Романы: 75k
2019 год
- Классическая: 35k
- Фантастика: 63k
- Романы: 50k
2020 год
- Классическая: 90k
- Фантастика: 77k
- Романы: 80k
Подсказки
- Вам потребуется работа с относительным и абсолютным позиционированием
- Для удобства используйте селектор по атрибуту там, где это необходимо
- Не все элементы являются Flex-контейнерами. Блоки
container
,histogram
не являются Flex-контейнерами
Без стилей гистограмма выглядит так:
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Отзывы

2 дня бился с этим испытанием. В итоге решил. Но с помощью Pixel Perfect. Достал актуальный скриншот, наложил его на верстку и подгонял по пикселям. Знал, что не верно, но хотел добить. Решение учителя очень простое. У меня свойства не применялись justify-content
к всему tbody,
подозреваю что из-за того что уже не верные к этому тегу приписывал или класс надо было добавить. Через время надо вернуться к нему и переделать. Испытание очень прокачало. Стало открытием то, что можно в html задать data-value
, а в css его достать, это очень круто.
Тяжело в учении — легко в бою. Благодарю hexlet, в частности Никиту.