반응형
+++
2022-10-28
해당 코드로 자동으로 들어가게 수정했습니다
2022.10.17 - [취업/Chart.js] - [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/
참고자료
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 |