Config
arearange

series[type=arearange]

AreaRange ์‹œ๋ฆฌ์ฆˆ.


data ๋Š” ์•„๋ž˜ ํ˜•์‹๋“ค๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.
[์ฃผ์˜] ๋ฐ์ดํ„ฐํฌ์ธํŠธ ๊ตฌ์„ฑ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ฐ’์„ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค.

๋‹จ์ผ๊ฐ’ ๋˜๋Š” ๋‹จ์ผ๊ฐ’ ๋ฐฐ์—ด
ํ˜•์‹์„ค๋ช…
y๋‹จ์ผ ์ˆซ์ž๋ฉด low, y๊ฐ’. x ๊ฐ’์€ ์ˆœ์„œ์— ๋”ฐ๋ผ ์ž๋™ ๊ฒฐ์ •.
[]๋นˆ ๋ฐฐ์—ด์ด๋ฉด null. x ๊ฐ’์€ ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ˆœ์„œ์— ๋”ฐ๋ผ ์ž๋™ ๊ฒฐ์ •.
[z]๋‹จ์ผ๊ฐ’ ๋ฐฐ์—ด์ด๋ฉด low, y๊ฐ’. x ๊ฐ’์€ ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ˆœ์„œ์— ๋”ฐ๋ผ ์ž๋™ ๊ฒฐ์ •.
[low, y]๋‘ ๊ฐ’ ๋ฐฐ์—ด์ด๋ฉด low๊ฐ’๊ณผ y๊ฐ’. x ๊ฐ’์€ ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ˆœ์„œ์— ๋”ฐ๋ผ ์ž๋™ ๊ฒฐ์ •.
[x, low, y,]์„ธ ๊ฐ’ ์ด์ƒ์ด๋ฉด ์ˆœ์„œ๋Œ€๋กœ x, low, y๊ฐ’.
๋˜๋Š” xField ์†์„ฑ์ด ์ˆซ์ž์ด๋ฉด x๊ฐ’์˜ index. lowField ๋Š” low๊ฐ’์˜ index. yField ๋Š” y๊ฐ’์˜ index.
json ๋ฐฐ์—ด
Series ์†์„ฑ์„ค๋ช…
xField์†์„ฑ ๊ฐ’, ๋˜๋Š” 'x', 'name', 'label' ์†์„ฑ๋“ค ์ค‘ ์ˆœ์„œ๋Œ€๋กœ ๊ฐ’์ด ์„ค์ •๋œ ๊ฒƒ์ด x ๊ฐ’์ด ๋œ๋‹ค.
yField์†์„ฑ ๊ฐ’, ๋˜๋Š” 'y', 'value' ์†์„ฑ๋“ค ์ค‘ ์ˆœ์„œ๋Œ€๋กœ ๊ฐ’์ด ์„ค์ •๋œ ๊ฒƒ์ด y ๊ฐ’์ด ๋œ๋‹ค.
lowField์†์„ฑ ๊ฐ’, ๋˜๋Š” 'low' ์†์„ฑ ๊ฐ’์ด low ๊ฐ’์ด ๋œ๋‹ค.
colorField์†์„ฑ ๊ฐ’, ๋˜๋Š” 'color' ์†์„ฑ ๊ฐ’์œผ๋กœ ๋ฐ์ดํ„ฐํฌ์ธํŠธ์˜ ๊ฐœ๋ณ„ ์ƒ‰์ƒ์œผ๋กœ ์ง€์ •๋œ๋‹ค.

Options

areaStyle: SVGStyles|string

area ์˜์—ญ์— ์ถ”๊ฐ€์ ์œผ๋กœ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์…‹์ด๋‚˜ class selector.

defaultย undefinedย 

col: number

๋ถ„ํ•  ๋ชจ๋“œ์ผ ๋•Œ ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ํ‘œ์‹œ๋  pane์˜ ์ˆ˜ํ‰ index.

defaultย undefinedย 

color: string|number

