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

10 полезных CSS-графиков и диаграмм.

Каскадные таблицы стилей (CSS) – это язык, который используется для описания формата документа, написанного на языке разметки, таком как HTML, XHTML и т. Д. Важной особенностью диаграммы или графика CSS является то, что он позволяет пользователям легко загружать, уменьшая требования к пропускной способности HTML-страницы. Существует множество методов, которые создают стиль на графиках и диаграммах CSS3. В любой веб-индустрии хорошая и превосходная презентация данных играет важную роль в том, чтобы клиенты понимали содержание вашего анализа.

В этом посте мы собрали 10 полезных уроков и техник CSS-графиков и диаграмм, которые вы наверняка найдете очень полезными! Наслаждаться.

Похожие сообщения:

• Топ 10 jQuery графиков и диаграмм

1. Анимационная круговая диаграмма Snazzy с HTML5 и jQuery

Узнайте, как использовать элемент HTML5 canvas, CSS3 и jQuery для создания великолепной интерактивной анимированной круговой диаграммы. Полный код включен для вашего собственного использования.

Исходный Демо

2. Анимированная 3D-диаграмма Wicked CSS3

При наведении анимация показывает, и полоса вырастет до соответствующего размера.

Исходный Демо

3. CSS3 Гистограммы

Гистограммы в CSS не являются ни новыми, ни очень сложными. Используя некоторые довольно простые стили, вы можете довольно легко заставить списки и т. Д. Напоминать графики и диаграммы. Однако, используя некоторые богатые CSS3 и прогрессивные улучшения, вы действительно можете начать выводить на экран и представлять эти обычно скучные документы на следующий уровень.

Исходный Демо

4. CSS3 Гистограммы

Это набор чистых гистограмм CSS3 в чистом 3D стиле. Вы можете легко визуализировать данные, не используя JavaScript, PHP или даже изображения. Этот набор поставляется с 9 предопределенными стилями графиков – одиночные и сгруппированные гистограммы.

Исходный Демо

5. CSS3 Графика Анимация

Узнайте, как создать диаграмму с использованием CSS3-анимации.

Исходный Демо

6. Доступная гистограмма

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

Источник + Демо

7. Список Гистограмма

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

Источник + Демо

8.

Создание Графа

Создание графика с использованием процентных фоновых изображений.

Источник + Демо

9. CSS вертикальные гистограммы

Разница здесь в том, что все это простой набор вложенных списков и CSS.

Источник + Демо

10. Доступная визуализация данных с помощью веб-стандартов.

Эта простая техника просто добавляет полосы к списку предметов за текстом (посмотрите готовый пример, чтобы понять, для чего мы стреляем). Это работает для списков любой длины. Более длинные списки выигрывают от сортировки по количеству, поскольку относительные значения столбцов легче читать, когда они последовательные.

Исходный Демо

Круговой круг Угловая круговая диаграмма Круговой сектор, круг, угол, лист, логотип png

Круговой круг Угловая круговая диаграмма Круговой сектор, круг, угол, лист, логотип png

теги

• угол,
• лист,
• логотип,
• трава,
• форма,
• вращение,
• круговая диаграмма,
• сегмент сегмента,
• линия,
• html,
• зеленый,
• образование Наука,
• диск,
• CSS фигуры,
• значки компьютеров,
• круговой сектор,
• круг,
• символ,
• png,
• прозрачный,
• бесплатная загрузка

Об этом PNG

Размер изображения

709x709px

Размер файла

19. 83KB

MIME тип

Image/png

Скачать PNG ( 19.83KB )

изменить размер PNG

ширина(px)

высота(px)

Лицензия

Некоммерческое использование, DMCA Contact Us

• Leaf Logo, зеленые листья, логотип с зелеными и зелеными листьями, текст, кленовый лист, трава png 1248x1248px 449.33KB
• Линия полукруга, круг, угол, геометрическая форма, форма png 1000x1000px 14.55KB
• Полукруг Круговой сегмент, круг, черный, форма, обод png 751x768px 15.71KB
• HTML Компьютерные иконки, HTML CSS, угол, текст, другие png 512x512px 9. 07KB
• Круг, зеленый круг, цвет, трава, сфера png 588x595px 94.76KB
• Круг белый, круг, белый, монохромный, черный png 1024x1024px 30.29KB
• Затенение треугольной формы, треугольная форма, черные и бирюзовые треугольники, угол, окрашенный, текст png 529x524px 32.78KB
• Круг, красный круг, оранжевый, Wikimedia Commons, сфера png 1024x1024px 40.27KB
• желтый, красный и зеленый иллюстрации ассорти-формы, геометрическая форма Геометрия Плоский дизайн, круг, угол, текст, прямоугольник png 1994x2155px 115.07KB
• org/ImageObject»> Shape Computer Icons, Green Shape s, лист, сердце, компьютерные обои png 600x600px 7.05KB
• Иконки YouTube для компьютеров, YouTube, угол, прямоугольник, черный png 1000x1000px 16.98KB
• зеленая галочка иллюстрация, галочка, галочка, разное, угол, лист png 1152x1024px 48.54KB
• Галочка Компьютерные иконки, Зеленая галочка 2 Иконка, галочка, Разное, угол, лист png 512x512px 13.41KB
• зеленый шаблон заголовка, баннер формы, формы, угол, лист, текст png 1000x526px 9.69KB
• красная и желтая спиральная иллюстрация, форма абстракция абстрактное искусство, абстрактные формы, лист, оранжевый, обои для компьютера png 861x896px 75. 56KB
• круглый красный логотип, круг рисунок, подсветка, угол, текст, форма png 800x800px 49.88KB
• Логотип Зеленый лист, Граница зеленых листьев, иллюстрация зеленого листа, бордюр, рамка, акварель Листья png 6614x6614px 3.4MB
• Спиральный круг, круг, синий, белый, спираль png 547x550px 24.63KB
• зеленый восьмиугольник, неоновые формы восьмиугольник компьютер значки, форма, угол, геометрическая форма, форма png 512x512px 264.26KB
• Полукруг Линия Дуга, изогнутая линия, угол, треугольник, геометрическая форма png 1024x1024px 15.17KB
• org/ImageObject»> Полукруг, круг, угол, логотип, черный png 512x512px 2.15KB
• Веб-разработка Каскадные таблицы стилей CSS3 Computer Icons, css, разное, синий, угол png 1400x1400px 51.23KB
• чирок и черный, форма рабочего стола, форма, угол, текст, симметрия png 1024x1024px 165.93KB
• Флажок Проверить, проверить, разное, угол, текст png 1717x1717px 79.05KB
• Форма листа Форма листа Зеленый, Green Shape s, угол, лист, прямоугольник png 480x598px 9.73KB
• Логотип Whats App, логотип WhatsApp, WhatsApp, cdr, лист, текст png 512x512px 8.73KB
• org/ImageObject»> синий логотип, круг логотип шрифт, шаблоны, синий, угол, текст png 5618x5506px 822.62KB
• WhatsApp Прикладная программа Значок сообщения, логотип WhatsApp, логотип Whats App, логотип, трава, мобильные телефоны png 1000x1000px 348.81KB
• зеленый значок вызова, логотип WhatsApp, WhatsApp, текст, товарный знак, трава png 1024x1024px 500.58KB
• Круг Стрелка Компьютерные иконки Диск по часовой стрелке, круг, текст, векторные иконки, инкапсулированный PostScript png 1200x630px 30.41KB
• Логотип Круг Марка Угол, круг, угол, логотип, трава png 518x527px 41.89KB
• org/ImageObject»> Флажок, Зеленый правильный знак, значок флажка и флажка, угол, другие, лист png 512x512px 5.72KB
• CSS3 Каскадные таблицы стилей Логотип HTML Язык разметки, другие, разное, синий, угол png 1270x1500px 74.36KB
• логотип местоположения, символ местоположения компьютерные иконки, расположение, разное, угол, сердце png 816x1200px 49.17KB
• звезда разных цветов, круг звезд, звезды, лист, симметрия, цвет png 700x700px 39.78KB
• комиксов чат головы иллюстрации, рисунок круга, подчеркивание, угол, карандаш, текст png 800x780px 33KB
• Галочка Tick, Green Nrg Co, угол, лист, текст png 512x512px 70. 18KB
• Хромакей Галочка Tilde Symbol, зеленая галочка, зеленая галочка, разное, угол, лист png 600x510px 8.33KB
• WhatsApp логотип, WhatsApp Logo Компьютерные иконки, мессенджер, текст, трава, инкапсулированный PostScript png 1600x1600px 37.54KB
• Круг Логотип, цирк, логотип, монохромный, геометрическая форма png 512x512px 9.82KB
• Стрелка круг и квадратный символ, стрелка, круговой, инкапсулированный PostScript, область png 512x512px 6.91KB
• Круговая круговая диаграмма, диаграмма, фиолетовый, цвет, сфера png 500x500px 114.52KB
• org/ImageObject»> зеленая галочка, галочка галочка, галочка, угол, лист, завод Стебель png 2098x2400px 55.5KB
• Круг, красный круг, компьютерная сеть, наклейка, круг png 592x600px 140.65KB
• WhatsApp логотип, WhatsApp значки компьютеров Телефонный звонок, WhatsApp, трава, интернет, мобильные телефоны png 1019x1019px 137.25KB
• красная линия, круг овальный угол, гидросфера ppt, площадь, образование наука, линия png 500x500px 13.27KB
• Полукруг Компьютерные иконки, полукруг, угол, прямоугольник, монохромный png 1024x1024px 13.3KB
• Круг стрелка, тираж, угол, монохромный, черный png 512x512px 19. 29KB
• зеленая листовая иллюстрация, капля воды значок, зеленый круг, лист, кольцо, натуральный png 888x698px 267.75KB
• Информационная инфографика, инфографика, четыре круглых оранжевых, желтых, красных и бирюзовых иллюстраций, текст, бизнес, данные png 510x511px 52.08KB

КАК: Чистые круговые диаграммы CSS с переменными CSS | by Jhey Tompkins

Photo by Charles Deluvio 🇵🇭🇨🇦 on Unsplash

Создавайте настраиваемые круговые диаграммы в ~30 строках CSS 😎

Когда-либо нужно было создать круговую диаграмму для вашего приложения, но вы не хотели тянуть ее целиком библиотека? Я тебя прикрыл. Приблизительно в 30 строках ванильного CSS мы можем создавать свои собственные круговые диаграммы 🙌

Мы только создаем круговую диаграмму. Мы не будем создавать легенду или какие-либо интерактивные функции. Их несложно добавить, и я расскажу, как это сделать.

Хитрость при создании наших диаграмм заключается в использовании переменных CSS и calc вместе с clip-path . Мы также будем использовать переменную CSS в качестве условного 🤓 (я перечислил некоторые ресурсы ниже, если вы не знакомы с переменными , calc или clip-path 📚 👍)

Для тех, кто в camp TL;DR , вот демоверсия, с которой можно поиграть!

Начнем с разметки. Нам нужна простая разметка. Что-то вроде;

Базовая разметка круговой диаграммы

Но как определить значения? Такие значения, как начало, конец, цвет и т. д. Мы могли бы использовать встроенные переменные CSS в сегменте!

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

Настраиваемый размер

Чтобы сделать его кругом, мы будем использовать радиус границы имущество. Давайте также зададим фоновый цвет , чтобы мы могли видеть, с чем мы работаем.

Вот что у нас есть. Начало нашего пирога.

Основа пирога 😋

Итак, как мы справимся с сегментами? Начнем с добавления элемента 100% высоты и ширины круговой диаграммы. Давайте зададим ему границу , чтобы мы могли видеть, с чем мы работаем. Сегменты будут иметь абсолютное позиционирование, поэтому они начинаются в одном и том же месте.

Код начала нашего сегмента

Это дает нам следующее;

Это не похоже на круговую диаграмму 👎

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

Применить сброс преобразования для сегментов

Это дает нам;

Дайте волю своему воображению, и вы увидите, куда мы идем 😉

Может показаться, что это не будет сегментом пирога, но поверьте 😃

Давайте начнем с создания жестко запрограммированного сегмента. Он начинается с 0 и использует 45 градусов круговой диаграммы, то есть 12,5% . Давайте использовать псевдоэлементы. Мы также удалим границу сегмента и добавим жестко заданные цвета и непрозрачность, чтобы показать концепцию.

Начинаем играть с псевдоэлементами

Это дает нам

Мне кажется, я вижу, что там прячется сегмент 👀

Теперь мы действительно можем разобрать сегмент. Удаление цвета и скрытие переполнения на круговой диаграмме и сегменте даст нам что-то вроде этого;

Аааа, теперь я вижу!

Давайте применим это переполнение к сегменту и круговой диаграмме. Давайте также сделаем смещение и значение переменной CSS . Мы можем использовать вычислить , чтобы определить правильное вращение.

Внедрите calc, чтобы мы могли быть гибкими 🏅Наш первый настоящий жестко закодированный сегмент 🙌

Теперь мы можем обновить нашу разметку, чтобы обновить значение и смещение нашего сегмента!

Принимая это динамично 👟

Теперь у нас есть сегмент, смещенный на 45 градусов и имеющий значение 25% или 90 градусов круговой диаграммы.

Результат вычисления! 🔩

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

Преобразование процентного значения в градусы смещения и значения 🤓

Для нашего последнего примера мы можем иметь значение 25% при смещении 12,5% .

У нас проблема. Мы можем добавлять сегменты и иметь динамические значения. Но мы ограничены значением 50% 😫. Любое значение больше 50 разрывает сегмент. Так не пойдет.

Этот сегмент должен показывать 55%, вместо этого он как бы 45% при смещении 5% 😭

Нам нужно показать больше, чем есть в наличии. В нашем распоряжении есть еще один псевдоэлемент 🤔. Давайте поработаем с сегментом 55% процентов со смещением 0 .

Мы можем использовать :после псевдоэлемент для представления первых 50% . Мы можем сделать это, заполнив сегмент. Мы можем удалить переполнение : скрытый в нашем сегменте, чтобы показать дополнительное значение.

Приведение :after, чтобы спасти положение!

Но теперь другая проблема. Элемент :after отображается всегда, а мы этого не хотим. Но как мы можем показать это на основе значения?

:after элемент представлен синим цветом для демонстрационных целей!

Что мы можем сделать, так это представить новый Переменная CSS , которая будет действовать как условная. Назовем его over50 . Если over50 равно 1 , то показать элемент :after . Если это 0 , то не делайте этого. Мы можем использовать это, чтобы установить непрозрачность элемента after. Не забудьте также установить значение по умолчанию 0 .

Сделать оба псевдоэлемента одного цвета и отображать только :after, когда это необходимо 👍Использование переменной over50 🔨

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

Поддержка сладкого цвета 🍭

Потрясающе! Мы сейчас куда-то движемся. Давайте проверим это, добавив еще один сегмент.

Представляем еще один сегмент 🍕Это неправильно 👎

Ну, это выглядит неправильно! Кажется, нам нужно, чтобы overflow: hidden на сегменте. Но только когда значение ниже 50 . Похоже, нам понадобится еще эта переменная over50 .

Но как мы можем использовать переменную CSS для вычисления переполнения ? С clip-path — это ответ! (Вы можете ознакомиться с clip-path здесь 📚)

По умолчанию мы хотим, чтобы наш сегмент не имел переполнения . Используя clip-path , мы можем сделать это с полигоном.

Ввести базовый путь отсечения, эквивалентный переполнению: скрыто

Это использование пути отсечения дает тот же результат, что и переполнение: скрыто . Хитрость заключается в том, что когда для переменной over50 установлено значение 1 , мы хотим показывать за пределами этих границ.

Это меньший клип для переполнения: hidden

Мы можем сделать это, умножив значение over50 на -100% и 100% , где это необходимо. Это даст нам либо небольшой клип, либо большой клип, который позволит нам показать переполнение.

Желаемый большой клип для показа больших сегментов 🍕

Чтобы сгенерировать клип, мы создаем две переменные, которые войдут в наш полигон clip-path .

Генерация пути клипа на основе значения больше 50 🤓

Собираем все вместе и перезагружаем страницу, теперь получаем желаемый результат 🎉

Вот как это должно выглядеть!

Теперь все, что осталось сделать, это удалить фон круга и добавить еще несколько сегментов ✊

Давайте добавим несколько дополнительных сегментов и сделаем что-нибудь интересное!

И вот результат!

Sweet 🎉 Рабочая круговая диаграмма только с помощью CSS!

Это довольно мило 🍭

Я сказал, что коснусь дополнений, прежде чем мы закончим. Вероятно, если бы вы использовали эти круговые диаграммы, вам бы понадобились некоторые другие функции, такие как легенда, метки или эффекты наведения. Есть много возможностей. Давайте пробежимся по некоторым.

Простые этикетки. Давайте начнем с применения простой метки к каждому сегменту.

Простые метки с использованием attr()

Для этого мы можем сделать из свойства content наш псевдоэлемент :before .

Использование атрибута attr() для контента 👍

Тогда все, что нам нужно сделать, это отправить значение в атрибут разметки.

Применение метки через атрибут разметки

Как насчет фактического элемента, который отображается на :hover . Вот немного разметки

Элемент простой круговой метки

Затем мы применяем к нему несколько основных стилей.

Показывать эту метку только при наведении курсора на сегмент 👀

И мы получаем метку при наведении

Показывать метку сегмента при :hover 🐝

Эти короткие примеры являются отправной точкой для настройки.

Мы создали круговые диаграммы на чистом CSS примерно из 30 строк CSS , используя calc и переменные 🙌 🎉

Как всегда, любые вопросы или предложения, пожалуйста, не стесняйтесь оставлять ответы или писать мне в Твиттере 🐦!

РЕСУРСЫ 📚

• CSS clip-path — MDN
• CSS calc() — MDN
• CSS-переменные — MDN

CSS

Essential Training Online Class

1

Все темы

творческий

Веб-дизайн

Веб-стандарты

Предварительный просмотр

С Кристиной Труонг Нравится 12 213 пользователям

Продолжительность: 4 часа 29 минут Уровень мастерства: Начинающий Выпущено: 01.10.2019

Начать бесплатную пробную версию на 1 месяц

Детали курса

Каскадные таблицы стилей (CSS) — это язык таблиц стилей, который позволяет вам управлять внешним видом ваших веб-страниц. В этом практическом курсе Кристина Труонг демонстрирует концепции, которые составляют основу CSS, объясняя, что вам нужно знать, чтобы настроить существующий CSS и написать свой собственный. Кристина объясняет, как добавить цвета и другие элементы дизайна, чтобы ваши веб-страницы вышли за рамки простого черного текста на белом фоне. Она показывает, как использовать селекторы, как блочная модель определяет интервалы и размеры элементов страницы, а также как стилизовать текст и управлять базовыми макетами с помощью Flexbox и Grid. Она также рассказывает о работе с расширенными селекторами, создании гибких макетов и определении того, когда использовать свойства float и position. Кроме того, в конце курса вы получите настоящий проект — страницу онлайн-резюме.

Навыки, которые вы приобретете

• Каскадные таблицы стилей (CSS)

Получите общий сертификат

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

Обучение LinkedIn Обучение

Сертификат об окончании

• Демонстрация в вашем профиле LinkedIn в разделе «Лицензии и сертификаты»

• Загрузите или распечатайте в формате PDF, чтобы поделиться с другими

• Поделитесь изображением в Интернете, чтобы продемонстрировать свое мастерство

Познакомьтесь с инструктором

• Кристина Труонг

  Веб-разработчик + преподаватель

Отзывы учащихся

4771 оценка

Общий рейтинг рассчитывается на основе среднего значения представленных оценок. Оценки и обзоры могут быть отправлены только тогда, когда неанонимные учащиеся завершат не менее 40% курса. Это помогает нам избежать поддельных отзывов и спама.

• 5 звезд Текущее значение: 3678 77%
• 4 звезды Текущее значение: 851 17%
• 3 звезды Текущее значение: 191 4%
• 2 звезды Текущее значение: 29<1%
• 1 звезда Текущее значение: 22 <1%

Николя Мишель Бальтазар

Николя Мишель Бальтазар

Data Capturer en Proprofit

5/5 6 апреля 2023 г.