Как сделать круговую диаграмму в c

Обновлено: 09.01.2025

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

В R круговая диаграмма создается с использованием функции pie (), которая принимает положительные числа в качестве входных данных вектора. Дополнительные параметры используются для управления метками, цветом, заголовком и т. Д.

Синтаксис

Основной синтаксис для создания круговой диаграммы с использованием R —

Ниже приведено описание используемых параметров:

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

метки используются для описания ломтиков.

radius указывает радиус круга круговой диаграммы (значение от -1 до +1).

main указывает на название графика.

col обозначает цветовую палитру.

по часовой стрелке — логическое значение, указывающее, нарисованы ли срезы по часовой стрелке или против часовой стрелки.

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

метки используются для описания ломтиков.

radius указывает радиус круга круговой диаграммы (значение от -1 до +1).

main указывает на название графика.

col обозначает цветовую палитру.

пример

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

Когда мы выполняем приведенный выше код, он дает следующий результат —

Название и цвета круговой диаграммы

Мы можем расширить возможности диаграммы, добавив больше параметров в функцию. Мы будем использовать параметр main, чтобы добавить заголовок к диаграмме, а другой параметр — col, который будет использовать палитру цвета радуги при рисовании диаграммы. Длина поддона должна совпадать с количеством значений, которые мы имеем для диаграммы. Следовательно, мы используем длину (х).

пример

Приведенный ниже скрипт создаст и сохранит круговую диаграмму в текущем рабочем каталоге R.

Когда мы выполняем приведенный выше код, он дает следующий результат —

Процент срезов и легенда диаграммы

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

Когда мы выполняем приведенный выше код, он дает следующий результат —

3D круговая диаграмма

Круговую диаграмму с 3 измерениями можно нарисовать с помощью дополнительных пакетов. Пакетная матрица имеет функцию pie3D (), которая используется для этого.

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

Image by Gerd Altmann from Pixabay

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

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

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

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

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

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

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

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

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

Как я упоминал выше, у нас есть один

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

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

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

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

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

Я определяю наш элемент как 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 к псевдоэлементу

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

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

Применение radial-gradient()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Диаграмма, основанная на элементе Canvas, сгенерированная на клиенте (т.е. JavaScript)
Диаграмма, основанная на SVG и сгенерированная на клиенте (т.е. JavaScript)
Диаграмма, основанная на SVG и сгенерированная на сервере

Готовые библиотеки с использованием Canvas и SVG JavaScript

JavaScript-библиотеки для отрисовки диаграмм часто более удобные и загруженные кучей классных опций типа интерактивности. Вот несколько библиотек:

D3.js
Chartist.js
Google Charts

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

Так зачем заморачиваться и писать код для них своими руками? Это отличный вопрос, который я также задал себе. В конце концов, я убедился в трех вещах:

Большинство JavaScript-библиотек являются труднодоступными, особенно те, что основаны на элементе Canvas (за исключением Google Charts)
Если информация в диаграмме очень важна (как это было в моей ситуации), должны ли мы рассчитывать на скрипт, выполняющийся на клиенте, чтобы генерировать информацию? Я так не думаю.
Если я копну SVG-код глубже и запачкаю руки, я могу узнать немного больше про ту лежащую в его основе магическую чепуху. Другими словами, процесс обучения может оказаться веселым и стоящим моих усилий.

Моя ситуация

Моей команде нужен был простой компонент, который мог быть собран на сервере и отображать простую информацию об использовании аккаунтов. Кроме того, нашим предпочтением была легкость этого компонента (избежание JavaScript, если возможно); он не должен был быть чрезмерно мудреным или интерактивным, от него нужно было только отображение важных данных.

Дополнительная заметка о диаграммах, основанных на элементе Canvas

Вы могли заметить (если знакомы с созданием диаграмм для веба), что я не включил Chart.js в список рекомендованных библиотек выше. Хотя вы определенно можете ее использовать, стоит иметь в виду, что Chart.js использует элемент Canvas для отрисовки его диаграмм, и содержание элемента не является частью DOM. Следовательно, они недоступны для программ чтения с экрана. Это значит, что вам придется принять дополнительные меры, чтобы убедиться в доступности ваших данных.

Введение в CSS и SVG диаграммы

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

CSS-ниндзя Леа Вероу предлагает несколько вариантов создания круговых диаграмм с нуля в ее статье "Designing Flexible, Maintainable Pie Charts With CSS and SVG" ("Разрабатываем гибкие, поддерживаемые круговые диаграммы с помощью CSS и SVG"). Ее методы могут быть применимы и для кольцевых диаграмм.

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

Необъяснимое

