Графики
Лепестковая диаграмма
Радар сравнивает профиль целиком: форма многоугольника показывает, где просели относительно остального, а пунктирный контур держит эталон для сравнения.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- оси через axes: label и value от 0 до 100 у каждой
- контур сравнения через compare — длина обязана совпадать с числом осей
- подписи легенды через seriesLabel и compareLabel
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/chart-027?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Chart027
title="Профиль продукта"
axes={[{ label: "Скорость", value: 82 }, { label: "Цена", value: 47 }]}
compare={[70, 70]}
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Заголовок
title· по умолчанию: Профиль продукта- Подпись контура
seriesLabel· по умолчанию: Наш продукт- Акцент
accent· по умолчанию: цвет темы- Фон
background· по умолчанию: цвет темы- Анимация появления
animate· по умолчанию: включено
Ещё в разделе «Графики»
Частые вопросы
- Как установить компонент «Лепестковая диаграмма» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Лепестковая диаграмма»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Лепестковая диаграмма»?
- Можно менять: оси через axes: label и value от 0 до 100 у каждой; контур сравнения через compare — длина обязана совпадать с числом осей; подписи легенды через seriesLabel и compareLabel. Сохранить как есть: локальную палитру --vibeui-chart-027-*: компонент обязан выглядеть одинаково в любом проекте; скрытую таблицу данных: SVG помечен aria-hidden, и без неё график недоступен экранному диктору; общую шкалу 0…100 для всех осей — на разных шкалах форма многоугольника теряет смысл.
- Компонент «Лепестковая диаграмма» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/chart-027.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Один файл, ноль зависимостей, палитра --vibeui-chart-027-*. Серверный. Точки считаются тригонометрией от центра: первый луч смотрит вверх, дальше по часовой стрелке. Сетка — три концентрических многоугольника той же формы, что и данные, поэтому уровни читаются вдоль лучей. Подписи осей прижимаются по стороне: справа start, слева end, сверху и снизу middle — иначе левые подписи налезают на фигуру. Второй контур рисуется пунктиром и появляется, только если длина compare совпадает с числом осей. Значения задаются в процентах от края паутины: общая шкала обязательна, иначе форма ничего не значит. Данные продублированы скрытой таблицей, SVG помечен aria-hidden. Живость: многоугольник раскрывается из центра, узлы выскакивают, наведение на ось подсвечивает значение; reduced-motion показывает всё сразу; animate=false выключает.
Теги
- chart
- radar
- comparison
- profile
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…