CHART.JS / ДАННЫЕ → ПОНЯТНЫЙ ГРАФИК

Соберите свой график

Введите значения, выберите представление и сравните результат с таблицей. Заберите картинку для отчёта или HTML, который продолжит работать отдельно.

Попробуйте: в исходных данных всего 100 заявок. Замените 12 на 20 у понедельника — итог станет 108. Переключите столбцы на линию, затем на кольцо: числа останутся прежними, изменится способ сравнения.

1. Настройте данные

Локально в браузере

Числа демонстрационные. Изменения применяются сразу и никуда не отправляются.

Название графика

Единицы измерения

Тип графика

Цветовая палитра

Показывать легенду

Плавное обновление

Значения графика

До 12 строк. Значение от 0 до 1 000 000, не более двух знаков после запятой. Подписи — до 24 символов. Для кольца нужны неотрицательные числа.

К графику ↓

2. Смотрите результат

Chart.js 4.6.1

К настройкам ↑

Сумма всех значений—

Наибольшее значение—

PNG содержит график с белым фоном, заголовком и единицами. Таблица остаётся в HTML.

Те же числа в таблице

Таблица доступна с клавиатуры и программам чтения с экрана. Доля считается от суммы всех введённых значений.

Данные графика
Подпись	Значение	Доля

Что меняет Chart.js

type выбирает представление, data.labels задаёт подписи, datasets[0].data — значения. Наш код проверяет ввод и пересчитывает таблицу; библиотека рисует график.

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

ЗАБРАТЬ СВОЙ ВАРИАНТ

3. Данные, конфигурация и HTML

JSON конфигурации содержит параметры и данные. Обработчики событий, проверка полей и белый фон PNG — отдельный JavaScript. Полный HTML включает всё необходимое, Chart.js и стили; его можно открыть без интернета.

Что показать

Все исходники ZIP ↗

Изменения живут в этой вкладке до перезагрузки. Скачанный HTML запоминает ваш вариант: его сброс возвращает данные на момент экспорта.