Я немного погуглил про SVG и кольцевые диаграммы и столкнулся со статьями Леа Вероу и Робина Рэндла (они упомянуты выше) в дополнении к еще нескольким. Почти во всех из них обсуждалось использование атрибутов stroke-dasharray и stroke-dashoffset в SVG для расположения частей диаграммы. Эти свойства идентичны " stroke " при создании векторов в программах типа Adobe Illustrator.

В некоторых из этих статьей даже обсуждалась анимация в SVG, что есть круто, но это также не то, что я искал.

После моего исследования я смог понять, что использование из SVG вместе с stroke и stroke-dasharray могло обеспечить мне те сегменты вложенной круговой диаграммы, что были мне нужны. Я также понял, что stroke-dashoffset позволит мне сделать "анимацию", или, другими словами, расположить сегмент в том месте круга, где я хотел.

Однако, кажется, я не нашел никакого четкого объяснения тому, как именно работали stroke dash атрибуты и какое они имели отношение к окружности круга. А что было более недостижимым, так это прикрепление нескольких элементов (один за другим) вокруг круга. Еще лучше, какова же формула получения этих относительных позиций с использованием уникальных/динамических размеров сегментов и stroke-атрибутов SVG?

Итак, я стал полон решимости выяснить это для себя.

Как сделать SVG-диаграмму своими руками

Объяснение stroke-dasharray и stroke-dashoffset

Давайте начнем с простой SVG-"кольцевой диаграммы".

Вы заметите пару вещей:

Радиус (атрибут "r") выглядит абсурдно! Почему? Я хотел сделать размеры моих сегментов логичными, доступными для понимания и читабельными. Для того, чтобы достичь этого, я решил основать все на 100% (или на окружности, равной 100). SVG-фигуры масштабируемы, так что не очень важно, насколько большими они в конце концов окажутся; по крайней мере, математика здесь будет проста. Заходим дальше в ту область, что я помню из математики старшей школы: я знаю, что радиус окружности равен r = C/(2π) или r = 100/(2π). Результат равен 15.91549430918952. Безумное число с кучей цифр, да, знаю, но позже оно облегчит нам всем жизни.
Для viewBox заданы значения " 0 0 42 42 ". Они должны быть удвоенными cx & cy (center x и center y) значениями и быть чуть больше, чем диаметр кругов (включая ширину контура).
Там есть с классом " donut-hole ". Вот что гарантированно делает центр белым. Если вам это не важно (в случае с простой круговой диаграммой), тогда этот пункт можно убрать.
Также там есть с классом " donut-ring ". Он служит в качестве светло-серого фона в случае, если секторы не заполняют 100% окружности.

Итак, нам необходимо скорректировать размер сектора до желаемого процента. Давайте используем 85%:

Сектора созданы с помощью использования SVG stroke -атрибута, называемого stroke-dasharray . Значение, которое мы задали в примере выше, равняется " 85 15 ".

Если мы будем думать о диаграмме, как о круговой, то из наличия 85%-го сектора можно судить об остатке в 15%. Эти два значения - это массив, разграниченный пробелом. Вот что происходит: создаётся черта в 85 единиц, затем пробел в 15 единиц, затем черта в 85, пробел в 15 и так далее и тому подобное. Но поскольку мы используем круг, и общее значение равняется 100, все повторяется снова. Если мы не сделали второе значение в массиве таким, что оно дополняет первое число до ста, то мы получим третью черту (или часть) или больше. Например, вот stroke-dasharray от " 10 10 ":

Так, на фигуре 2 и фигуре 3 вы можете заметить, что stroke-dasharray не начинается на самом верху (на 12:00). Вместо этого, на самом деле оно начинается на правой стороне (3:00), и движется по часовой стрелке по кругу.

Если мы хотим расположиться (или начать) сверху, то мы должны использовать stroke-dashoffset . Однако в отличие от stroke-dasharray , stroke-dashoffset двигается против часовой стрелки. Итак, нам необходимо будет задать значение " 25 " (на 25% в другую сторону от 3:00, назад к 12:00). Помните, что это - не отрицательное число, потому что offset движется против стрелки.

Как расположить сектора кольцевой диаграммы вокруг SVG

Теперь нам нужно добавить дополнительные сектора вокруг круга. Давайте используем сектор, занимающий 15% от окружности. Оставшийся процент для stroke-dasharray будет равен 85%, независимо от любых других секторов. Следовательно, код будет выглядеть так:

Мы оставили stroke-dashoffset на значении 25 , поэтому зеленый сектор начинается сверху и идет по часовой стрелке, перекрывая первый сектор (розовый).

