Как создание лепестковую диаграмму (radar chart)?

Question

Dontworrys @Dontworrys

Как создание лепестковую диаграмму (radar chart)?

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

На данный момент использую chartjs.org (https://cdn.jsdelivr.net/npm/chart.js)
Но на сколько я понял она этого не позволяет (она меняется автоматически после изменения данных, а мне это не нужно)

Пример того чего я хочу:

Вопрос задан 16 нояб.
137 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

Dontworrys @Dontworrys Автор вопроса

Да, но у меня не понятно почему но оно не хочет рисовать нормально

<!DOCTYPE html>
<html lang="ru">
<head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="chart-container" style="position: absolute; top: 100px; left: 100px; background-color: rgba(0, 200,144, 0.4);">
        <canvas id="myRadarChart" width="500" height="500"></canvas>
    </div>

    
    <script>
        var chart = (500 - 200) / 2;
        
        const ctx = document.getElementById('myRadarChart').getContext('2d');

        const data = {
            labels: ["а", "б", "в", 'г', 'д', 'е', "ж", "з"],
            datasets: [{
                data: [20, 30, 10, 45, 45, 45, 45 ,110,], backgroundColor: 'rgba(0, 144, 0, 0.6)',
                pointBorderWidth: 10, pointBorderColor: 'rgba(255, 144, 0, 0.6)'
            }]
        };

        const config = {
            type: 'radar',
            data: data,
            options: {
                scales: {
                    r: {
                        min: 0,
                        max: 50, // Зафиксируйте максимальное значение
                        ticks: {
                            display: false,
                            stepSize: 9 // размер шага на оси
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false,
                    }
                },        
                layout: {
                    padding: {
                        left: chart,
                        right: chart,
                        top: chart,
                        bottom: chart
                    }
                },
                responsive: false // Если не хотите, чтобы диаграмма менялась
            }
        };

        const myRadarChart = new Chart(ctx, config);
    </script>
</body>
</html>

Написано 16 нояб.

Олег @402d

https://github.com/chartjs/Chart.js/blob/bb82c8f54...

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

Написано 16 нояб.
Dontworrys @Dontworrys Автор вопроса

Олег, не особо в этом понимаю, сможете помочь это решить?

Написано 16 нояб.
Олег @402d

Dontworrys, вам на https://freelance.habr.com/

Написано 16 нояб.
ProjectSoft @ProjectSoft

Dontworrys, ну так рассчитывайте масштаб изображения, задавайте нужные цвета. Всё есть в примерах.
Не нужно тупо копировать и пытаться что-то подогнать. Нужно понять и разобраться с параметрами и данными.
Вот вы, чётко установили отступы у рисунка в 150, а оно вам нужно именно такое значение? Может просто задать, к примеру, 50? А далее уже смотреть на пришедшие данные и задавать максимальное значение, чтобы не вылетало за область видимости.
Тут нет магии, только математика.
Ну и смотреть - https://www.chartjs.org/docs/latest/samples/other-...

Написано 17 нояб.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 45 минут назад
- 30 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как настроить CORS .NET 8?
- 1 подписчик
- 3 часа назад
- 22 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 17 часов назад
- 94 просмотра
0

ответов
JavaScript

Простой
Как отправить данные JSON полученные в fetch в html таблицу?
- 1 подписчик
- 20 часов назад
- 80 просмотров
0

ответов
HTML

Простой
Как записать кол-во успешных прохождений капчи/пароля на js?
- 1 подписчик
- 23 часа назад
- 68 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 138 просмотров
0

ответов
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 206 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 99 просмотров
1

ответ
JavaScript

Простой
Как исправить ошибку «Uncaught ReferenceError: $ is not defined» хотя jQuery подключен?
- 1 подписчик
- вчера
- 82 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как убрать экспоненциальную запись числа в input type=number?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Парсинг данных с сайта

18 дек. 2024, в 12:39

1000 руб./за проект

Создание сайта с chatGPT

18 дек. 2024, в 12:37

10000 руб./за проект

Wordpress+Elementor правки

18 дек. 2024, в 12:22

5000 руб./за проект

Answer 1 · 2024-11-16 09:43:36

Вы же понимаете, что рисуете на canvas? Выйти за неё нельзя. Значит нужно ограничить отрисовку сетки до заданного максимума, а не до фактического, который будет использоваться для расчёта масштаба

Как создание лепестковую диаграмму (radar chart)?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт