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

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

> Каноническая страница: https://elysiatools.com/ru/tools/progress-ring-chart

- **Категория:** Data Visualization

- **Ключевые слова:** кольцо прогресса, круговой прогресс, процент, круговая диаграмма, индикатор прогресса, ставка завершения, круговой измеритель

## Обзор

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

## Входные данные

- **Данные Прогресса** (textarea): Значения прогресса (0-100). Поддерживает массив JSON с метками, простые пары метка:значение или только значения
- **Заголовок Диаграммы** (text): Заголовок, который будет отображаться над диаграммой
- **Размер Кольца** (number): Размер каждого кольца прогресса в пикселях
- **Толщина Кольца** (number): Толщина штриха кольца прогресса
- **Начальный Угол** (number): Начальный угол в градусах (-90 = сверху, 0 = справа, 90 = снизу, 180 = слева)
- **Цветовая Схема** (select): Выбрать цветовую схему
- **Пользовательские Цвета** (text): Пользовательские цвета для колец прогресса (шестнадцатеричные цвета через запятую)
- **Длительность Анимации** (number): Длительность анимации прогресса в миллисекундах
- **Цвет Фона** (color): Цвет фона для контейнера диаграммы
- **Показать Проценты** (checkbox): Отображать значение процента в центре каждого кольца
- **Показать Метку** (checkbox): Отображать метку под каждым кольцом прогресса
- **Анимированный** (checkbox): Анимировать кольца прогресса при загрузке

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

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

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

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

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

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

## Частые вопросы

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

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

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

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

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

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

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

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

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

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

## Связанные инструменты

- [График Рейтинговых Звезд](https://elysiatools.com/ru/tools/rating-star-chart): Создавать красивые визуализации рейтинговых звезд для продуктов, услуг и анализа пользовательских отзывов
- [Генератор Розовой Диаграммы](https://elysiatools.com/ru/tools/rose-chart): Генерировать красивые розовые диаграммы Найтингейл (диаграммы гребешка) для визуализации данных через угол и площадь, идеально подходит для сравнительного анализа и представления исторических данных
- [Генератор Потокового Графика](https://elysiatools.com/ru/tools/stream-graph-generator): Генерировать красивые потоковые графики для данных временных рядов с плавными анимациями и вариациями базовой линии
- [Генератор Временной Шкалы](https://elysiatools.com/ru/tools/timeline-generator): Генерировать красивые и интерактивные временные шкалы из данных событий с различными макетами и стилями
- [Генератор Сравнительного Столбчатого Графика](https://elysiatools.com/ru/tools/comparison-bar-chart): Генерировать спина к спине столбчатые графики для сравнения положительных и отрицательных значений, идеально для контрастирования наборов данных
- [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown
- [Генератор Кольцевой Диаграммы](https://elysiatools.com/ru/tools/donut-chart-generator): Генерировать настраиваемые кольцевые диаграммы из данных с различными опциями стилизации, идеально подходит для отображения пропорций с центральным пространством
- [Генератор Воронкообразной Диаграммы](https://elysiatools.com/ru/tools/funnel-chart-generator): Генерировать настраиваемые воронкообразные диаграммы из данных, идеально подходит для отображения коэффициентов конверсии, воронок продаж и потоков процессов

## Примеры

- [Примеры Расширенного Применения Grafana](https://elysiatools.com/ru/samples/grafana-samples): Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов
- [Примеры QR-кодов](https://elysiatools.com/ru/samples/qrcode-samples): Примерные изображения QR-кодов для тестирования инструментов чтения и генерации QR-кодов
- [Примеры D3.js Визуализации Данных](https://elysiatools.com/ru/samples/d3js-data-visualization): Комплексные примеры визуализации данных D3.js, включая диаграммы, карты, анимации и интерактивные визуализации
- [Примеры JavaScript Toolchain Rome](https://elysiatools.com/ru/samples/rome): Примеры JavaScript toolchain Rome, включая конфигурацию, линтинг, форматирование, сборку и управление проектами

## Связанные материалы

- [Генераторы графиков и диаграмм](https://elysiatools.com/ru/hubs/chart-diagram-generators): Выберите визуализацию для понятного представления сравнений, распределений, иерархий, связей и расписаний.