Круговая диаграмма с помощью 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. Данные сведены в следующую таблицу:
Континент | Цвет | Население |
Азия | красный | 59.22% |
Африка | оранжевый | 17.89% |
Европа | желтый | 9.33% |
Южная Америка | зеленый | 8.28% |
Северная Америка | синий | 4.73% |
Австралия | черный | 0.56% |
Антарктида | коричневый | 0.00% |
Чтобы применить эти значения к нашей круговой диаграмме, нам нужно разделить ее на 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
Выводим число, например, подсчет голосов, или рассчет процентов после выполнения какого-либо действия. Можно выводить все…
Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана. Но современная проблема…
Простая задача — если слайд всего один, то не отображать slick dots, чтобы слайдер выглядел…
Раздел EFI -обязательный для GPT разметки на системах с UEFI. Стандартный размер раздела EFI равен…