반응형
https://www.chartjs.org/docs/latest/getting-started/
차트 작성법은 뭐 대충 이렇고
레이다 차트의 속성이 중요하다.
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
);
});
내용 찾기가 꽤 까다로워서 좀... 고생했다.
특히 라벨의 숫자 배경 색빼는 부분은 없어서 더 어려웠다.
728x90
'취업 > Chart.js' 카테고리의 다른 글
[Chart.JS]Line Chart Boundaries 라벨붙이기2 (0) | 2022.10.25 |
---|---|
[Chart.JS]Line Chart Boundaries 라벨붙이기 (0) | 2022.10.25 |
[chart.js] Radar 차트 마지막 외곽선만 두껍게 하기 (0) | 2022.10.17 |
[chart.js] 차트 그래프 내의 value값 표시하기. (0) | 2022.02.09 |
[php] chart.js radar chart(방사형 차트, 원형차트) 마지막 테두리 두껍게 하기 (0) | 2021.11.08 |