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

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

Линейная диаграмма — это диаграмма, которая используется для отображения данных в виде точек, соединенных прямыми линиями. Обычно он используется для отображения тех данных, которые время от времени непрерывно изменяются.

Шаги по созданию линейной диаграммы: здесь мы увидим шаги по созданию линейной диаграммы, применив немного математических знаний. Есть несколько точек, которые будут нанесены на оси координат, оси X и оси Y. Итак, предположим, что у нас есть 5 точек, т.е. (40,80), (80,120), (120,80), (160,120), (200,80) и возьмем по оси x и по оси y 250 единиц. Теперь мы нанесем эти точки на плоскость XY, используя следующие шаги:

Шаг 1: Создайте плоскость XY: мы будем использовать тег div и поместим селектор идентификатора с именем «диаграмма». После этого мы применим CSS, используя этот сектор идентификатора в этом div, чтобы сделать его похожим на плоскость XY.

<div id="chart"></div>

CSS :

#chart {
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    margin-left:500px;
    margin-top: 100px;
    padding: 0;
    height: 250px;
    width:250px;
    position: relative;
  }

При реализации вышеуказанного стиля мы увидим следующий вывод:

Шаг 2: Отметьте, какая ось является осью X, а какая осью Y:

Мы будем использовать два тега <p> внутри этого div, содержащего оси x и y, и после этого расположим его соответствующим образом с помощью CSS.

<div id="chart">
    <p id="x1">x-axis</p>
    <p id="y1">y-axis</p>
</div>

CSS :

#x1, #y1 {
    position: absolute;
    font-size: larger;
    }
#x1 {
    bottom: -50px;
    left: 100px;
}
#y1{
    left: -60px;
    bottom: 110px;
    }

Здесь, в CSS, мы сделали позицию абсолютной, чтобы ее можно было позиционировать относительно своего родителя, а затем использовать для этого значения слева и снизу.

Шаг 3: Создайте точки и отрезки, соединяющие эти точки:

Мы сделаем 4 набора точек и отрезков. В этих наборах отрезок линии будет начинаться с точки, присутствующей в этом наборе, и идти к ближайшей точке. Мы также сделаем точку, которая будет нашей 5-й точкой. Эта точка не будет находиться ни в одном наборе с отрезками, потому что нам нужно всего 4 линии. Таким образом, из этой 5-й точки не будет исходить линий. Только одна линия придет и соединится с этой точкой. После этого наша задача — расположить эти точки и выровнять их в соответствии с заданными координатами.

Теперь мы создадим 5 <div> внутри основного <div>, который представлял оси координат. Затем из этих 5 div мы возьмем 4 div и сделаем два div внутри каждого из них. Где 1-й div будет представлять точку, а другой — линию. В 5-м div мы создадим только один div, который будет представлять 5-ю точку. Здесь мы не создавали div для строки, потому что нам нужно всего 4 строки. Нет необходимости в 5-й линии.

Теперь воспользуемся математикой, взяв две ближайшие точки: (40,80) и (80,120). Таким образом, длина линии между этими двумя точками будет гипотенузой прямоугольного треугольника, образованной разницей между их координатами x и y. См. ниже рис. 1. Теперь для наклона воспользуемся следующей тригонометрической формулой:

 tan(angle) = Perpendicular / Base

Итак, мы рассчитаем длину линии и ее наклон для каждого другого отрезка линии. Мы будем использовать эту информацию при стилизации каждого сегмента линии. Вот как будет выглядеть наш обобщенный HTML-код:

<div id="chart">
    <p id="x1">x-axis</p>
    <p id="y1">y-axis</p>
    <div>
        <div id="point..."></div>
        <div id="line..."></div>
    </div>
    ...
</div>

Шаг 4: Применение свойств CSS к этим точкам и линиям:

Теперь нам нужно использовать CSS, чтобы сделать эти точки и линии видимыми. В приведенном выше HTML-коде мы видим, что мы дали «id» каждому элементу div, представляющему линию и точку. Мы будем использовать эти селекторы идентификаторов для стилизации линий и точек. Давайте посмотрим CSS для одной точки и аналогично будет сделано для других точек:

 #point1 {
    background-color: violet;
    border-radius: 50%;
    bottom: 76px;
    left: 36px;
    position: absolute;
    height: 12px;
    width: 12px;
    z-index: 1;
  }

Теперь давайте посмотрим CSS для одной строки, и аналогично будет сделано для других строк:

#line1 {
    background-color: black;
    bottom: 80px ;
    height: 3px;
    left: 40px;
    position: absolute;
    transform: rotate(-45deg);
    transform-origin: left bottom;
    width: 56.57px;
  }

Примечание: Вы должны отметить, что rotate() по умолчанию будет вращать линию по часовой стрелке, если угол передан без какого-либо знака. Если вы пройдете угол со знаком -ve , то он будет вращаться против часовой стрелки. Например, если мы пройдем 45 градусов, то он повернется на 45 градусов по часовой стрелке, а если мы пройдем -45 градусов, то он пройдет 45 градусов против часовой стрелки.

Пример : В этом примере описывается создание линейного графика с помощью HTML и CSS.

Выход: