Категории

Генератор Кольцевой Диаграммы

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

Данные для кольцевой диаграммы. Поддерживает массив JSON или простой формат текста метка:значение

Заголовок, который будет отображаться над диаграммой

Текст для отображения в центре пончика (при отображении итога)

Размер квадратной диаграммы в пикселях

Внутренний радиус пончика в пикселях (оставьте пустым для авто)

Внешний радиус пончика в пикселях (оставьте пустым для авто)

Начальный угол в градусах (0 = верх, 90 = право)

Цвет фона для контейнера диаграммы

Отображать проценты на сегментах диаграммы

Отображать легенду под диаграммой

Отображать метки или проценты непосредственно на сегментах пончика

Отображать итоговое значение в центре пончика

Разделить сегменты друг от друга для выделения

Ключевые факты

Категория
Data Visualization
Типы входных данных
textarea, text, select, number, color, checkbox
Тип результата
html
Покрытие примерами
4
API доступен
Yes

Обзор

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

Когда использовать

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

Как это работает

  • Введите данные в формате JSON или простом текстовом виде (метка:значение).
  • Настройте внешний вид диаграммы: выберите цветовую схему, размер и параметры отображения меток.
  • Используйте дополнительные опции, такие как «Взорвать сегменты» или «Показать итог в центре», для улучшения читаемости.
  • Сгенерируйте готовую диаграмму и используйте её для презентаций или отчетов.

Сценарии использования

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

Примеры

1. Распределение маркетингового бюджета

Маркетолог
Контекст
Необходимо представить руководству отчет о распределении бюджета между каналами продвижения.
Проблема
Сложно быстро оценить пропорции затрат по текстовой таблице.
Как использовать
Вставить данные расходов в поле ввода, выбрать цветовую схему 'business' и включить отображение процентов.
Пример конфигурации
chartTitle: 'Распределение бюджета', colorScheme: 'business', showPercentage: true
Результат
Получена профессиональная кольцевая диаграмма, где каждый канал четко выделен цветом с указанием доли в процентах.

2. Анализ состава аудитории

Аналитик
Контекст
Требуется показать демографический срез пользователей сервиса.
Проблема
Нужно компактно отобразить доли возрастных групп с итоговым количеством пользователей в центре.
Как использовать
Ввести данные возрастных групп, активировать 'Показать итог в центре' и задать текст 'Всего пользователей'.
Пример конфигурации
centerText: 'Всего пользователей', showTotalInCenter: true, showLegend: true
Результат
Диаграмма с наглядным разделением групп и общим числом пользователей в центре, что упрощает восприятие данных.

Проверить на примерах

json, text

Связанные хабы

FAQ

Какие форматы данных поддерживает инструмент?

Вы можете вводить данные в формате массива JSON или простым списком в формате «метка:значение».

Можно ли изменить размер диаграммы?

Да, вы можете указать размер диаграммы в пикселях в диапазоне от 200 до 800.

Как отобразить итоговое значение в центре?

Активируйте опцию «Показать итог в центре» и введите желаемый текст в поле «Центральный текст».

Что делает опция «Взорвать сегменты»?

Эта функция визуально отделяет сегменты друг от друга, создавая эффект «разнесенной» диаграммы для лучшего выделения каждой части.

Можно ли настроить начальный угол диаграммы?

Да, вы можете задать начальный угол в градусах от 0 до 360, где 0 соответствует верхней точке круга.

Документация API

Конечная точка запроса

POST /ru/api/tools/donut-chart-generator

Параметры запроса

Имя параметра Тип Обязательно Описание
chartData textarea Да Данные для кольцевой диаграммы. Поддерживает массив JSON или простой формат текста метка:значение
chartTitle text Нет Заголовок, который будет отображаться над диаграммой
colorScheme select Нет -
centerText text Нет Текст для отображения в центре пончика (при отображении итога)
chartSize number Нет Размер квадратной диаграммы в пикселях
innerRadius number Нет Внутренний радиус пончика в пикселях (оставьте пустым для авто)
outerRadius number Нет Внешний радиус пончика в пикселях (оставьте пустым для авто)
startAngle number Нет Начальный угол в градусах (0 = верх, 90 = право)
backgroundColor color Нет Цвет фона для контейнера диаграммы
showPercentage checkbox Нет Отображать проценты на сегментах диаграммы
showLegend checkbox Нет Отображать легенду под диаграммой
showLabels checkbox Нет Отображать метки или проценты непосредственно на сегментах пончика
showTotalInCenter checkbox Нет Отображать итоговое значение в центре пончика
explodeSlices checkbox Нет Разделить сегменты друг от друга для выделения

Формат ответа

{
  "result": "
Processed HTML content
", "error": "Error message (optional)", "message": "Notification message (optional)", "metadata": { "key": "value" } }
HTML: HTML

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP:

{
  "mcpServers": {
    "elysiatools-donut-chart-generator": {
      "name": "donut-chart-generator",
      "description": "Генерировать настраиваемые кольцевые диаграммы из данных с различными опциями стилизации, идеально подходит для отображения пропорций с центральным пространством",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=donut-chart-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]