Круговая диаграмма html css javascript

Круговая диаграмма SVG

Наводя мышкой на секторы, по центру появляется значение.

  25% 3% 10% 40% 22%  

Круговая диаграмма с легендой

Наводя мышкой на секторы или значения легенды, по центру появляется значение сектора.

 .pie < --pie-color-1: hsl(0, 100%, 70%); /* цвет сектора */ --pie-color-2: hsl(60, 100%, 70%); --pie-color-3: hsl(150, 100%, 70%); --pie-color-4: hsl(210, 100%, 70%); --pie-color-5: hsl(270, 100%, 70%); display: grid; grid-template-columns: 12em 10em; /* 12em — размер диаграммы, 10em — размер легенды */ gap: 0 3em; /* 3em - 2em (margin-left) = 1em — расстояние от диаграммы до легенды */ overflow: auto; > .pie div < grid-column: 2 / 3; align-self: center; >.pie svg < grid-column: 1 / 2; grid-row: 1 / 6; >.pie div::before < content: ""; width: 1.5em; height: 1.5em; display: inline-block; margin-left: -2em; /* 1.5em (width) + .5em (margin-right) = 2em */ margin-right: .5em; vertical-align: middle; > .pie div:nth-of-type(1):before < background: var(--pie-color-1); >.pie div:nth-of-type(2):before < background: var(--pie-color-2); >.pie div:nth-of-type(3):before < background: var(--pie-color-3); >.pie div:nth-of-type(4):before < background: var(--pie-color-4); >.pie div:nth-of-type(5):before < background: var(--pie-color-5); >.pie text < text-anchor: middle; dominant-baseline: central; font-size: 5px; visibility: hidden; >.pie circle < fill: none; stroke-width: 8; cursor: pointer; transition: all 1.5s; >.pie circle:nth-of-type(1) < stroke: var(--pie-color-1); stroke-dasharray: 25 100; > .pie circle:nth-of-type(2) < stroke: var(--pie-color-2); stroke-dasharray: 0 25 3 100; > .pie circle:nth-of-type(3) < stroke: var(--pie-color-3); stroke-dasharray: 0 28 10 100; > .pie circle:nth-of-type(4) < stroke: var(--pie-color-4); stroke-dasharray: 0 38 40 100; > .pie circle:nth-of-type(5) < stroke: var(--pie-color-5); stroke-dasharray: 0 78 100; > .pie div:nth-of-type(1):hover ~ svg circle:not(:nth-of-type(1)), .pie div:nth-of-type(2):hover ~ svg circle:not(:nth-of-type(2)), .pie div:nth-of-type(3):hover ~ svg circle:not(:nth-of-type(3)), .pie div:nth-of-type(4):hover ~ svg circle:not(:nth-of-type(4)), .pie div:nth-of-type(5):hover ~ svg circle:not(:nth-of-type(5)), .pie g:hover circle:not(:hover) < opacity: .3; >.pie div:nth-of-type(1):hover ~ svg text:nth-of-type(1), .pie div:nth-of-type(2):hover ~ svg text:nth-of-type(2), .pie div:nth-of-type(3):hover ~ svg text:nth-of-type(3), .pie div:nth-of-type(4):hover ~ svg text:nth-of-type(4), .pie div:nth-of-type(5):hover ~ svg text:nth-of-type(5), .pie circle:nth-of-type(1):hover ~ text:nth-of-type(1), .pie circle:nth-of-type(2):hover ~ text:nth-of-type(2), .pie circle:nth-of-type(3):hover ~ text:nth-of-type(3), .pie circle:nth-of-type(4):hover ~ text:nth-of-type(4), .pie circle:nth-of-type(5):hover ~ text:nth-of-type(5) 
Январь
 
Февраль
 
Март
 
Апрель
 
Май
 25% 3% 10% 40% 22%   

Источник

Круговая диаграмма на чистом CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

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

О создании таких компонентов вы найдете множество статей. Но диаграммы в них обычно делаются либо на основе SVG, либо с применением большого числа HTML-элементов.

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

Ниже, в CodePen, можно посмотреть, что мы будем создавать:

See the Pen CSS only pie chart by Temani Afif (@t_afif) on CodePen.

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

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

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

Структура HTML для круговой диаграммы

Как я упоминал выше, у нас есть один , куда мы добавляем процентное значение (прогресс круговой диаграммы) в качестве основного содержимого:

Мы также добавляем CSS-переменные в качестве встроенных стилей.

• —p : Эта переменная должна содержать процентное значение в виде числа (без знака %). Значение должно быть таким же, как в содержимом .
• —b : Эта переменная определяет толщину границы.
• —c : Эта переменная определяет основной цвет.

Для целей этой статьи, чтобы код был покороче, я использую однобуквенные переменные. В продакшен-среде, конечно, нужно использовать более осмысленные имена. Например, —percentage , —border-thickness и —main-color .

CSS для круговой диаграммы

Начнем со стилизации содержимого. Здесь все просто, код у нас будет следующий:

(Прим. перев.: «pie» в коде — от англ. «Pie Chart» — «круговая диаграмма»).

Я определяю наш элемент как inline-grid , чтобы легко разместить содержимое в середине при помощи place-content: center . Чтобы наш элемент всегда оставался квадратным, мы используем aspect-ratio: 1 . Также можно использовать height: var(—w) , но всегда полезно изучать и применять новые CSS-свойства.

Возможно, вам любопытно, почему для определения ширины я использую переменную, а не просто прописываю width: 150px . В будущем мне понадобится это значение, поэтому я определяю его при помощи переменной.

Весь остальной CSS-код довольно простой и касается стилизации текста. Можете его изменить по своему вкусу.

Переходим к более интересной части — основной форме нашего компонента. Для этого мы используем псевдоэлемент со следующими стилями:

Псевдоэлемент, имеющий position: absolute , покрывает всю площадь благодаря inset: 0 . Да, еще одно новое CSS-свойство. Это сокращенный вариант для top , right , bottom и left (почитать подробнее можно на MDN Web Docs).

Затем мы превращаем наш псевдоэлемент в круг ( border-radius: 50% ) и применяем conic-gradient() . Обратите внимание на использование CSS-переменных, которые мы определили в качестве встроенных стилей ( —c для цвета и —p для процентного значения).

Пока что мы получаем вот такой результат:

Мы подбираемся к желаемой цели! conic-gradient() дает нам двуцветный градиент. Основной цвет — от 0% до p%, а остальная часть имеет прозрачный цвет (со значением #0000).

Чтобы оставить только границу, мы прячем середину круга при помощи mask . На этот раз мы используем radial-gradient() :

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

В качестве фона это дает нам следующий результат:

Обратите внимание на использование переменной —b , которая определяет толщину границы (на рисунке показано синим цветом).

Теперь представьте, что синяя часть остается, а красная становится невидимой. Это мы и получаем, применяя тот же градиент со свойством mask :

И вот, мы построили нашу круговую диаграмму на одном элементе и нескольких строках CSS-кода.

Как добавить скругление краев

Я добавлю дополнительный градиентный слой для первого (верхнего) конца и псевдоэлемент для второго. Вот иллюстрация этого приема:

Код для скругления верхнего конца:

Помимо conic-gradient() , сверху мы добавляем radial-gradient() . Размер равен толщине границы (определяется при помощи —b ).

Код для скругления второго конца:

Свойство inset устанавливает размер псевдоэлемента равным —b . Помните, что это сокращенный вариант записи для top , right , bottom и left .

это значит, что с каждой стороны мы сдвигаемся к центру, за минусом отступа в b/2 . Таким образом у нас получается ширина, равная 2*b/2 = b . Та же логика применяется к высоте.

Теперь нам нужно правильно разместить наш элемент. Для этого мы используем свойство transform . Изначально элемент расположен по центру, так что нам нужно его повернуть. Имея процентное значение, мы применяем тройное правило, чтобы получить угол:

angle = percentage*360deg/100

Затем мы выполняем смещение. Здесь нам понадобится ширина, потому что смещение мы делаем на половину ширины ( w/2 ).

Ладно, ладно, возможно, вы уже потерялись во всех этих формулах. Представленная ниже иллюстрация поможет вам понять логику, стоящую за свойством transform .

После этого мы раскрашиваем псевдоэлемент основным цветом — и все готово. Мы получили круговую диаграмму со скругленными концами.

Как анимировать круговую диаграмму

Статическая диаграмма это, конечно, хорошо, но анимированная лучше! Для этого мы будем анимировать процентное значение —p от 0 до определенного значения. По умолчанию CSS-переменные не анимируются, но благодаря новой фиче @property это стало возможным.

@property --p< syntax: ''; inherits: true; initial-value: 0; >

Обратите внимание: нам нужно указать только значение from . По умолчанию браузер сделает значение to равным определенному нами значению (

).

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

К сожалению, эта техника не имеет широкой поддержки. Вы можете протестировать ее в браузерах на основе Chromium (Chrome и Edge), но в Firefox и Safari фокус не сработает. Чтобы подробнее узнать о поддержке, откройте Can I Use.

Прежде чем завершить статью, покажу еще раз код целиком, а также демо финального продукта. Как видите, я использовал два класса для управления скругленными концами и анимацией, так что мы можем с легкостью добавлять и убирать их.

See the Pen CSS only pie chart by Temani Afif (@t_afif) on CodePen.

Источник

Круговая диаграмма html css javascript

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.

Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

Бесплатные уроки HTML для начинающих

Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».

• 

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

Создан: 8 Августа 2016 Просмотров: 17535 Комментариев: 0

17 бесплатных шаблонов админок

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Создан: 23 Октября 2015 Просмотров: 23387 Комментариев: 0

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

Создан: 14 Октября 2015 Просмотров: 13792 Комментариев: 0

15 новых сайтов для скачивания бесплатных фото

Создан: 1 Августа 2015 Просмотров: 364151 Комментариев: 2

50+ бесплатных Bootstrap 3 шаблонов и элементов UI

Зум слайдер

Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.

Источник