Очевидно, это не совсем то, чего мы хотели. Мы хотим, чтобы пятнадцатый процент (зеленый цвет) впритык вписывался в пространство, оставленное восемьдесят пятым процентом (розовый). Мы можем корректировать stroke-dashoffset , пока не повезет, но это было бы не так просто, имей мы еще два сектора. Вместо этого нам нужна формула:

Окружность - общая длина всех предыдущих секторов + смещение первого сектора = смещение текущего сектора

Подключая наши числа, мы получаем:

Добавляем больше секторов нашей диаграмме!

Эта же самая формула работает для добавления дополнительных секторов. Давайте заполним диаграмму 40, 30, 20 процентами, и оставшиеся 10 не будут использованы.

Добавляем текст внутрь диаграммы

Это не была бы кольцевая диаграмма без текста внутри и посередине; для этого и предназначена дыра, правильно? Что ж, добавить текст просто. Мы просто используем элемент

, который нативен для SVG-фигур.

Вы заметите, что я разделил текст диаграммы на 2 элемента

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

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

Для начала, давайте добавим шрифт Montserrat (просто потому, что он мне нравится). Затем нам надо скорректировать font-size ("размер шрифта") и line-height ("высота строки"). После добавления " translateY " в 0.25em текст немного выравнивается по вертикали, но на этом мы еще не закончили.

Нам надо сделать оба текстовых блока меньше и выровнять их до центра, корректируя font-size дотуда, докуда нам нравится ( 0.6em для более крупного числа и 0.2em для названия выглядят, что надо) и используя свойство " text-anchor " со значением " middle ".

Теперь текст находится в центре. Все, что осталось, это сделать его в верхнем регистре (это легко) и расположить его индивидуальные элементы, используя " translateY ", чтобы они сложились должным образом. И вот что мы имеем сейчас:

Проблемы с доступностью

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

Первый уровень проблем с доступностью - сделать SVG-диаграмму более семантической, обернув ее в элемент (поскольку это - диаграмма). Как фигура, мы можем воспользоваться элементом , чтобы предоставить заголовок или описание для кольцевой диаграммы.

Помимо этого, мы можем добавить контент-теги и (которые нативны для SVG) и связать их с заголовками ARIA, ID и ролью "предоставления большего количества контекста для программ чтения с экрана".

Мы также можем добавить ключ легенды для диаграммы в качестве части , отмечая его ролью "представления" и атрибутом aria-hidden , поскольку он и вправду нужен для наглядности.

С щепоткой магии CSS Flexbox мы можем расположить ключ справа и выровнять его по вертикали с диаграммой. Что даст нам финальный продукт:

Поскольку CSS-дизайн с ключом, к которому применяется свойство border-radius и Flexbox могли бы быть отдельными статьями (второе требует гораздо более долгого объяснения), я оставлю эти темы на потом.

Конечные результаты

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

Существуют программы специального назначения, нацеленные на работу с электронными таблицами. Обычно в их функциональность входят инструменты составления диаграмм по заданному диапазону данных, который изначально вводится в таблицу или создается вместе с объектом. Мы рассмотрим этот способ на примере двух популярных представителей ПО для работы с электронными таблицами.

Microsoft Excel

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

OpenOffice Calc

Если приведенный выше вариант вас не устраивает из-за платного распространения, рекомендуем обратить внимание на бесплатный аналог под названием Calc от OpenOffice. Это компонент пакета офисных программ, который предназначен для работы с электронными таблицами и обладает всеми нужными функциями, полезными и при создании круговой диаграммы. Давайте детальнее разберем, как происходит выполнение данной операции в OpenOffice Calc.

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

Способ 2: Текстовые редакторы

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

Microsoft Word

OpenOffice Writer

Как и в прошлый раз, расскажем о бесплатной альтернативе в виде OpenOffice Writer, которую тоже можно использовать для построения круговой диаграммы с ее дальнейшей интеграцией в текстовый документ. Рассмотрим пошаговое представление того, как это происходит:

Способ 3: Презентации

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

Microsoft PowerPoint

OpenOffice Impress

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

Способ 4: Онлайн-сервисы

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

Google Таблицы

Google Таблицы — бесплатный инструмент от известной компании, позволяющий управлять своими проектами в сети и сохранять их в облаке. Этот сервис предоставляет и функцию для создания круговой диаграммы, а использовать ее можно так:

Excel Онлайн

Компания Microsoft сделала облегченные онлайн-версии своих популярных программ и позволяет использовать их бесплатно прямо в браузере. Поэтому предлагаем попробовать Excel Онлайн, чтобы узнать, чем отличается этот сервис от предыдущего и как в нем создать круговую диаграмму.

Мы рады, что смогли помочь Вам в решении проблемы.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Читайте также: