График Кольца Прогресса

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

Значения прогресса (0-100). Поддерживает массив JSON с метками, простые пары метка:значение или только значения

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

Размер каждого кольца прогресса в пикселях

Толщина штриха кольца прогресса

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

Пользовательские цвета для колец прогресса (шестнадцатеричные цвета через запятую)

Длительность анимации прогресса в миллисекундах

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

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

Отображать метку под каждым кольцом прогресса

Анимировать кольца прогресса при загрузке

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

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

Обзор

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

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

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

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

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

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

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

Примеры

1. Отслеживание этапов проекта

Менеджер проекта
Контекст
Необходимо наглядно показать руководству статус выполнения трех ключевых этапов разработки продукта.
Проблема
Текстовые отчеты сложно воспринимать быстро.
Как использовать
Ввести данные этапов в поле «Данные Прогресса» и выбрать цветовую схему «Успех».
Пример конфигурации
[{"label": "Дизайн", "value": 90}, {"label": "Разработка", "value": 65}, {"label": "Тестирование", "value": 30}]
Результат
Три анимированных кольца с четким отображением процентов завершения для каждого этапа.

2. Дашборд личной эффективности

Аналитик
Контекст
Требуется создать компактный виджет для мониторинга ежедневных показателей продуктивности.
Проблема
Нужно сгруппировать несколько метрик в одном визуальном блоке.
Как использовать
Указать значения метрик, настроить толщину кольца и включить отображение процентов.
Пример конфигурации
{"ringThickness": 20, "showPercentage": true, "animated": true}
Результат
Стильный круговой индикатор, который наглядно демонстрирует текущий уровень продуктивности.

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

json
PDF Примеры
PDF примеры, созданные инструментами 2026-02-01..2026-02-10
preferred input family json
json
Примеры Распределенного Трейсинга
Комплексные примеры распределенного трейсинга с использованием Jaeger, OpenTelemetry и современных инструментов
preferred input family json
json
Примеры Анализа Логов ELK Stack
Комплексные примеры ELK Stack для агрегации, обработки и визуализации логов в распределенных системах
preferred input family json
json
Примеры Расширенного Применения Grafana
Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов
preferred input family json
json

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

Генераторы JSON-схем, mock-данных и API-fixture
Подборка инструментов для генерации JSON-схем, сборки mock-payload и подготовки API-fixture в одном хабе.
Инструменты JSON-обмена и перевода форматов
Сравните инструменты преобразования JSON для CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN и других структурированных форматов в одном хабе.
Инструменты для проверки, diff и преобразования JSON
Соберите в одном хабе инструменты для форматирования JSON, сравнения версий, проверки путей, валидации схем, объединения файлов и преобразования данных для API и data workflows.
Инструменты форматирования, diff и нормализации JSON
Сравните инструменты форматирования JSON, diff, анализа логов, сравнения конфигураций и нормализации данных в одном хабе для удобной проверки JSON.

FAQ

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

Инструмент поддерживает JSON-массивы с метками и значениями, пары «метка:значение» или просто список числовых значений от 0 до 100.

Можно ли настроить цвета колец?

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

Как изменить размер диаграммы?

Используйте параметр «Размер кольца», чтобы задать диаметр индикатора в пикселях (от 100 до 400).

Поддерживает ли инструмент анимацию?

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

Можно ли скрыть текстовые метки?

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

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

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

POST /ru/api/tools/progress-ring-chart

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

Имя параметра Тип Обязательно Описание
progressData textarea Да Значения прогресса (0-100). Поддерживает массив JSON с метками, простые пары метка:значение или только значения
chartTitle text Нет Заголовок, который будет отображаться над диаграммой
ringSize number Нет Размер каждого кольца прогресса в пикселях
ringThickness number Нет Толщина штриха кольца прогресса
startAngle number Нет Начальный угол в градусах (-90 = сверху, 0 = справа, 90 = снизу, 180 = слева)
colorScheme select Нет -
customColors text Нет Пользовательские цвета для колец прогресса (шестнадцатеричные цвета через запятую)
animationDuration number Нет Длительность анимации прогресса в миллисекундах
backgroundColor color Нет Цвет фона для контейнера диаграммы
showPercentage checkbox Нет Отображать значение процента в центре каждого кольца
showLabel checkbox Нет Отображать метку под каждым кольцом прогресса
animated checkbox Нет Анимировать кольца прогресса при загрузке

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

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

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

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

{
  "mcpServers": {
    "elysiatools-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "Создавайте красивые круговые индикаторы прогресса с анимациями, идеально подходящие для отображения процентов, ставок завершения и метрик прогресса",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "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]