Категории

Генератор Ступенчатого Графика

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

Точки данных как массив JSON со свойствами x, y и необязательной меткой

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

Метка для оси X

Метка для оси Y

Цвет ступенчатой линии

Ширина ступенчатой линии в пикселях

Цвет точек данных

Размер точек данных в пикселях

Отображать точки данных на ступенчатой линии

Отображать метки значений на точках данных

Отображать линии фоновой сетки

Заполнить область под ступенчатой линией цветом

Цвет заливки области (если включено)

Цвет линий сетки

Цвет фона графика

Ширина графика в пикселях

Высота графика в пикселях

Размер шрифта для меток и текста

Размер шрифта для заголовка графика

Семейство шрифтов для текстовых элементов

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

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

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

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

Обзор

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

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

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

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

  • Введите данные в формате JSON, указав координаты x и y для каждой точки.
  • Выберите стиль отображения ступеней (до, после или по центру) в зависимости от логики ваших данных.
  • Настройте визуальные параметры: цвета линии, размер точек, наличие сетки и заливку области.
  • Сгенерируйте готовый график, который можно использовать в отчетах или презентациях.

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

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

Примеры

1. Мониторинг цен на товар

Аналитик маркетплейса
Контекст
Необходимо показать клиенту, как менялась цена на популярный товар в течение квартала.
Проблема
Обычный линейный график создает ложное впечатление плавного изменения цены, хотя она менялась скачками.
Как использовать
Вставить данные о ценах в JSON-формате и выбрать стиль 'Ступень До', чтобы показать точные моменты изменения стоимости.
Пример конфигурации
[{"x": "Янв", "y": 1500}, {"x": "Фев", "y": 1800}, {"x": "Мар", "y": 1650}]
Результат
Четкий график, наглядно демонстрирующий периоды действия каждой цены.

2. Уровень запасов на складе

Менеджер по логистике
Контекст
Требуется отчет по остаткам сырья, которые пополняются и расходуются дискретными партиями.
Проблема
Нужно визуально выделить периоды, когда уровень запасов оставался неизменным.
Как использовать
Использовать инструмент с включенной заливкой области под линией для лучшей читаемости объема остатков.
Пример конфигурации
{"stepStyle": "step-after", "fillArea": true, "lineColor": "#10b981"}
Результат
Информативный график, где закрашенная область наглядно показывает объем доступных ресурсов во времени.

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

json, text

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

FAQ

Что такое ступенчатый график?

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

В каком формате нужно вводить данные?

Данные вводятся в виде массива JSON объектов, содержащих параметры x (ось времени/категорий) и y (значение).

Можно ли настроить внешний вид графика?

Да, вы можете менять цвета линии и точек, ширину линии, размер шрифтов, а также включать или отключать сетку и заливку области.

Что означают стили ступеней?

Стили определяют, в какой точке происходит переход: 'Ступень До' меняет значение в начале интервала, 'Ступень После' — в конце, а 'Ступень Середина' — посередине.

Подходит ли этот инструмент для больших наборов данных?

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

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

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

POST /ru/api/tools/step-chart-generator

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

Имя параметра Тип Обязательно Описание
chartTitle text Нет Заголовок, который будет отображаться над ступенчатым графиком
dataPoints textarea Да Точки данных как массив JSON со свойствами x, y и необязательной меткой
xAxisLabel text Нет Метка для оси X
yAxisLabel text Нет Метка для оси Y
stepStyle select Да -
lineColor color Нет Цвет ступенчатой линии
lineWidth number Нет Ширина ступенчатой линии в пикселях
pointColor color Нет Цвет точек данных
pointSize number Нет Размер точек данных в пикселях
showDataPoints checkbox Нет Отображать точки данных на ступенчатой линии
showLabels checkbox Нет Отображать метки значений на точках данных
showGrid checkbox Нет Отображать линии фоновой сетки
fillArea checkbox Нет Заполнить область под ступенчатой линией цветом
areaColor color Нет Цвет заливки области (если включено)
gridColor color Нет Цвет линий сетки
backgroundColor color Нет Цвет фона графика
chartWidth number Нет Ширина графика в пикселях
chartHeight number Нет Высота графика в пикселях
dataLabelFormat select Нет -
fontSize number Нет Размер шрифта для меток и текста
titleSize number Нет Размер шрифта для заголовка графика
fontFamily text Нет Семейство шрифтов для текстовых элементов
animationEnabled checkbox Нет Анимировать график при загрузке
animationDuration number Нет Длительность анимации в миллисекундах

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

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

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

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

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