[php] chart.js 레이다 차트(radar chart) 작성하기

https://www.chartjs.org/docs/latest/getting-started/

Getting Started | Chart.js

차트 작성법은 뭐 대충 이렇고

레이다 차트의 속성이 중요하다.

const radarData = {
        labels: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
        ],
        datasets: [{
            data: [265, 159, 390, 181, 256, 255],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
    };
    
    const config = {
        type: 'radar',
        data: radarData,
        options: {
            scales: {
                r: {
                	suggestedMin: 0,
                    suggestedMax: 100,
                    stepSize: 10,
                    grid: {
                        color: 'white' // 거미줄 중간 중간 선 색상
                    },
                    ticks: {
                        beginAtZero: true,
                        color: 'white',
                        showLabelBackdrop: false // hide square behind text // 이부분이 숫자 label의 배경 부분.
                    },
                    angleLines: {
                        color: 'white' // 중심에서 라벨까지 줄 색상
                    },
                    pointLabels: {
                        color: 'white', // 라벨의 글씨 색상
                    }
                },
            },
            plugins:{
                legend:{
                    display:false // 최상단 라벨의 카테고리 안보이기.
                }
            }
        },
    };

    
    const myChart = new Chart(
        $('#myChart'),
        config
        );
    });

내용 찾기가 꽤 까다로워서 좀... 고생했다.

특히 라벨의 숫자 배경 색빼는 부분은 없어서 더 어려웠다.