Категории

← View All Tools

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Категория
Data Visualization
Типы входных данных
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
Примеры Коммуникации WebRTC в Реальном Времени
Комплексные примеры WebRTC для P2P аудио/видео коммуникации, каналов данных, обмена экраном и сервера сигнализации
preferred input family json
json
Примеры Расширенного Применения Grafana
Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов
preferred input family json
json
Примеры Анализа Логов ELK Stack
Комплексные примеры ELK Stack для агрегации, обработки и визуализации логов в распределенных системах
preferred input family json
json

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

Инструменты Json для Generate
Изучите 33 инструментов json для сценариев generate и быстро сравните близкие утилиты.
Инструменты Json для Convert
Изучите 100 инструментов json для сценариев convert и быстро сравните близкие утилиты.
Инструменты Json
Изучите 43 инструментов json для сценариев utility и быстро сравните близкие утилиты.
Инструменты Json для Format
Изучите 6 инструментов json для сценариев format и быстро сравните близкие утилиты.

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]