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

Question

Dontworrys @Dontworrys

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

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

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

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

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

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

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

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Яндекс Практикум

Мидл фронтенд-разработчик

5 месяцев

Далее
Stepik

JavaScript с нуля - основы языка и практика для начинающих

2 недели

Далее
Merion Academy

Фронтенд-разработчик с нуля

4 месяца

Далее
Skypro

JavaScript-разработчик с нуля

9 месяцев

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее
Skillbox

JavaScript

3 месяца

Далее

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

Ответы на вопрос 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 нояб. 2024

Олег @402d

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 88 просмотров
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 141 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как решить задачку из контеста?
- 1 подписчик
- 13 окт.
- 228 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Есть ли js-библиотека для офлайн-распознавания русской речи?
- 1 подписчик
- 12 окт.
- 161 просмотр
2

ответа
JavaScript

Простой
Почему не работает в консоли setTimeout?
- 1 подписчик
- 11 окт.
- 321 просмотр
1

ответ
HTML

+1 ещё

Простой
Как в руководстве steam сделать обтекающий картинку текст?
- 1 подписчик
- 08 окт.
- 123 просмотра
1

ответ
HTML

+1 ещё

Средний
Скачал плагин image preview в вс коде, чтобы установить иконку сайта. Иконка появилась в браузере, но не появилась слева напротив строки. Почему так?
- 1 подписчик
- 30 сент.
- 142 просмотра
1

ответ
JavaScript

Простой
Как прочитать ответ сервера после отправки формы?
- 2 подписчика
- 27 сент.
- 286 просмотров
1

ответ
HTML

+1 ещё

Простой
От какой технической характеристики компьютера зависит скорость работы сайта, указанного ниже?
- 1 подписчик
- 24 сент.
- 450 просмотров
2

ответа
HTML

+1 ещё

Простой
Как убрать линии у бейджиков в Markdown?
- 1 подписчик
- 23 сент.
- 201 просмотр
1

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

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

React разработчик

ITK academy • Нижний Новгород

от 80 000 до 120 000 ₽

React Developer

ITK academy • Воронеж

от 50 000 до 90 000 ₽

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

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

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

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

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

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