Config
pie

series[type=pie]

Pie μ‹œλ¦¬μ¦ˆ
type은 'pie'이닀.
λͺ¨λ“  λ°μ΄ν„°ν¬μΈνŠΈ κ°’λ“€μ˜ 합에 λŒ€ν•œ λ°μ΄ν„°ν¬μΈνŠΈμ˜ μƒλŒ€μ  κ°’ λΉ„μœ¨μ„ μ›ν˜Έλ‘œ ν‘œμ‹œν•œλ‹€.

dataλŠ” μ•„λž˜ ν˜•μ‹λ“€λ‘œ 전달할 수 μžˆλ‹€.

단일값 λ˜λŠ” 단일값 λ°°μ—΄
ν˜•μ‹μ„€λͺ…
y단일 숫자면 yκ°’. x 값은 μˆœμ„œμ— 따라 μžλ™ κ²°μ •.
[]빈 배열이면 null. x 값은 μˆœμ„œμ— 따라 μžλ™ κ²°μ •.
[y]κ°’ ν•˜λ‚˜μΈ 배열이면 yκ°’. x 값은 μˆœμ„œμ— 따라 μžλ™ κ²°μ •.
[x, y,]두 κ°’ 이상이면 μˆœμ„œλŒ€λ‘œ x, yκ°’.
λ˜λŠ” xField 속성이 숫자이면 xκ°’μ˜ index. yFieldλŠ” yκ°’μ˜ index.
colorFieldλŠ” colorκ°’μ˜ index.
json λ°°μ—΄
Series 속성섀λͺ…
xField속성 κ°’, λ˜λŠ” 'x', 'name', 'label' 속성듀 쀑 μˆœμ„œλŒ€λ‘œ 값이 μ„€μ •λœ 것이 x 값이 λœλ‹€.
yField속성 κ°’, λ˜λŠ” 'y', 'value' 속성듀 쀑 μˆœμ„œλŒ€λ‘œ 값이 μ„€μ •λœ 것이 y 값이 λœλ‹€.
colorField속성 κ°’, λ˜λŠ” 'color' 속성 κ°’μœΌλ‘œ λ°μ΄ν„°ν¬μΈνŠΈμ˜ κ°œλ³„ μƒ‰μƒμœΌλ‘œ μ§€μ •λœλ‹€.

Options

autoSlice: boolean

ν΄λ¦­ν•œ 데이터 포인트λ₯Ό slice μ‹œν‚¨λ‹€. κΈ°μ‘΄ slice 됐던 ν¬μΈνŠΈλŠ” μ›λ³΅λœλ‹€.

default :true

borderRadius: number

default :0

center: string|number

centerX, centerYλ₯Ό μ§€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ 이 속성값을 μ‚¬μš©ν•œλ‹€.
즉, 이 μ†μ„±μœΌλ‘œ 두 속성값을 λ™μ‹œμ— 지정할 수 μžˆλ‹€.

centerX: string|number

body μ˜μ—­μ„ κΈ°μ€€μœΌλ‘œ 'pie', 'funnel' μ‹œλ¦¬μ¦ˆλ“€μ˜ μˆ˜ν‰ 쀑심 μœ„μΉ˜
μˆ«μžλ‚˜ body μ˜μ—­ λ„ˆλΉ„μ— λŒ€ν•œ μƒλŒ€κ°’μ„ '%'둜 지정할 수 μžˆλ‹€.

default :'50%'

centerY: string|number

body μ˜μ—­μ„ κΈ°μ€€μœΌλ‘œ 'pie', 'funnel' μ‹œλ¦¬μ¦ˆλ“€μ˜ 수직 쀑심 μœ„μΉ˜
μˆ«μžλ‚˜ body μ˜μ—­ 높이에 λŒ€ν•œ μƒλŒ€κ°’μ„ '%'둜 지정할 수 μžˆλ‹€.

default :'50%'

clockwise: boolean

trueλ©΄ μ‹œκ³„ λ°©ν–₯으둜 νšŒμ „ν•œλ‹€.

default :true

col: number

λΆ„ν•  λͺ¨λ“œμΌ λ•Œ μ‹œλ¦¬μ¦ˆκ°€ ν‘œμ‹œλ  pane의 μˆ˜ν‰ index.

color: string|number

데이터 포인트 κΈ°λ³Έ 색.
숫자둜 μ§€μ •ν•˜λ©΄ μ •μˆ˜λ‘œ λ³€ν™˜λœ 값에 ν•΄λ‹Ήν•˜λŠ” νŒ”λ ˆνŠΈ μƒ‰μƒμœΌλ‘œ μ„€μ •λœλ‹€. 'var(--color-n)'으둜 μ§€μ •ν•œ 것과 λ™μΌν•˜λ©°, 1 ~ 12 μ‚¬μ΄μ˜ κ°’μœΌλ‘œ μ§€μ •ν•œλ‹€.
pointColorsλ‚˜ pointStyleCallback으둜 μ„€μ •λœ 색상이 이 μ†μ„±μœΌλ‘œ μ„€μ •ν•œ 색상보닀 μš°μ„ ν•œλ‹€.

colorField: string

undefined이면, data point의 값이 객체일 λ•Œ 'color'.

data: any

데이터포인터듀을 μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” κ°’ λͺ©λ‘.

groupSize: number

default :1

hoverEffect: 'none'|'default'

λ°μ΄ν„°ν¬μΈνŠΈ hover 효과.

hoverStyle: SVGStyles|string

λ°μ΄ν„°ν¬μΈνŠΈ μœ„μ— λ§ˆμš°μŠ€κ°€ μžˆμ„ λ•Œ μ μš©λ˜λŠ” μŠ€νƒ€μΌμ…‹ ν˜Ήμ€ class selector.

innerRadius: string|number

0보닀 큰 값을 μ§€μ •ν•΄μ„œ 도넛 ν˜•νƒœλ‘œ ν‘œμ‹œν•  수 μžˆλ‹€. μ‹œλ¦¬μ¦ˆ μ›ν˜Έμ˜ λ°˜μ§€λ¦„μ— λŒ€ν•œ μƒλŒ€μ  ν¬κΈ°λ‚˜ ν”½μ…€ 수둜 지정할 수 μžˆλ‹€. innerText둜 도넛 내뢀에 ν‘œμ‹œλ  ν…μŠ€νŠΈλ₯Ό 지정할 수 μžˆλ‹€.

innerText

innerRadiusκ°€ 0보닀 클 λ•Œ, 도넛 내뢀에 ν‘œμ‹œλ˜λŠ” ν…μŠ€νŠΈ. κΈ°λ³Έ 클래슀 selectorλŠ” 'rct-pie-series-inner'이닀.

label: string

이 μ‹œλ¦¬μ¦ˆλ₯Ό λ‚˜νƒ€λ‚΄λŠ” ν…μŠ€νŠΈ.
λ ˆμ „λ“œλ‚˜ νˆ΄νŒμ—μ„œ μ‹œλ¦¬μ¦ˆλ₯Ό λŒ€ν‘œν•œλ‹€. 이 속성이 μ§€μ •λ˜μ§€ μ•ŠμœΌλ©΄ name이 μ‚¬μš©λœλ‹€.

labelDistance: number

default :25

legendByPoint: boolean

true둜 μ§€μ •ν•˜λ©΄ 'pie', 'funnel' μ‹œλ¦¬μ¦ˆλ“€μ˜ λ°μ΄ν„°ν¬μΈνŠΈλ³„ legend ν•­λͺ©μ„ ν‘œμ‹œν•œλ‹€.

default :false

loadAnimation: 'default'|'reveal'|'grow'|'spread'|'fadein'

차트 μ„€μ • λ‘œλ“œ μ‹œ μ‹€ν–‰λ˜λŠ” animation μ’…λ₯˜.

name: string

μ‹œλ¦¬μ¦ˆ 이름.
μ‹œλ¦¬μ¦ˆ μƒμ„±μ‹œ μ§€μ •λœ ν›„ λ³€κ²½ν•  수 μ—†λ‹€. 차트의 λ‹€λ₯Έ ꡬ성 μš”μ†Œμ—μ„œ 이 μ‹œλ¦¬μ¦ˆλ₯Ό μ°Έμ‘°ν•  λ•Œ μ‚¬μš©λ˜λ©°, λ ˆμ „λ“œλ‚˜ νˆ΄νŒμ—μ„œ μ‹œλ¦¬μ¦ˆλ₯Ό λ‚˜νƒ€λ‚΄λŠ” ν…μŠ€νŠΈλ‘œλ„ μ‚¬μš©λœλ‹€.

noClip: boolean

true둜 μ§€μ •ν•˜λ©΄ bodyλ₯Ό λ²—μ–΄λ‚œ data point μ˜μ—­λ„ ν‘œμ‹œλœλ‹€.
값을 μ§€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ polar μ°¨νŠΈμ—μ„œλŠ” true, 직ꡐ μ°¨νŠΈμ—μ„œλŠ” false이닀. group에 ν¬ν•¨λ˜λ©΄ group의 noClip 섀정을 λ”°λ₯Έλ‹€.
또, 값을 μ§€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ λ²„λΈ”μ‹œλ¦¬μ¦ˆλŠ” μ΅œλŒ€ν•œ 버블듀이 ν‘œμ‹œλ˜λ„λ‘ ν•œλ‹€.

onPointClick: ( args: DataPointCallbackArgs ) => boolean

데이터 pointκ°€ 클릭될 λ•Œ ν˜ΈμΆœλ˜λŠ” 이벀트 콜백.
λͺ…μ‹œμ  trueλ₯Ό λ¦¬ν„΄ν•˜λ©΄ κΈ°λ³Έ λ™μž‘μ΄ μ§„ν–‰λ˜μ§€ μ•ŠλŠ”λ‹€.

onPointHover: ( args: DataPointCallbackArgs ) => void

λ§ˆμš°μŠ€κ°€ 데이터 point μœ„μ— μ˜¬λΌκ°€κ±°λ‚˜ λΉ μ Έλ‚˜κ°ˆ λ•Œ ν˜ΈμΆœλ˜λŠ” 이벀트 콜백.
λΉ μ Έλ‚˜κ°€λŠ” 경우 args λ§€κ°œλ³€μˆ˜λŠ” null이닀.

onPointsLoaded: ( series: object, firstTime: boolean ) => void

λ°μ΄ν„°ν¬μΈνŠΈλ“€μ΄ μƒˆλ‘œ λ‘œλ“œλœ ν›„ ν˜ΈμΆœλœλ‹€.

pointColors: string|string[]

데이터 ν¬μΈνŠΈλ³„ 색듀을 μ§€μ •ν•œλ‹€.
색 λ°°μ—΄λ‘œ μ§€μ •ν•˜κ±°λ‚˜, 'colors' asset으둜 λ“±λ‘λœ 이름을 지정할 수 μžˆλ‹€.
pointStyleCallback으둜 μ„€μ •λœ μƒ‰μƒμ΄λ‚˜ λ°μ΄ν„°ν¬μΈνŠΈλ³„λ‘œ μ§€μ •ν•œ 색상이 이 μ†μ„±μœΌλ‘œ μ„€μ •ν•œ 색상보닀 μš°μ„ ν•œλ‹€.

pointLabel

pointStyle: SVGStyles|string

λͺ¨λ“  λ°μ΄ν„°ν¬μΈνŠΈμ— μ μš©λ˜λŠ” inline μŠ€νƒ€μΌμ…‹.
style둜 μ„€μ •λ˜λŠ” μ‹œλ¦¬μ¦ˆμ˜ inline μŠ€νƒ€μΌμ΄ 데이터포인터에 μ μš©λ˜μ§€ μ•ŠλŠ” 경우 이 속성을 μ‚¬μš©ν•  수 μžˆλ‹€. pointColorsλ‚˜ colorκ°€ μ„€μ •λ˜λ©΄ 이 μ†μ„±μœΌλ‘œ μ„€μ •λœ 색상은 λ¬΄μ‹œλœλ‹€. 또, pointStyleCallback으둜 μ„€μ •λœ μŠ€νƒ€μΌμ΄ 이 속성 μŠ€νƒ€μΌλ³΄λ‹€ μš°μ„ ν•œλ‹€.

pointStyleCallback: ( args: DataPointCallbackArgs ) => SVGStyles|string

λ°μ΄ν„°ν¬μΈνŠΈμ˜ 동적 μŠ€νƒ€μΌ 콜백.

radius: string|number

μ‹œλ¦¬μ¦ˆ μ›ν˜Έμ˜ λ°˜μ§€λ¦„.
ν”½μ…€ ν¬κΈ°λ‚˜ body μ˜μ—­ 크기에 λŒ€ν•œ μƒλŒ€μ  크기둜 지정할 수 μžˆλ‹€. '50%'둜 μ§€μ •ν•˜λ©΄ plot μ˜μ—­μ˜ widthλ‚˜ height쀑 μž‘μ€ 크기와 λ™μΌν•œ λ°˜μ§€λ¦„μœΌλ‘œ ν‘œμ‹œλœλ‹€.

default :'40%

row: number

λΆ„ν•  λͺ¨λ“œμΌ λ•Œ μ‹œλ¦¬μ¦ˆκ°€ ν‘œμ‹œλ  pane의 수직 index.

sliceDuration: number

Slice animation duration. λ°€λ¦¬μ„Έμ»¨λ“œ(ms) λ‹¨μœ„λ‘œ 지정.

default :300

sliceOffset: string|number

default :'7%'

startAngle: number

μ‹œλ¦¬μ¦ˆ μ›ν˜Έ μ‹œμž‘ 각도.
μ§€μ •ν•˜μ§€ μ•Šκ±°λ‚˜ 잘λͺ»λœ 값이면 0으둜 κ³„μ‚°λœλ‹€. 0은 μ‹œκ³„μ˜ 12μ‹œ μœ„μΉ˜λ‹€.

default :0

style: SVGStyles|string

μŠ€νƒ€μΌμ…‹ ν˜Ήμ€ class selector.

tooltipCallback: ( args: any ) => string

tooltipText: string

λ°μ΄ν„°ν¬μΈνŠΈ 툴팁 ν…μŠ€νŠΈ.

totalAngle: number

μ‹œλ¦¬μ¦ˆ μ›ν˜Έ 전체 각도.
0 ~ 360 μ‚¬μ΄μ˜ κ°’μœΌλ‘œ 지정해야 ν•œλ‹€. λ²”μœ„λ₯Ό λ²—μ–΄λ‚œ 값은 λ²”μœ„ μ•ˆμœΌλ‘œ μ‘°μ •λœλ‹€. μ§€μ •ν•˜μ§€ μ•Šκ±°λ‚˜ 잘λͺ»λœ 값이면 360으둜 κ³„μ‚°λœλ‹€.

default :360

trendline

μΆ”μ„Έμ„  μ˜΅μ…˜.

type: 'pie'

viewRangeValue: 'x'|'y'|'z'

rangesκ°€ μ μš©λ˜λŠ” κ°’.
μ§€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ μ‹œλ¦¬μ¦ˆ μ’…λ₯˜μ— 띠라 μžλ™ μ μš©λœλ‹€. 'line' μ‹œλ¦¬μ¦ˆ 계열은 'x', λ‚˜λ¨Έμ§€λŠ” 'y'κ°€ λœλ‹€. ν˜„μž¬ 'z'은 rangeλŠ” bubble μ‹œλ¦¬μ¦ˆμ—λ§Œ μ μš©ν•  수 μžˆλ‹€.

viewRanges: ValueRangeList | ValueRange[]

κ°’ λ²”μœ„ λͺ©λ‘.
λ²”μœ„λ³„λ‘œ λ‹€λ₯Έ μŠ€νƒ€μΌμ„ μ μš©ν•  수 μžˆλ‹€. λ²”μœ„λ“€μ€ 쀑첩될 수 μ—†λ‹€.

visible: boolean

ν‘œμ‹œ μ—¬λΆ€.

default :true

visibleInLegend: boolean

λͺ…μ‹œμ  false둜 μ§€μ •ν•˜λ©΄ legend에 ν‘œμ‹œν•˜μ§€ μ•ŠλŠ”λ‹€.

visibleInNavigator: boolean

true둜 μ§€μ •ν•˜λ©΄ μ‹œλ¦¬μ¦ˆ λ‚΄λΉ„κ²Œμ΄ν„°μ— ν‘œμ‹œν•œλ‹€.

visibleThreshold: number

포인터가 μ°¨μ§€ν•˜λŠ” λ„ˆλΉ„κ°€ 이 κ°’ 미만이면 ν‘œμ‹œν•˜μ§€ μ•ŠλŠ”λ‹€.

xAxis: string|number

그룹에 ν¬ν•¨λ˜λ©΄ κ·Έλ£Ή 섀정을 λ”°λ₯Έλ‹€.

xField: string|number

json κ°μ²΄λ‚˜ λ°°μ—΄λ‘œ μ „λ‹¬λ˜λŠ” λ°μ΄ν„°ν¬μΈνŠΈ μ •λ³΄μ—μ„œ x 값을 μ§€μ •ν•˜λŠ” 속성λͺ…μ΄λ‚˜ 인덱슀.
undefined이면, data point의 값이 array일 λ•ŒλŠ” 0, 객체이면 'x'.

xStart: any

μ—°κ²°λœ x좕이 연속 μΆ•(μΉ΄ν…Œκ³ λ¦¬μΆ•μ΄ μ•„λ‹Œ)일 λ•Œ, xμΆ• 값이 μ„€μ •λ˜μ§€ μ•Šμ€ 첫번째 데이터 point에 μ„€μ •λ˜λŠ” xκ°’.
이 ν›„μ—λŠ” xStepμ”© μ¦κ°€μ‹œν‚€λ©΄μ„œ μ„€μ •ν•œλ‹€. 이 속성이 μ§€μ •λ˜μ§€ μ•Šμ€ 경우 xStartκ°€ μ μš©λœλ‹€.

xStep: string|number

μ—°κ²°λœ x좕이 연속 μΆ•(μΉ΄ν…Œκ³ λ¦¬μΆ•μ΄ μ•„λ‹Œ)일 λ•Œ, xμΆ• 값이 μ„€μ •λ˜μ§€ μ•Šμ€ 데이터 point에 μ§€μ •λ˜λŠ” xκ°’μ˜ 간격.
첫번째 값은 xStart둜 μ„€μ •ν•œλ‹€. time 좕일 λ•Œ, μ •μˆ˜ κ°’ λŒ€μ‹  μ‹œκ°„ λ‹¨μœ„('y', 'm', 'w', 'd', 'h', 'n', 's')둜 지정할 수 μžˆλ‹€. 이 속성이 μ§€μ •λ˜μ§€ μ•ŠμœΌλ©΄ xStep이 μ μš©λœλ‹€.

yAxis: string|number

그룹에 ν¬ν•¨λ˜λ©΄ κ·Έλ£Ή 섀정을 λ”°λ₯Έλ‹€.

yField: string|number|Function

json κ°μ²΄λ‚˜ λ°°μ—΄λ‘œ μ „λ‹¬λ˜λŠ” λ°μ΄ν„°ν¬μΈνŠΈ μ •λ³΄μ—μ„œ y 값을 μ§€μ •ν•˜λŠ” 속성λͺ…μ΄λ‚˜ 인덱슀.
undefined이면, data point의 값이 array일 λ•ŒλŠ” 1, 객체이면 'y'.

zField: string|number|Function

json κ°μ²΄λ‚˜ λ°°μ—΄λ‘œ μ „λ‹¬λ˜λŠ” λ°μ΄ν„°ν¬μΈνŠΈ μ •λ³΄μ—μ„œ z 값을 μ§€μ •ν•˜λŠ” 속성λͺ…μ΄λ‚˜ 인덱슀.
undefined이면, data point의 값이 array일 λ•ŒλŠ” 2, 객체이면 'z'.

zOrder: number

μ‹œλ¦¬μ¦ˆ ν‘œμ‹œ μˆœμ„œλ₯Ό 지정할 수 μžˆλ‹€.
값이 클 수둝 λ‚˜μ€‘μ—(μœ„μ—) ν‘œμ‹œλœλ‹€.