Категории

← View All Tools

Генератор Столбчатой Диаграммы с Накоплением

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

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

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

Массив JSON шестнадцатеричных цветов (требует выбора пользовательских цветов)

Высота диаграммы в пикселях (мин: 300, макс: 800)

Расстояние между столбцами (0.1 - 0.5)

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

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

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

Отображать горизонтальные линии сетки

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

Показывать проценты вместо значений на столбцах

Показывать подробную информацию при наведении

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

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

Обзор

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

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

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

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

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

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

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

Примеры

1. Анализ Продаж по Кварталам

Аналитик продаж
Контекст
Компания имеет данные о продажах четырех продуктов за два квартала в табличном виде.
Проблема
Нужно быстро сравнить вклад каждого продукта в общие продажи по кварталам без ручного построения графиков.
Как использовать
Загрузите JSON данные с категориями 'Q1' и 'Q2', рядами 'Product A', 'Product B' и значениями продаж.
Пример конфигурации
Установите заголовок 'Продажи по Кварталам', выберите яркую цветовую схему и включите отображение значений на столбцах.
Результат
Диаграмма показывает накопленные продажи, позволяя легко увидеть долю каждого продукта в каждом квартале для принятия решений.

2. Визуализация Бюджета Отдела

Контекст
Финансовый отдел составляет отчет о распределении бюджета по категориям расходов за год.
Проблема
Необходимо представить данные о расходах в наглядном виде для презентации руководству.
Как использовать
Введите данные о расходах в JSON, где категории — это кварталы, ряды — типы расходов (например, 'Маркетинг', 'Разработка').
Пример конфигурации
Настройте формат значений как валюту, добавьте легенду и сетку для лучшей читаемости.
Результат
Интерактивная диаграмма с накоплением помогает быстро оценить структуру расходов и выявить тренды по кварталам.

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

json
Примеры Расширенного Применения Grafana
Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов
preferred input family json
json
Примеры D3.js Визуализации Данных
Комплексные примеры визуализации данных D3.js, включая диаграммы, карты, анимации и интерактивные визуализации
preferred input family json
json
PDF Примеры
PDF примеры, созданные инструментами 2026-02-01..2026-02-10
preferred input family json
json
Примеры Коммуникации WebRTC в Реальном Времени
Комплексные примеры WebRTC для P2P аудио/видео коммуникации, каналов данных, обмена экраном и сервера сигнализации
preferred input family json
json

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

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

FAQ

Какой формат данных требуется для диаграммы?

Данные должны быть в формате JSON с обязательными полями: category (категория), series (ряд) и value (значение).

Можно ли изменить цвета столбцов?

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

Как отобразить проценты вместо числовых значений?

Включите опцию 'Показать проценты' в настройках, чтобы значения на столбцах отображались в процентах.

Какова максимальная высота диаграммы?

Высота диаграммы может быть установлена от 300 до 800 пикселей в настройках.

Поддерживает ли диаграмма анимацию при загрузке?

Да, можно включить анимацию столбцов с помощью опции 'Показать анимацию' для плавного появления.

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

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

POST /ru/api/tools/stacked-bar-chart

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

Имя параметра Тип Обязательно Описание
chartData textarea Да Данные для столбчатой диаграммы с накоплением в формате JSON с полями категория, ряд и значение
chartTitle text Нет Заголовок, который будет отображаться над диаграммой
colorScheme select Нет -
customColors textarea Нет Массив JSON шестнадцатеричных цветов (требует выбора пользовательских цветов)
valueFormat select Нет -
chartHeight number Нет Высота диаграммы в пикселях (мин: 300, макс: 800)
barSpacing number Нет Расстояние между столбцами (0.1 - 0.5)
backgroundColor color Нет Цвет фона для контейнера диаграммы
showValues checkbox Нет Отображать значения или проценты на столбцах
showLegend checkbox Нет Отображать цветовую легенду для рядов
showGrid checkbox Нет Отображать горизонтальные линии сетки
showAnimation checkbox Нет Анимировать столбцы при загрузке диаграммы
showPercentage checkbox Нет Показывать проценты вместо значений на столбцах
enableTooltip checkbox Нет Показывать подробную информацию при наведении

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

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

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

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

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