График
Паутина
Радар сравнивает профиль целиком: форма многоугольника показывает, где просели относительно остального, а пунктирный контур держит эталон для сравнения.
Что можно поменять
- оси через axes: label и value от 0 до 100 у каждой
- контур сравнения через compare — длина обязана совпадать с числом осей
- подписи легенды через seriesLabel и compareLabel
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/chart-027?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра --vibeui-chart-027-*. Серверный. Точки считаются тригонометрией от центра: первый луч смотрит вверх, дальше по часовой стрелке. Сетка — три концентрических многоугольника той же формы, что и данные, поэтому уровни читаются вдоль лучей. Подписи осей прижимаются по стороне: справа start, слева end, сверху и снизу middle — иначе левые подписи налезают на фигуру. Второй контур рисуется пунктиром и появляется, только если длина compare совпадает с числом осей. Значения задаются в процентах от края паутины: общая шкала обязательна, иначе форма ничего не значит. Данные продублированы скрытой таблицей, SVG помечен aria-hidden. Живость: многоугольник раскрывается из центра, узлы выскакивают, наведение на ось подсвечивает значение; reduced-motion показывает всё сразу; animate=false выключает.
Теги
- chart
- radar
- comparison
- profile
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…