Задать вопрос

Dontworrys

Комментарии

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

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

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

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

    6738433b9bac5087330303.jpeg

    <!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>
    Написано