chart js 방사형 차트 설정 도와주실 분 구합니다...
본문
안녕하세요.
chart js 사이트, 구글링하면서 연구해봤는데, 뭔가 제가 원하는 형태로 안 나오네요;
발그림 죄송합니다;; 약간 이런 느낌이요.
능력치가 0이거나 10이 안되어도 차트 크기가 유지되었으면 좋겠습니다.
그리고 원래 모양에서 보이는 4랑 6이 좀 사라졌으면 좋겠습니다. 근데 도대체 안 사라지네요.. 무슨 옵션을 넣어야 사라질까요..;;
현재 옵션 코드는 이렇고요
options: {
responsive: false,
scale: { // 레이더 차트처럼 축이 1개일 경우, scales를 쓰면 안됨. by 네이버 : huckcopy
ticks: {
beginAtZero: true,
min: 0, // 축 최소 값
max: 10, // 축 최대 값
stepSize: 2, // 그리드 간격 값
display: false, // 그리드 숫자 숨기기
}
},
plugins: {
legend: {
display: false //차트 이름 숨기기
}
}
}
능력치 치수는 이렇습니다
근력 5
체력 2
지력 5
의지 8
운 5
속성 6
고수님들 답변 부탁드려요...!!!!
답변 2
const config = {
type: 'radar',
data: {
labels:[
'근력','체력','지력','의지','운','속성'
],
datasets:[
{
label: 'D0',
data: [5,2,5,8,5,0],
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
},
]
},
options: {
scales:{
r: {
min: -5,
max: 10,
beginAtZero: true,
angleLines: {
display: false
},
ticks: {
display: false,
stepSize: 2
}
}
},
plugins: {
legend:{
display:false
},
filler: {
propagate: false
},
'samples-filler-analyser': {
target: 'chart-analyser'
}
},
interaction: {
intersect: false
}
}
};
https://www.chartjs.org/docs/latest/samples/area/radar.html
위의 사이트에서 테스트 했었고 문제는 능력치가 0이나 10이 안 되어도 차트 크기가 유지되면 좋겠다?
아마 0인 경우를 말씀하시는거 같은데 min을 -값으로 넣는것으로 어느정도 나오는것 같더라구요. 정확히는 차트가 유지되는건 아니고 크기를 강제로 시키는듯 합니다.
나머지는 직접 테스트하고 검색하셔서 더 찾아야 할듯 하네요..(저도 궁금해서 한 30~40분 한듯한데 못찾았음 ㅠㅠ)
그리고 찾다보니 scale말고 scales를 쓰고 r값으로 접근을 하더라구요. 저것도 참조 하시구요
추가로
//min: -5,
max: 10,
이렇게 해야 stepSize가 제대로 동작하네요(원인은 정확히 모르겠음...)
+추가
min으로 출력되는 그래프의 최소값이 -5가 되면서 stepSize가 2가 되니깐 제대로 동작하지 않는 것 처럼 보이는 현상(정상임)
보다보니 수치가 0이면 그래프도 0인 형태로 나와야 하는게 아닌가...라는 생각이 드네요.
+추가
r로 접근하는 것에 대해서 왜 그런지를 알려면 여기로...
https://www.chartjs.org/docs/latest/axes/
+추가
어쨌든 그래프를 0인데도 아닌듯이 보이게 하시려면 tooltip에 나오는 숫자와 그래프에 그려지는 숫자를 다르게 되도록 세팅해서 callback을 이용해서 출력 하시면 될듯합니다.
예를 들면
그래프 출력용 변수 하나를 만들고 그 안에 값을 넣고, 그래프 데이터에는 0인것의 이전 값과 다음값을 찾아서 중간값을 계산하고 그 값으로 변경 하는 것입니다.
이렇게 세팅을 하고 tooltip에서는 callback을 이용해서 출력용 변수로 출력 하는거죠.
이 방법으로 가셔야 할듯 하네요.
일이 바빠 아직 시도해보지는 못했습니다만, 너무 감사드립니다 ㅜㅜㅜ
성공하게 되면 알려드리겠습니다
넵
1. 제일 처음 드린 코드
2. 일부 주석 처리
//min: -5,
max: 10,
3. 마지막에 +추가로 드린 내용 참조해서 개발
- 마지막 글이 조금 읽기 어려운거 같은데 그냥 tooltip에 출력할때는 다른값으로 출력을 시키고 그래프에는 점과 점사이의 값으로 데이터를(미리 계산해놓은) 넣는다는 말 입니다.
이렇게 순서대로 처리하시면 될거에요.
너무 늦게까지 하지마시고 건강도 챙기시죠...화이팅!!
마지막에 응원의 말씀까지.. 감사합니다.
어릴 때 이런 컴퓨터 직업은 무조건 두뇌가 좋아야한다고 생각했는데, 몸 상태가 좋아야 머리도 굴러가더라고요...하이바네님도 건강하셔요.
답변해주신 거 참고해서 완성했습니다! 감사합니다!
