Radar

한 데이터셋의 여러 지표를 이차원 캔버스 위에서 견주어 보는 레이더 차트입니다.

이럴 때 쓰세요. 한 데이터셋의 여러 지표를 비교할 레이더 차트가 필요할 때. 축 이름과 점수의 JSON 배열을 abilitys 어트리뷰트로 <r-radar>에 넘기세요.

빠른 시작

기본 사용법

데이터는 abilitys 어트리뷰트에 JSON 문자열(객체 배열)로 넘깁니다. HTML 어트리뷰트는 문자열만 담을 수 있으므로 값은 올바른 JSON이어야 하고, 내부에서 JSON.parse로 해석됩니다. <r-radar> 호스트는 고유 크기가 없으니 너비와 높이를 명시적으로 주세요.

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"체력","scoreRate":"10"},{"abilityName":"공격력","scoreRate":"90"},{"abilityName":"방어력","scoreRate":"20"},{"abilityName":"원소 마스터리","scoreRate":"50"},{"abilityName":"치명타 확률","scoreRate":"80"},{"abilityName":"치명타 피해","scoreRate":"50"}]'
></r-radar>

abilitys JS 프로퍼티로 명령형으로 지정할 수도 있습니다. 배열(어트리뷰트로 다시 문자열화됩니다)이나 JSON 문자열을 받습니다.

const radar = document.createElement('r-radar');
radar.abilitys = [
  { abilityName: '체력', scoreRate: 10 },
  { abilityName: '공격력', scoreRate: 90 },
  { abilityName: '방어력', scoreRate: 20 },
];
chart.append(radar);

API 레퍼런스

프로퍼티

프로퍼티	타입	기본값	설명
abilitys	string / Array	''	차트 데이터. JSON 문자열(JS 프로퍼티라면 배열)
colorPolygon	string	var(--ran-radar-polygon-color) / #e6e6e6	동심 격자 다각형의 색
colorLine	string	var(--ran-radar-line-color) / #e6e6e6	축선과 바깥 테두리의 색
fillColor	string	rgba(255,121,35,0.60)	데이터 영역의 채움 색
strokeColor	string	rgba(255,121,35,0.60)	데이터 영역 윤곽선과 꼭짓점 점의 색
sheet	string	''	컴포넌트의 섀도 DOM에 주입할 CSS

abilitys 배열의 각 항목은 다음 키를 받습니다.

키	타입	필수	설명
abilityName	string	예	축 레이블 텍스트
scoreRate	number	예	그 축의 값. 격자의 최대는 100 입니다
backgroundColor	string	아니오	레이블 배경색(기본은 투명)
fontSize	number	아니오	레이블 글자 크기(기본은 차트에 맞춘 크기)
fontColor	string	아니오	레이블 글자색(기본은 --ran-color-text)
fontFamily	string	아니오	레이블 글꼴(기본은 SimHei)

참고: colorPolygon, colorLine, fillColor, strokeColor는 대소문자를 가리지 않고 읽히므로, 어트리뷰트가 처음부터 있든 마운트 후에 바뀌든 제대로 그려집니다. 어느 것을 갱신해도 차트가 다시 그려집니다. 테마를 따르는 스타일을 원하면 아래 CSS 변수를 먼저 쓰세요.

차트 데이터 abilitys

축별 레이블 스타일(backgroundColor, fontSize, fontColor)은 항목마다 따로 지정할 수 있습니다.

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"체력","scoreRate":"10","backgroundColor":"red","fontSize":"30","fontColor":"blue"},{"abilityName":"공격력","scoreRate":"90"},{"abilityName":"방어력","scoreRate":"20"},{"abilityName":"원소 마스터리","scoreRate":"50"},{"abilityName":"치명타 확률","scoreRate":"80"},{"abilityName":"치명타 피해","scoreRate":"50"}]'
></r-radar>

격자 다각형 색 colorPolygon

<r-radar
  style="width:300px;height:300px;display:block;"
  colorPolygon="green"
  abilitys='[{"abilityName":"체력","scoreRate":"10"},{"abilityName":"공격력","scoreRate":"90"},{"abilityName":"방어력","scoreRate":"20"},{"abilityName":"원소 마스터리","scoreRate":"50"},{"abilityName":"치명타 확률","scoreRate":"80"},{"abilityName":"치명타 피해","scoreRate":"50"}]'
></r-radar>

축선 색 colorLine

<r-radar
  style="width:300px;height:300px;display:block;"
  colorLine="blue"
  abilitys='[{"abilityName":"체력","scoreRate":"10"},{"abilityName":"공격력","scoreRate":"90"},{"abilityName":"방어력","scoreRate":"20"},{"abilityName":"원소 마스터리","scoreRate":"50"},{"abilityName":"치명타 확률","scoreRate":"80"},{"abilityName":"치명타 피해","scoreRate":"50"}]'
></r-radar>

영역 채움 색 fillColor

<r-radar
  style="width:300px;height:300px;display:block;"
  fillColor="red"
  abilitys='[{"abilityName":"체력","scoreRate":"10"},{"abilityName":"공격력","scoreRate":"90"},{"abilityName":"방어력","scoreRate":"20"},{"abilityName":"원소 마스터리","scoreRate":"50"},{"abilityName":"치명타 확률","scoreRate":"80"},{"abilityName":"치명타 피해","scoreRate":"50"}]'
></r-radar>

영역 윤곽선 색 strokeColor

<r-radar
  style="width:300px;height:300px;display:block;"
  strokeColor="blue"
  abilitys='[{"abilityName":"체력","scoreRate":"10"},{"abilityName":"공격력","scoreRate":"90"},{"abilityName":"방어력","scoreRate":"20"},{"abilityName":"원소 마스터리","scoreRate":"50"},{"abilityName":"치명타 확률","scoreRate":"80"},{"abilityName":"치명타 피해","scoreRate":"50"}]'
></r-radar>

전체 예제 데이터

HTML의 attribute는 string만 담을 수 있으므로, 넘기는 데이터는 json 문자열이어야 하고 JSON.parse로 객체 배열로 되돌아갑니다. JSON 형식이 어긋나면 해석할 수 없습니다.

[
  {
    "abilityName": "체력",
    "scoreRate": "10",
    "backgroundColor": "red",
    "fontSize": "30",
    "fontColor": "blue"
  },
  {
    "abilityName": "공격력",
    "scoreRate": "90"
  },
  {
    "abilityName": "방어력",
    "scoreRate": "20"
  },
  {
    "abilityName": "원소 마스터리",
    "scoreRate": "50"
  },
  {
    "abilityName": "치명타 확률",
    "scoreRate": "80"
  },
  {
    "abilityName": "치명타 피해",
    "scoreRate": "50"
  }
]

CSS 변수

차트 색은 호스트의 CSS 커스텀 프로퍼티로도(테마에 반응하게) 지정할 수 있습니다.

변수	기본값	설명
--ran-radar-polygon-color	var(--ran-color-border) / #e6e6e6	격자 다각형 색
--ran-radar-line-color	var(--ran-color-border) / #e6e6e6	축선 색
--ran-radar-fill-color	rgba(255,121,35,0.60)	데이터 영역 채움 색
--ran-radar-stroke-color	rgba(255,121,35,0.60)	데이터 영역 윤곽선 색
--ran-radar-width	100%	캔버스 컨테이너 너비
--ran-radar-height	100%	캔버스 컨테이너 높이
--ran-radar-display	block	캔버스 컨테이너의 display
--ran-radar-position	relative	캔버스 컨테이너의 position

레이블 글자색도 테마 토큰 --ran-color-text로 물러나므로, 라이트에서도 다크에서도 레이블이 읽힙니다.

이벤트

없습니다. <r-radar>는 커스텀 이벤트를 디스패치하지 않습니다.

권장 사항

• 크기: 호스트에는 고유 크기가 없습니다. 언제나 width/height를 명시적으로(style이나 --ran-radar-width/--ran-radar-height 변수로) 지정하세요. 컨테이너 크기가 바뀌면 ResizeObserver로 감지해 차트가 자동으로 다시 그려집니다.
• 데이터 형식: abilitys에는 올바른 JSON을 넘기세요. 형식이 어긋난 JSON은 기록되고 해석되지 않습니다. 코드에서 진짜 배열을 다룰 때는 abilitys JS 프로퍼티를 쓰세요.
• 척도: scoreRate는 고정된 최대값 100을 기준으로 잽니다. 값을 그 범위로 정규화하세요.
• 테마: 색 어트리뷰트(colorPolygon, colorLine, fillColor, strokeColor)는 반응형이라 마운트 뒤에 바꾸면 차트를 다시 그립니다. 색이 라이트/다크 테마를 저절로 따르게 하려면 --ran-radar-* CSS 변수를 먼저 쓰세요.