Как создать диаграмму с областями с помощью 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: В этом примере описывается базовая реализация упомянутых выше шагов для создания диаграммы с областями.
HTML
<!DOCTYPE html> < html > < head > < title >Area Chart</ title > < style > .area_chart { width: 700px; height: 400px; display: flex; } .area_chart>* { flex-grow: 1; border: 0.1px solid; background: rgba(118, 255, 30, .75); clip-path: polygon(0% calc(100% * var(--top_left)), 100% calc(100% * var(--top_right)), 100% 100%, 0% 100%); } </ style > </ head > < body > < h1 style = "color:green" >GeekForGeeks</ h1 > < h3 >How to create an Area Chart using CSS ?</ h3 > < 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 > </ body > </ html > |
Выход:
Пример 2. Это более элегантный вид графика выше. Здесь мы используем тег абзаца <p> для представления элементов данных, а также добавляем некоторое пространство между элементами данных, используя justify-content . Добавление 20% ширины и округление элементов данных с радиусом границы, как показано в выходных данных.
HTML
<!DOCTYPE html> < html > < head > < title >Area Chart </ title > < style > .area_chart { width: 700px; height: 400px; border-bottom: 6px solid rgba(118, 255, 30, .75); display: flex; justify-content: space-between; } .area_chart>* { width: 20%; border-radius: 50px; background: rgba(118, 255, 30, .75); clip-path: polygon(0% calc(100% * var(--top_left)), 100% calc(100% * var(--top_right)), 100% 100%, 0% 100%); } p { margin: 0; } </ style > </ head > < body > < h1 style = "color:green" >GeekForGeeks</ h1 > < h3 >How to create an Area Chart using CSS ?</ h3 > < div class = "area_chart" > < p style = "--top_left: 0.9; --top_right: 0.6;" ></ p > < p style = "--top_left: 0.6; --top_right: 0.4;" ></ p > < p style = "--top_left: 0.4; --top_right: 0.5;" ></ p > < p style = "--top_left: 0.5; --top_right: 0.2;" ></ p > </ div > </ body > </ html > |
Выход:
