[php] chart.js radar chart(방사형 차트, 원형차트) 마지막 테두리 두껍게 하기

+++

2022-10-28

 

해당 코드로 자동으로 들어가게 수정했습니다

2022.10.17 - [취업/Chart.js] - [chart.js] Radar 차트 마지막 외곽선만 두껍게 하기

[chart.js] Radar 차트 마지막 외곽선만 두껍게 하기

 

본문보다 위의 링크를 참조하시기 바랍니다.

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',
                        lineWidth: context => context.index == 9 ? "3" : "1"
                    },
                    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
        );
    });

gridLines인데, 내 경우 안 먹어서... grid로 하니 먹더라.

 

이건데 실제로는 작동이 되는데 jsfiddle은 안먹네...인줄 알았는데 흰색이라 안보였던 것..

jsfiddle에서는 블랙으로 바꾸어놨다.

https://jsfiddle.net/5acegk8v/3/

Edit fiddle - JSFiddle - Code Playground

 

참고자료

https://stackoverflow.com/questions/63775419/changing-borderdash-for-specific-gridlines-in-radar-chart

Changing borderDash for specific gridLines in radar chart