Категории

← View All Tools

Генератор Прогресс-баров

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

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

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

Цвета для прогресс-баров (шестнадцатеричные цвета через запятую). Оставьте пустым для цветов по умолчанию.

Высота горизонтальных баров или ширина вертикальных баров в пикселях

Максимальное значение для шкалы прогресса (оставьте пустым для автоматического масштабирования)

Минимальное значение для шкалы прогресса

Целевое значение для отображения в качестве опорной линии

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

Отображать процентные значения на прогресс-барах

Отображать фактические значения на прогресс-барах

Анимировать прогресс-бары при загрузке

Использовать скругленные углы для прогресс-баров

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

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

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

Обзор

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

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

  • •Когда нужно визуализировать процент выполнения задач или проектов для отчетов.
  • •Для создания наглядных рейтингов или сравнительных таблиц эффективности.
  • •Когда требуется быстро превратить текстовые или JSON-данные в готовый графический элемент.

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

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

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

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

Примеры

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

Менеджер проекта
Контекст
Необходимо еженедельно показывать руководству статус выполнения четырех ключевых этапов проекта.
Проблема
Нужно быстро создать понятную визуализацию, которая показывает, какие этапы близки к завершению, а какие отстают.
Как использовать
Вставить данные в формате «Этап:процент» и выбрать стиль «Градиент» с включенным отображением процентов.
Пример конфигурации
orientation: horizontal, barStyle: gradient, showPercentage: true
Результат
Готовый набор прогресс-баров с градиентной заливкой, наглядно демонстрирующий текущий статус каждого этапа.

2. Рейтинг эффективности сотрудников

HR-специалист
Контекст
Требуется сравнить показатели эффективности пяти сотрудников на основе балльной системы.
Проблема
Сложно воспринимать сухие цифры в таблице, нужно наглядное сравнение в виде рейтинга.
Как использовать
Использовать JSON-массив с именами сотрудников и их баллами, установив целевое значение для визуального ориентира.
Пример конфигурации
orientation: vertical, barStyle: solid, showTarget: true, targetValue: 80
Результат
Вертикальная диаграмма, где каждый бар показывает результат сотрудника относительно целевой линии в 80 баллов.

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

json, text
PDF Примеры
PDF примеры, созданные инструментами 2026-02-01..2026-02-10
preferred input family json
json
Примеры Анализа Логов ELK Stack
Комплексные примеры ELK Stack для агрегации, обработки и визуализации логов в распределенных системах
preferred input family json
json
Примеры QR-кодов
Примерные изображения QR-кодов для тестирования инструментов чтения и генерации QR-кодов
preferred input family json
json
Примеры Hex/Unicode Конвертера
Тестовые примеры для преобразования hex и unicode escape-последовательностей
preferred input family json
json

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

Инструменты Json для Convert
Изучите 100 инструментов json для сценариев convert и быстро сравните близкие утилиты.
Инструменты Text для Convert
Изучите 80 инструментов text для сценариев convert и быстро сравните близкие утилиты.
Инструменты Json
Изучите 43 инструментов json для сценариев utility и быстро сравните близкие утилиты.
Инструменты Text
Изучите 33 инструментов text для сценариев utility и быстро сравните близкие утилиты.

FAQ

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

Инструмент поддерживает массив JSON (например, [{"label": "Задача", "value": 50}]) или простой текстовый формат «метка:значение».

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

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

Как работает автоматическое масштабирование?

Если не указать максимальное значение, инструмент автоматически определит масштаб на основе самого большого числа в ваших данных.

Можно ли сделать прогресс-бары вертикальными?

Да, в настройках ориентации выберите «Вертикальная», чтобы изменить направление отображения баров.

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

Да, вы можете включить опцию «Анимированный прогресс», чтобы бары плавно заполнялись при загрузке страницы.

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

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

POST /ru/api/tools/progress-bar-generator

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

Имя параметра Тип Обязательно Описание
chartData textarea Да Данные для прогресс-баров. Поддерживает массив JSON или простой формат текста метка:значение
chartTitle text Нет Заголовок, который будет отображаться над диаграммой
orientation select Нет -
barStyle select Нет -
barColors text Нет Цвета для прогресс-баров (шестнадцатеричные цвета через запятую). Оставьте пустым для цветов по умолчанию.
barHeight number Нет Высота горизонтальных баров или ширина вертикальных баров в пикселях
maxValue number Нет Максимальное значение для шкалы прогресса (оставьте пустым для автоматического масштабирования)
minValue number Нет Минимальное значение для шкалы прогресса
targetValue number Нет Целевое значение для отображения в качестве опорной линии
backgroundColor color Нет Цвет фона для контейнера диаграммы
showPercentage checkbox Нет Отображать процентные значения на прогресс-барах
showValues checkbox Нет Отображать фактические значения на прогресс-барах
animated checkbox Нет Анимировать прогресс-бары при загрузке
rounded checkbox Нет Использовать скругленные углы для прогресс-баров
showTarget checkbox Нет Отображать опорную линию для целевого значения

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

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

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

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

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