Конструктор круговых диаграмм

Данные диаграммы

Преобразуйте небольшой набор категориальных данных в понятную круговую или кольцевую диаграмму, не загружая электронную таблицу. Введите строки с подписями и значениями либо вставьте данные CSV или строки с разделением табуляцией, а затем выберите цвета, подписи секторов, положение легенды и начальный угол. Предварительный просмотр дополнен текстовым описанием и доступной таблицей данных. Экспорт выполняется локально в PNG размером 1200 × 800 или масштабируемый SVG. Круговая диаграмма лучше всего подходит для небольшого числа неотрицательных частей, образующих единое осмысленное целое.

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

  1. 1

    Введите категории

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

  2. 2

    Выберите оформление

    Задайте круговой или кольцевой вид, палитру, подписи секторов, положение легенды, сортировку и начальный угол.

  3. 3

    Проверьте доступный результат

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

  4. 4

    Экспортируйте диаграмму

    Скачайте PNG 1200 × 800 или масштабируемый SVG либо скопируйте исходные данные в формате CSV.

Что показывает круговая диаграмма

Круговая диаграмма преобразует каждое положительное значение в угол внутри окружности 360°. Если значение категории равно v, а сумма всех отображаемых значений, T, центральный угол составляет 360 × v / T, а отображаемая доля, 100 × v / T. Кольцевая диаграмма использует те же пропорции, но оставляет центр пустым; сам принцип сравнения не меняется.

Категория Значение Доля Угол сектора
Товары 45 45% 162°
Услуги 30 30% 108°
Поддержка 25 25% 90°

В этом примере сумма равна 100, поэтому Товары занимают 45 / 100 × 360 = 162°. Инструмент принимает нулевые значения, но не рисует их на круге, поскольку они не имеют площади. Отрицательные, отсутствующие и не являющиеся конечными значения отклоняются: они не задают обычные части целого. Хотя бы одно значение должно быть больше нуля.

Когда лучше выбрать другую диаграмму

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

Цвет, подписи и доступность

Цвет не должен быть единственным носителем смысла. Сохраняйте легенду или видимые подписи секторов, проверяйте сопроводительную таблицу и используйте палитру, учитывающую особенности цветовосприятия, если диаграмму увидит широкая аудитория. В очень маленьком секторе может не поместиться текст, но точная подпись, значение и процент останутся в легенде и таблице данных. SVG удобен для редактирования и чёткой печати. PNG фиксированного размера 1200 × 800 подходит для слайдов, документов и публикаций в социальных сетях.

Диаграмма создаётся с помощью браузерных API SVG и Canvas. Данные не передаются внешнему сервису построения диаграмм. Ход многошаговой работы временно хранится в хранилище сеанса этой вкладки; чтобы удалить его, начните заново или закройте вкладку.

Подробнее читайте в рекомендациях Datawrapper по созданию круговой диаграммы с небольшим числом частей, руководстве W3C по доступным таблицам данных и справочнике MDN об описании SVG-графики с помощью <desc>.

Часто задаваемые вопросы

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

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

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

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

Нет. Строки, заголовок и настройки оформления остаются в браузере. Во время многошаговой работы они сохраняются только в хранилище сеанса этой вкладки; PNG и SVG создаются локально, а данные не попадают в URL.

Сопутствующие инструменты

Генератор мемов

Создавайте мемы по популярным шаблонам вроде Drake, Distracted Boyfriend или Doge либо загружайте свое изображение. Верхний и нижний текст, шрифт Impact, обводка и тень.

Генератор QR-кодов

Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.

Изменение размера изображений

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

Создание GIF

Преобразуйте серию изображений или короткое видео в анимированный GIF. Настройте частоту кадров, повторы и размер перед экспортом.

Генератор штрихкодов

Создавайте сканируемые 1D штрихкоды в Code 128, Code 39, EAN-13, UPC-A, ITF-14 и Codabar. Экспортируйте в PNG, SVG или PDF для печати.

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.