HTML: Гистограмма

Обновлено: 29 апр., 23:20
726
Студентов
63%
Завершения

Гистограмма — распространённый способ визуальной подачи информации. Это может использоваться в администраторских панелях или отчётах. В этом испытании вы создадите собственный вариант гистограммы.

Гистограмма представляет собой таблицу с точки зрения вёрстки. Это важный момент — если стили не загрузятся, то вся информация будет выведена в виде таблицы, а значит её можно будет прочитать. Такое поведение будет почти невозможно при использовании других структур.

Гистограмма на HTML и CSS

Заголовок гистограммы

В качестве заголовка гистограммы используется шапка таблицы. Внутри неё расположите три табличных заголовка с названием жанров литературы:

  • Классическая
  • Фантастика
  • Романы

Структура шапки:

<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-контейнерами

Без стилей гистограмма выглядит так:

Гистограмма без стилей

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Отзывы

Аватар пользователя Maxim Dzyubak
Maxim Dzyubak 23 января 2023

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

Тяжело в учении — легко в бою. Благодарю hexlet, в частности Никиту.