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

Question

Dontworrys @Dontworrys

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

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

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

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

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

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

Подписаться 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

Простой
Почему meta charset="utf-8"/ работает только если сместить кавычку на meta «charset=utf-8»?
- 1 подписчик
- 5 часов назад
- 91 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как исправить торможение скролла jquery в framework Blazor WASM?
- 1 подписчик
- 5 часов назад
- 21 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как в Owl Carousel 2 задать отступ в rem?
- 1 подписчик
- 5 часов назад
- 8 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Какие советы помогут стать FullStack-developer?
- 1 подписчик
- 14 часов назад
- 144 просмотра
2

ответа
JavaScript

+2 ещё

Простой
Как сделать Date picker кастомный html/qjuery?
- 2 подписчика
- 20 часов назад
- 134 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать, чтобы в фиксированном меню менялся цвет текста при скролле?
- 1 подписчик
- вчера
- 83 просмотра
1

ответ
HTML

+1 ещё

Простой
Не работает margin 0 auto, в чем может быть проблема?
- 1 подписчик
- вчера
- 62 просмотра
0

ответов
JavaScript

+1 ещё

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

ответ
HTML

+1 ещё

Простой
При попытке адаптации сайта весь сайт сжимается в левую сторону, в чем может быть проблема?
- 1 подписчик
- вчера
- 101 просмотр
1

ответ
JavaScript

Средний
Чем отличается функция от конструктора и где применять то или это?
- 1 подписчик
- 30 нояб.
- 1259 просмотров
4

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

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

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Скрыть рекламу в Youtube с помощью VPN

02 дек. 2024, в 17:01

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

Доработать веб-приложение | Java, Spring, DynamoDB, JS (React)

02 дек. 2024, в 16:56

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

Развернуть и настроить OAuth2 Proxy

02 дек. 2024, в 16:45

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

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

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

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

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

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

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