๋ฐ์ดํ„ฐ ํฌ์ธํŠธ ๊ธฐ๋ณธ ์ƒ‰.
์ˆซ์ž๋กœ ์ง€์ •ํ•˜๋ฉด ์ •์ˆ˜๋กœ ๋ณ€ํ™˜๋œ ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” ํŒ”๋ ˆํŠธ ์ƒ‰์ƒ์œผ๋กœ ์„ค์ •๋œ๋‹ค. 'var(--color-n)'์œผ๋กœ ์ง€์ •ํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜๋ฉฐ, 1 ~ 12 ์‚ฌ์ด์˜ ๊ฐ’์œผ๋กœ ์ง€์ •ํ•œ๋‹ค.
pointColors ๋‚˜ pointStyleCallback ์œผ๋กœ ์„ค์ •๋œ ์ƒ‰์ƒ์ด ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ ์ƒ‰์ƒ๋ณด๋‹ค ์šฐ์„ ํ•œ๋‹ค.

defaultย undefinedย 

colorField: string

undefined์ด๋ฉด, data point์˜ ๊ฐ’์ด ๊ฐ์ฒด์ผ ๋•Œ 'color'.

defaultย undefinedย 

curved: boolean

true๋ฉด lineType ์„ค์ •๊ณผ ๊ด€๊ณ„์—†์ด spline ๊ณก์„ ์œผ๋กœ ํ‘œ์‹œํ•œ๋‹ค.

defaultย falseย 

data: any

๋ฐ์ดํ„ฐํฌ์ธํ„ฐ๋“ค์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ’ ๋ชฉ๋ก.

defaultย undefinedย 

highField: string

json ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋˜๋Š” ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ •๋ณด์—์„œ ๋†’์€(high) ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ๋ช…์ด๋‚˜ ์ธ๋ฑ์Šค.

undefined์ด๋ฉด, data point์˜ ๊ฐ’์ด array์ผ ๋•Œ๋Š” ํ•ญ๋ชฉ ์ˆ˜๊ฐ€ 3์ด์ƒ์ด๋ฉด 2, ์•„๋‹ˆ๋ฉด 1, ๊ฐ์ฒด์ด๋ฉด 'high'.

defaultย undefinedย 

hoverEffect: 'none'|'default'

๋ฐ์ดํ„ฐํฌ์ธํŠธ hover ํšจ๊ณผ.

defaultย undefinedย 

hoverStyle: SVGStyles|string

๋ฐ์ดํ„ฐํฌ์ธํŠธ ์œ„์— ๋งˆ์šฐ์Šค๊ฐ€ ์žˆ์„ ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์…‹ ํ˜น์€ class selector.

defaultย undefinedย 

label: string

์ด ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํ…์ŠคํŠธ.
๋ ˆ์ „๋“œ๋‚˜ ํˆดํŒ์—์„œ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋Œ€ํ‘œํ•œ๋‹ค. ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š์œผ๋ฉด name ์ด ์‚ฌ์šฉ๋œ๋‹ค.

defaultย undefinedย 

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

์ฐจํŠธ ์„ค์ • ๋กœ๋“œ ์‹œ ์‹คํ–‰๋˜๋Š” animation ์ข…๋ฅ˜.

defaultย undefinedย 

lowField: string

json ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋˜๋Š” ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ •๋ณด์—์„œ ๋‚ฎ์€(low) ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ๋ช…์ด๋‚˜ ์ธ๋ฑ์Šค.

undefined์ด๋ฉด, data point์˜ ๊ฐ’์ด array์ผ ๋•Œ๋Š” ํ•ญ๋ชฉ ์ˆ˜๊ฐ€ 3์ด์ƒ์ด๋ฉด 1, ์•„๋‹ˆ๋ฉด 0, ๊ฐ์ฒด์ด๋ฉด 'low'.

defaultย undefinedย 

marker: LineSeriesMarkerOptions

๋ฐ์ดํ„ฐ ํฌ์ธํŠธ maker ์„ค์ • ์ •๋ณด.

name: string

์‹œ๋ฆฌ์ฆˆ ์ด๋ฆ„.
์‹œ๋ฆฌ์ฆˆ ์ƒ์„ฑ์‹œ ์ง€์ •๋œ ํ›„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค. ์ฐจํŠธ์˜ ๋‹ค๋ฅธ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ด ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์ฐธ์กฐํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋ ˆ์ „๋“œ๋‚˜ ํˆดํŒ์—์„œ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํ…์ŠคํŠธ๋กœ๋„ ์‚ฌ์šฉ๋œ๋‹ค.

defaultย undefinedย 

noClip: boolean

true๋กœ ์ง€์ •ํ•˜๋ฉด body๋ฅผ ๋ฒ—์–ด๋‚œ data point ์˜์—ญ๋„ ํ‘œ์‹œ๋œ๋‹ค.
๊ฐ’์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด polar ์ฐจํŠธ์—์„œ๋Š” true, ์ง๊ต ์ฐจํŠธ์—์„œ๋Š” false์ด๋‹ค. group์— ํฌํ•จ๋˜๋ฉด group์˜ noClip ์„ค์ •์„ ๋”ฐ๋ฅธ๋‹ค.
๋˜, ๊ฐ’์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๋ฒ„๋ธ”์‹œ๋ฆฌ์ฆˆ๋Š” ์ตœ๋Œ€ํ•œ ๋ฒ„๋ธ”๋“ค์ด ํ‘œ์‹œ๋˜๋„๋ก ํ•œ๋‹ค.

defaultย undefinedย 

nullAsBase: boolean

null์ธ y๊ฐ’์„ baseValue ๋กœ ๊ฐ„์ฃผํ•œ๋‹ค.

defaultย falseย 

onPointClick: ( args: DataPointCallbackArgs ) => boolean

๋ฐ์ดํ„ฐ point๊ฐ€ ํด๋ฆญ๋  ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ์ด๋ฒคํŠธ ์ฝœ๋ฐฑ.
๋ช…์‹œ์  true๋ฅผ ๋ฆฌํ„ดํ•˜๋ฉด ๊ธฐ๋ณธ ๋™์ž‘์ด ์ง„ํ–‰๋˜์ง€ ์•Š๋Š”๋‹ค.

defaultย undefinedย 

onPointHover: ( args: DataPointCallbackArgs ) => void

๋งˆ์šฐ์Šค๊ฐ€ ๋ฐ์ดํ„ฐ point ์œ„์— ์˜ฌ๋ผ๊ฐ€๊ฑฐ๋‚˜ ๋น ์ ธ๋‚˜๊ฐˆ ๋•Œ ํ˜ธ์ถœ๋˜๋Š” ์ด๋ฒคํŠธ ์ฝœ๋ฐฑ.
๋น ์ ธ๋‚˜๊ฐ€๋Š” ๊ฒฝ์šฐ args ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” null์ด๋‹ค.

defaultย undefinedย 

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

๋ฐ์ดํ„ฐํฌ์ธํŠธ๋“ค์ด ์ƒˆ๋กœ ๋กœ๋“œ๋œ ํ›„ ํ˜ธ์ถœ๋œ๋‹ค.

defaultย undefinedย 

pointColors: string|string[]

๋ฐ์ดํ„ฐ ํฌ์ธํŠธ๋ณ„ ์ƒ‰๋“ค์„ ์ง€์ •ํ•œ๋‹ค.
์ƒ‰ ๋ฐฐ์—ด๋กœ ์ง€์ •ํ•˜๊ฑฐ๋‚˜, 'colors' asset์œผ๋กœ ๋“ฑ๋ก๋œ ์ด๋ฆ„์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
pointStyleCallback ์œผ๋กœ ์„ค์ •๋œ ์ƒ‰์ƒ์ด๋‚˜ ๋ฐ์ดํ„ฐํฌ์ธํŠธ๋ณ„๋กœ ์ง€์ •ํ•œ ์ƒ‰์ƒ์ด ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ ์ƒ‰์ƒ๋ณด๋‹ค ์šฐ์„ ํ•œ๋‹ค.

defaultย undefinedย 

pointLabel: boolean|DataPointLabelOptions

Series data point label options.

pointStyle: SVGStyles|string

๋ชจ๋“  ๋ฐ์ดํ„ฐํฌ์ธํŠธ์— ์ ์šฉ๋˜๋Š” inline ์Šคํƒ€์ผ์…‹.
style ๋กœ ์„ค์ •๋˜๋Š” ์‹œ๋ฆฌ์ฆˆ์˜ inline ์Šคํƒ€์ผ์ด ๋ฐ์ดํ„ฐํฌ์ธํ„ฐ์— ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์ด ์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. pointColors ๋‚˜ color ๊ฐ€ ์„ค์ •๋˜๋ฉด ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •๋œ ์ƒ‰์ƒ์€ ๋ฌด์‹œ๋œ๋‹ค. ๋˜, pointStyleCallback ์œผ๋กœ ์„ค์ •๋œ ์Šคํƒ€์ผ์ด ์ด ์†์„ฑ ์Šคํƒ€์ผ๋ณด๋‹ค ์šฐ์„ ํ•œ๋‹ค.

defaultย undefinedย 

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

๋ฐ์ดํ„ฐ point์˜ ๋™์  ์Šคํƒ€์ผ ์ฝœ๋ฐฑ.

defaultย undefinedย 

row: number

๋ถ„ํ•  ๋ชจ๋“œ์ผ ๋•Œ ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ํ‘œ์‹œ๋  pane์˜ ์ˆ˜์ง index.

defaultย undefinedย 

style: SVGStyles|string

์Šคํƒ€์ผ์…‹ ํ˜น์€ class selector.

defaultย undefinedย 

tooltipCallback: ( args: any ) => string

defaultย undefinedย 

tooltipText: string

defaultย '<b>${name}</b><br>${series}:ย <b>${lowValue}</b> ~ <b>${highValue}</b>'

trendline: TrendlineOptions

์ถ”์„ธ์„  ์„ค์ • ๋ชจ๋ธ.

defaultย undefinedย 

type: 'arearange'

defaultย undefinedย 

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

ranges๊ฐ€ ์ ์šฉ๋˜๋Š” ๊ฐ’.
์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์‹œ๋ฆฌ์ฆˆ ์ข…๋ฅ˜์— ๋ ๋ผ ์ž๋™ ์ ์šฉ๋œ๋‹ค. 'line' ์‹œ๋ฆฌ์ฆˆ ๊ณ„์—ด์€ 'x', ๋‚˜๋จธ์ง€๋Š” 'y'๊ฐ€ ๋œ๋‹ค. ํ˜„์žฌ 'z'์€ range๋Š” bubble ์‹œ๋ฆฌ์ฆˆ์—๋งŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

defaultย undefinedย 

viewRanges: ValueRangeList|ValueRange[]

๊ฐ’ ๋ฒ”์œ„ ๋ชฉ๋ก.
๋ฒ”์œ„๋ณ„๋กœ ๋‹ค๋ฅธ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฒ”์œ„๋“ค์€ ์ค‘์ฒฉ๋  ์ˆ˜ ์—†๋‹ค.

defaultย undefinedย 

visible: boolean

ํ‘œ์‹œ ์—ฌ๋ถ€.

defaultย trueย 

visibleInLegend: boolean

๋ช…์‹œ์  false๋กœ ์ง€์ •ํ•˜๋ฉด legend์— ํ‘œ์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค.

defaultย undefinedย 

visibleInNavigator: boolean

true๋กœ ์ง€์ •ํ•˜๋ฉด ์‹œ๋ฆฌ์ฆˆ ๋‚ด๋น„๊ฒŒ์ดํ„ฐ์— ํ‘œ์‹œํ•œ๋‹ค.

defaultย undefinedย 

visibleThreshold: number

ํฌ์ธํ„ฐ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๋„ˆ๋น„๊ฐ€ ์ด ๊ฐ’ ๋ฏธ๋งŒ์ด๋ฉด ํ‘œ์‹œํ•˜์ง€ ์•Š๋Š”๋‹ค.

defaultย undefinedย 

xAxis: string|number

๊ทธ๋ฃน์— ํฌํ•จ๋˜๋ฉด ๊ทธ๋ฃน ์„ค์ •์„ ๋”ฐ๋ฅธ๋‹ค.

defaultย undefinedย 

xField: string|number

json ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋˜๋Š” ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ •๋ณด์—์„œ x ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ๋ช…์ด๋‚˜ ์ธ๋ฑ์Šค.
undefined์ด๋ฉด, data point์˜ ๊ฐ’์ด array์ผ ๋•Œ๋Š” 0, ๊ฐ์ฒด์ด๋ฉด 'x'.

defaultย undefinedย 

xStart: any

์—ฐ๊ฒฐ๋œ x์ถ•์ด ์—ฐ์† ์ถ•(์นดํ…Œ๊ณ ๋ฆฌ์ถ•์ด ์•„๋‹Œ)์ผ ๋•Œ, x์ถ• ๊ฐ’์ด ์„ค์ •๋˜์ง€ ์•Š์€ ์ฒซ๋ฒˆ์งธ ๋ฐ์ดํ„ฐ point์— ์„ค์ •๋˜๋Š” x๊ฐ’.
์ด ํ›„์—๋Š” xStep ์”ฉ ์ฆ๊ฐ€์‹œํ‚ค๋ฉด์„œ ์„ค์ •ํ•œ๋‹ค. ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ xStart ๊ฐ€ ์ ์šฉ๋œ๋‹ค.

defaultย undefinedย 

xStep: string|number

์—ฐ๊ฒฐ๋œ x์ถ•์ด ์—ฐ์† ์ถ•(์นดํ…Œ๊ณ ๋ฆฌ์ถ•์ด ์•„๋‹Œ)์ผ ๋•Œ, x์ถ• ๊ฐ’์ด ์„ค์ •๋˜์ง€ ์•Š์€ ๋ฐ์ดํ„ฐ point์— ์ง€์ •๋˜๋Š” x๊ฐ’์˜ ๊ฐ„๊ฒฉ.
์ฒซ๋ฒˆ์งธ ๊ฐ’์€ xStart ๋กœ ์„ค์ •ํ•œ๋‹ค. time ์ถ•์ผ ๋•Œ, ์ •์ˆ˜ ๊ฐ’ ๋Œ€์‹  ์‹œ๊ฐ„ ๋‹จ์œ„('y', 'm', 'w', 'd', 'h', 'n', 's')๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š์œผ๋ฉด xStep ์ด ์ ์šฉ๋œ๋‹ค.

defaultย undefinedย 

yAxis: string|number

๊ทธ๋ฃน์— ํฌํ•จ๋˜๋ฉด ๊ทธ๋ฃน ์„ค์ •์„ ๋”ฐ๋ฅธ๋‹ค.

defaultย undefinedย 

yField: string|number|Function

json ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋˜๋Š” ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ •๋ณด์—์„œ y ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ๋ช…์ด๋‚˜ ์ธ๋ฑ์Šค.
undefined์ด๋ฉด, data point์˜ ๊ฐ’์ด array์ผ ๋•Œ๋Š” 1, ๊ฐ์ฒด์ด๋ฉด 'y'.

defaultย undefinedย 

zField: string|number|Function

json ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๋กœ ์ „๋‹ฌ๋˜๋Š” ๋ฐ์ดํ„ฐํฌ์ธํŠธ ์ •๋ณด์—์„œ z ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ๋ช…์ด๋‚˜ ์ธ๋ฑ์Šค.
undefined์ด๋ฉด, data point์˜ ๊ฐ’์ด array์ผ ๋•Œ๋Š” 2, ๊ฐ์ฒด์ด๋ฉด 'z'.

defaultย undefinedย 

zOrder: number

์‹œ๋ฆฌ์ฆˆ ํ‘œ์‹œ ์ˆœ์„œ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
๊ฐ’์ด ํด ์ˆ˜๋ก ๋‚˜์ค‘์—(์œ„์—) ํ‘œ์‹œ๋œ๋‹ค.

defaultย undefinedย