Круговая диаграмма с помощью HTML и CSS (Pie Chart with HTML and CSS)

Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient.

Во-первых, мы добавляем <div> элемент на нашу HTML-страницу, который выступает в качестве контейнера для нашей круговой диаграммы.

<div id="my-pie-chart"></div>

Нам нужно указать ширину и высоту для <div> элемента, который определяет размер нашей круговой диаграммы:

#my-pie-chart {
    height: 100px;
    width: 100px;
}

Затем нам нужно сделать нашу круговую диаграмму круглой, установив border-radius значение 50%:

#my-pie-chart {
  border-radius: 50%;
}

И, наконец, мы готовы заполнить круговую диаграмму нашими данными.

В качестве примера рассмотрим данные о населении мира по континентам. Мы хотим показать распределение населения по континентам с помощью нашей круговой диаграммы.

Для каждого континента связываем произвольный цвет и процент населения, взятый из Википедии с данными на 1 июля 2022. Данные сведены в следующую таблицу:

Чтобы применить эти значения к нашей круговой диаграмме, нам нужно разделить ее на 7 секторов, по сектору для каждого континента. Для создания секторов мы можем использовать conic-gradient функцию CSS. Каждый сектор имеет цвет, начальную позицию и конечную позицию.

Например, Антарктида представлена ​​коричневым цветом и имеет 0,00% населения мира. Поэтому нам нужен коричневый сектор от 0,00% до 0,00%.
Затем мы хотим построить черный сектор, представляющий Австралию, в которой проживает 0,56% населения мира. Это приводит к увеличению черного сектора с 0,00% до 0,56%.
Точно так же, чтобы представить Северную Америку, нам нужен синий сектор, изменяющийся от 0,56% до 5,29% (= 0,56% + 4,73%).
И так далее.

В конце у нас будет следующее свойство фона CSS:

#my-pie-chart {
  background: conic-gradient(brown 0.00%, black 0.00% 0.56%, blue 0.56% 5.29%, green 5.29% 13.57%, yellow 13.57% 22.90%, orange 22.90% 40.79%, red 40.79%);
}

Рабочий пример круговой диаграммы с помощью HTML и CSS

0

Источник – https://dev.to/cscarpitta/build-a-simple-pie-chart-with-html-and-css-32dn