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

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

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

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

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

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

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

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

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

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

Elysia Tools

Навигация

Data Visualization

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

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

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Ввод

Параметры сгруппированы, чтобы длинные формы было проще просматривать.

12 параметров

СодержимоеВставьте или введите основные значения.3

Данные ПрогрессаtextareaОбязательноЗначения прогресса (0-100). Поддерживает массив JSON с метками, простые пары метка:значение или только значенияЗаголовок ДиаграммыtextНеобязательноЗаголовок, который будет отображаться над диаграммойПользовательские ЦветаtextНеобязательноПользовательские цвета для колец прогресса (шестнадцатеричные цвета через запятую)

НастройкиНастройте форматы, диапазоны, числа и режимы.6

Размер КольцаnumberНеобязательноРазмер каждого кольца прогресса в пикселяхТолщина КольцаnumberНеобязательноТолщина штриха кольца прогрессаНачальный УголnumberНеобязательноНачальный угол в градусах (-90 = сверху, 0 = справа, 90 = снизу, 180 = слева)Цветовая СхемаselectНеобязательноДлительность АнимацииnumberНеобязательноДлительность анимации прогресса в миллисекундахЦвет ФонаcolorНеобязательноЦвет фона для контейнера диаграммы

ПереключателиВключайте или отключайте дополнительные режимы.3

Показать ПроцентыcheckboxНеобязательноВключено, если отмеченоОтображать значение процента в центре каждого кольцаПоказать МеткуcheckboxНеобязательноВключено, если отмеченоОтображать метку под каждым кольцом прогрессаАнимированныйcheckboxНеобязательноВключено, если отмеченоАнимировать кольца прогресса при загрузке

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

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

Запустить этот инструмент

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

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

Обзор

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

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

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

Примеры

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

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

FAQ

Примеры Расширенного Применения Grafana

Примеры QR-кодов

Примеры D3.js Визуализации Данных

Примеры JavaScript Toolchain Rome

График Рейтинговых Звезд

Генератор Розовой Диаграммы

Генератор Потокового Графика

Генератор Временной Шкалы

Генераторы диаграмм и графиков

Генераторы JSON-схем, mock-данных и API-fixture

Генераторы типизированного кода из JSON (TypeScript, Go, Rust, Kotlin, Java, C#)

Инструменты JSON-обмена и перевода форматов