Как создать диаграмму с областями с помощью CSS?

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

Диаграмма с областями — это графическое представление количественных данных, в котором несколько элементов данных объединены в диаграмму.

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

Шаги для создания диаграммы с областями:

• Чтобы создать диаграмму с областями, мы будем использовать тег <div> и указать имя класса как «area_chart». После этого мы применим CSS, используя этот селектор класса к этому div, чтобы сделать его похожим на плоскость XY. В примере фрагмента кода мы использовали тег <div> с 4 дочерними элементами <div/>.

<div class="area_chart">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

• Каждый div внутри является элементом данных. Мы будем добавлять форму к каждому элементу. Для этого мы можем использовать пользовательские свойства, так как к ним легко получить доступ в CSS. Здесь –top_left — это точка в левом верхнем углу, а —top_right — точка в правом верхнем углу формы элемента.

<div class="area_chart">
 <div style="--top_left: 0.9; --top_right: 0.6;"></div>
 <div style="--top_left: 0.6; --top_right: 0.4;"></div>
 <div style="--top_left: 0.4; --top_right: 0.5;"></div>
 <div style="--top_left: 0.5; --top_right: 0.2;"></div>
</div>

• Теперь мы можем формировать родительский элемент div с помощью класса area_chart , реализуя различные стили в классе. Мы сохраняем ширину: 700 пикселей и высоту: 400 пикселей.

.area_chart {
     width: 700px;
     height:400px;
     display: flex;
}

• Наконец, мы обрежем каждый элемент. Свойство clip-path используется для вырезания определенной части изображения или определенной формы таким образом, чтобы часть фигуры внутри части отображалась, а часть формы вне части не отображалась.

clip-path: polygon(
   0% calc(100% * var(--top_left)),
   100% calc(100% * var(--top_right)),
   100% 100%,
   0% 100%
 );

• Здесь, используя свойство clip-path , с p1 = (0,100% * –top_left), p2 = (0,100% * –top_right), p3 = (100,100), p4= (0,100), где p1,p2,p3,p4 представляют собой 4 точки формы, чтобы придать элементам данных правильную форму.

Это пример элемента данных на графике:

Примечание . Пользовательские переменные –top_left и –top_right важны для получения длины элемента данных на графике. Таким образом, мы можем применять один и тот же стиль с разными размерами для разных элементов данных.

Пример 1: В этом примере описывается базовая реализация упомянутых выше шагов для создания диаграммы с областями.

Выход:

Пример 2. Это более элегантный вид графика выше. Здесь мы используем тег абзаца <p> для представления элементов данных, а также добавляем некоторое пространство между элементами данных, используя justify-content . Добавление 20% ширины и округление элементов данных с радиусом границы, как показано в выходных данных.

Выход: