Config
config

์ฐจํŠธ ์ขŒํ‘œ๊ณ„์™€ ๊ทธ ๋ฐฉํ–ฅ ๋ฐ ์‹œ๋ฆฌ์ฆˆ์™€ ๊ฒŒ์ด์ง€์˜ ๊ธฐ๋ณธ ํƒ€์ž…์„ ๊ฒฐ์ •ํ•˜๋Š” ์ค‘์š”ํ•œ ๋ช‡๊ฐ€์ง€ ์†์„ฑ๋“ค๊ณผ ํ•˜์œ„ ๊ตฌ์„ฑ ์š”์†Œ๋“ค์— ๋Œ€ํ•œ ์˜ต์…˜๋“ค์„ ์„ค์ •ํ•œ๋‹ค.
์ฐจํŠธ ์ƒ์„ฑ ์‹œ ์ด ์˜ต์…˜ ๊ฐ์ฒด๋ฅผ ๊ตฌ์„ฑํ•ด์„œ ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค.

const chart = RealChart.createChart(doc, 'div', {
     .... // ์—ฌ๊ธฐ์— ์„ค์ •ํ•œ๋‹ค.
});

typescript (opens in a new tab) ํ™˜๊ฒฝ์—์„œ๋Š” ํƒ€์ž…์„ ๋ช…์‹œ์ ์œผ๋กœ ์ง€์ •ํ•˜์—ฌ ๊ฐœ๋ฐœ ํŽธ์ง‘๊ธฐ์˜ typescript ์ง€์›์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์„ค์ • ๊ฐ์ฒด๋ฅผ ๋ณ„๋„๋กœ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

const config: ChartConfiguration = {
     ...
};
const chart = RealChart.createChart(doc, 'div', config);

Options

annotation

์–ด๋…ธํ…Œ์ด์…˜ ๋˜๋Š” ์–ด๋…ธํ…Œ์ด์…˜ ๋ชฉ๋ก.
[์ฃผ์˜] ์ด์ „ ๋ฒ„์ „์˜ ์„ค์ •์„ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด, ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š๊ณ  'annotations' ํ•ญ๋ชฉ์ด ์กด์žฌํ•˜๋ฉด ๊ทธ ํ•ญ๋ชฉ์„ ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.

asset

Asset ๋ชฉ๋ก.
[์ฃผ์˜] ์ด์ „ ๋ฒ„์ „์˜ ์„ค์ •์„ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด, ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š๊ณ  'assets' ์„ค์ •์ด ์กด์žฌํ•˜๋ฉด load ํ›„ ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.

body

์‹œ๋ฆฌ์ฆˆ๋‚˜ ๊ฒŒ์ด์ง€๋“ค์ด ๊ทธ๋ ค์ง€๋Š” ์˜์—ญ.

exporting

๋‚ด๋ณด๋‚ด๊ธฐ ์„ค์ •.

gauge

๊ฒŒ์ด์ง€ ๋˜๋Š” ๊ฒŒ์ด์ง€ ๋ชฉ๋ก.
[์ฃผ์˜] ์ด์ „ ๋ฒ„์ „์˜ ์„ค์ •์„ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด, ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š๊ณ  'gauges' ํ•ญ๋ชฉ์ด ์กด์žฌํ•˜๋ฉด ๊ทธ ํ•ญ๋ชฉ์„ ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.

gaugeType: 'linear'|'circle'|'bullet'|'clock'

๊ธฐ๋ณธ ๊ฒŒ์ด์ง€ type.
๊ฒŒ์ด์ง€์— type์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์ด ์†์„ฑ type์˜ ์‹œ๋ฆฌ์ฆˆ๋กœ ์ƒ์„ฑ๋œ๋‹ค.
[์ฃผ์˜] ์ฐจํŠธ ๋กœ๋”ฉ ํ›„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.

default :'circle'

inverted: boolean

polar๊ฐ€ ์•„๋‹Œ ๊ธฐ๋ณธ ์ง๊ต ์ขŒํ‘œ๊ณ„์ผ ๋•Œ true๋กœ ์ง€์ •ํ•˜๋ฉด x์ถ•์ด ์ˆ˜์ง, y์ถ•์ด ์ˆ˜ํ‰์œผ๋กœ ๋ฐฐ์น˜๋œ๋‹ค.
[์ฃผ์˜] ์ฐจํŠธ ๋กœ๋”ฉ ํ›„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.

default :false

legend

์ฐจํŠธ ์‹œ๋ฆฌ์ฆˆ ๊ตฌ์„ฑ ๋“ฑ์„ ์ง๊ด€์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๋ฒ”๋ก€.
์‹œ๋ฆฌ์ฆˆ๋‚˜ ๋ฐ์ดํ„ฐํฌ์ธํŠธ ๋“ฑ์˜ ์ด๋ฆ„๊ณผ ์‹ฌ๋ณผ์„ ๊ฐ™์ด ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค.

options

์ฐจํŠธ ์ „์ฒด์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ์˜ต์…˜๋“ค.

polar: boolean

true๋ฉด ์ฐจํŠธ๊ฐ€ ๊ทน์ขŒํ‘œ๊ณ„ (opens in a new tab)๋กœ ํ‘œ์‹œ๋œ๋‹ค.
๊ธฐ๋ณธ์€ ์ง๊ต์ขŒํ‘œ๊ณ„ (opens in a new tab)์ด๋‹ค. ๊ทน์ขŒํ‘œ๊ณ„์ผ ๋•Œ, x์ถ•์ด ์›ํ˜ธ์—, y์ถ•์€ ๋ฐฉ์‚ฌ์„ ์— ์œ„์น˜ํ•˜๊ณ , ์•„๋ž˜์˜ ์ œํ•œ ์‚ฌํ•ญ์ด ์žˆ๋‹ค.

  1. x์ถ•์€ ์ฒซ๋ฒˆ์งธ ์ถ• ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉ๋œ๋‹ค.
  2. axis.position ์†์„ฑ์€ ๋ฌด์‹œ๋œ๋‹ค.
  3. chart, series์˜ inverted ์†์„ฑ์ด ๋ฌด์‹œ๋œ๋‹ค.
  4. ๊ทน์ขŒํ‘œ๊ณ„์— ํ‘œ์‹œํ•  ์ˆ˜ ์—†๋Š” series๋“ค์€ ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š”๋‹ค.

[์ฃผ์˜] ์ฐจํŠธ ๋กœ๋”ฉ ํ›„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.

default :false

series

์‹œ๋ฆฌ์ฆˆ ๋˜๋Š” ์‹œ๋ฆฌ์ฆˆ ๋ชฉ๋ก.

seriesNavigator

์‹œ๋ฆฌ์ฆˆ ๋‚ด๋น„๊ฒŒ์ดํ„ฐ.

split

๋ถ„ํ•  ๋ชจ๋“œ ์„ค์ •.

subtitle

์ฐจํŠธ ์ œ๋ชฉ ์ฃผ์œ„์— ํ‘œ์‹œ๋˜๋Š” ๋ถ€์ œ๋ชฉ.

templates: [key: string]: any

์ด ์ฐจํŠธ ๊ตฌ์„ฑ ์„ค์ •์—์„œ ๋ฐ˜๋ณต ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์„ค์ • ๋ชจ์Œ.

title

์ฐจํŠธ ํƒ€์ดํ‹€.

tooltip

๋ฐ์ดํ„ฐํฌ์ธํŠธ ๋ทฐ์— ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ๊ฐ€๋ฉด ํ‘œ์‹œ๋˜๋Š” ํˆดํŒ ์ƒ์ž.
ํˆดํŒ ๊ฐœ์š” ํŽ˜์ด์ง€๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.

type: 'area'|'line'|'linegroup'|'spline'|'bellcurve'|'areagroup'|'barrange'|'bar'|'bargroup'|'piegroup'|'pie'|'boxplot'|'bubble'|'bump'|'candlestick'|'ohlc'|'circlebar'|'circlebargroup'|'dumbbell'|'equalizer'|'errorbar'|'funnel'|'heatmap'|'histogram'|'arearange'|'lollipop'|'pareto'|'scatter'|'treemap'|'vector'|'waterfall'

๊ธฐ๋ณธ ์‹œ๋ฆฌ์ฆˆ type.
์‹œ๋ฆฌ์ฆˆ์— type์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์ด ์†์„ฑ๊ฐ’์˜ ์‹œ๋ฆฌ์ฆˆ๋กœ ์ƒ์„ฑ๋œ๋‹ค.
[์ฃผ์˜] ์ฐจํŠธ ๋กœ๋”ฉ ํ›„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.

default :'bar'

xAxis

x์ถ• ๋˜๋Š” x์ถ• ๋ชฉ๋ก.
[์ฃผ์˜] ์ด์ „ ๋ฒ„์ „์˜ ์„ค์ •์„ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด, ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š๊ณ  'xAxes' ํ•ญ๋ชฉ์ด ์กด์žฌํ•˜๋ฉด ๊ทธ ํ•ญ๋ชฉ์„ ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.

yAxis

y์ถ• ๋˜๋Š” y์ถ• ๋ชฉ๋ก.
[์ฃผ์˜] ์ด์ „ ๋ฒ„์ „์˜ ์„ค์ •์„ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด, ์ด ์†์„ฑ์ด ์ง€์ •๋˜์ง€ ์•Š๊ณ  'yAxes' ํ•ญ๋ชฉ์ด ์กด์žฌํ•˜๋ฉด ๊ทธ ํ•ญ๋ชฉ์„ ์ด ์†์„ฑ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.