Config
๊ฐœ์š”

์ฐจํŠธ ์„ค์ •(Configuration)

RealChart๋Š” ์ฐจํŠธ ๊ตฌ์„ฑ ์š”์†Œ๋“ค์˜ ๋ฐฐ์น˜ ์ •๋ณด์™€ ์Šคํƒ€์ผ๋“ค์ด ์ง€์ •๋œ JSON (opens in a new tab) ์„ค์ • ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•˜์—ฌ ์ƒ์„ฑ๋œ๋‹ค.

const config = {
    type: 'bar',
    polar: false,
    inverted: false,
    gaugeType: 'circle',
    templates: {},
    assets: {},
    options: {},
    title: {},
    subtitle: {},
    xAxis: [],
    yAxis: [],
    series: [],
    gauges: [],
    annotations: [],
    legend: {},
    body: {},
    seriesNavigator: {},
    split: {}
};
const chart = RealChart.createChart(document, 'div', config);

์ตœ์ƒ์œ„ ์†์„ฑ๋“ค

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

const config = {
    // ๊ธฐ๋ณธ ์‹œ๋ฆฌ์ฆˆ ์ข…๋ฅ˜
    type: 'bar',
    // ๊ธฐ๋ณธ ๊ฒŒ์ด์ง€ ์ข…๋ฅ˜
    gaugeType: 'circle'
    // ๊ทน์ขŒํ‘œ ์‚ฌ์šฉ ์—ฌ๋ถ€.
    polar: false,
    // x, y์ถ•์˜ ์œ„์น˜๋ฅผ ๋ฐ”๊ฟ”์„œ ํ‘œ์‹œ
    inverted: false,
}

์ฐจํŠธ ์ˆ˜์ค€ ์˜ต์…˜๋“ค

์ฐจํŠธ ์ „์ฒด์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ์†์„ฑ๋“ค์„ ์ง€์ •ํ•œ๋‹ค.
์ฐจํŠธ ์˜ต์…˜ ํŽ˜์ด์ง€๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.

const config = {
    options: {
        // ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ ์—ฌ๋ถ€
        animatable: true;
        // ํ…Œ๋งˆ ์ด๋ฆ„
        theme: '',
        // ์‹œ๋ฆฌ์ฆˆ ๋ฐ ๋ฐ์ดํ„ฐํฌ์ธํŠธ์— ์ ์šฉ๋˜๋Š” ๊ธฐ๋ณธ ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ ์ด๋ฆ„.
        palette: '',
        // palette๋กœ ์ง€์ •๋œ ํŒ”๋ ˆํŠธ ์ƒ‰์ƒ๋“ค์„ ์‹œ๋ฆฌ์ฆˆ์— ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹.
        paletteMode = 'normal',
        // ๋ณต์ˆ˜ axis๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๊ฒฝ์šฐ axis ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ
        axisGap = 8,
        // ํฌ๋ ˆ๋”ง ์„ค์ •
        credits = {}
    }
}

์—์…‹(Assets)

์‹œ๋ฆฌ์ฆˆ๋‚˜ ๊ฒŒ์ด์ง€ ๋˜๋Š” ์ถ• label ๋“ฑ์„ ํ‘œ์‹œํ•  ๋•Œ ์ฐธ์กฐํ•˜๋Š” ๋ฏธ๋ฆฌ ์ •์˜๋œ ์Šคํƒ€์ผ ์š”์†Œ๋“ค์„ 'asset'์ด๋‚˜ 'assets' ๋ชฉ๋ก์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.

{
    assets: [{
        type: 'colors',
        id: 'color1',
        colors: ['#88f', '#aaf', '#bbf', '#ddf', '#eef'],
    }]
}

์ฐจํŠธ ์ œ๋ชฉ๋“ค(Titles)

์ฃผ/๋ถ€ ๋‘ ๊ฐœ์˜ ํƒ€์ดํ‹€์„ ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ๊ณผ ๋ฐฉ์‹์œผ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
ํƒ€์ดํ‹€๋ฐ ๋ถ€ ํƒ€์ดํ‹€ ํŽ˜์ด์ง€๋ฅผ ์ฐธ์กฐํ•œ๋‹ค.

const config = {
    // ์ฃผ ์ œ๋ชฉ
    title: {
    },
    // ๋ฌธ์ž์—ด๋กœ ์ง€์ •ํ•˜๋ฉด ํƒ€์ดํ‹€์˜ text๋กœ ์ง€์ •๋œ๋‹ค.
    title: 'Title',
    // ๋ถ€ ์ œ๋ชฉ
    subtitle: {
    }
}

X ์ถ•

'xAxes' ๋˜๋Š” 'xAxis' ์ด๋ฆ„์œผ๋กœ ํ•˜๋‚˜ ์ด์ƒ์˜ X์ถ•(๋“ค)์„ ์„ค์ •ํ•œ๋‹ค.
์ถ•์€ 'category', 'linear', 'time', 'log' ๋“ฑ ๋„ค๊ฐ€์ง€ ์ข…๋ฅ˜๊ฐ€ ์žˆ๊ณ , ๊ณตํ†ต ์†์„ฑ ์™ธ์— ์ข…๋ฅ˜๋ณ„๋กœ ๋‹ค๋ฅธ ์†์„ฑ๋“ค์ด ์ถ”๊ฐ€ ํฌํ•จ๋œ๋‹ค. ๋‘˜ ์ด์ƒ์˜ X์ถ•์€ array๋กœ ์„ค์ •ํ•œ๋‹ค.

const config = {
    xAxis: [{
    }, {
    }]
}

Y ์ถ•

'yAxes' ๋˜๋Š” 'yAxis' ์ด๋ฆ„์œผ๋กœ ํ•˜๋‚˜ ์ด์ƒ์˜ Y์ถ•(๋“ค)์„ ์„ค์ •ํ•œ๋‹ค.
์ถ•์€ 'category', 'linear', 'time', 'log' ๋“ฑ ๋„ค๊ฐ€์ง€ ์ข…๋ฅ˜๊ฐ€ ์žˆ๊ณ , ๊ณตํ†ต ์†์„ฑ ์™ธ์— ์ข…๋ฅ˜๋ณ„๋กœ ๋‹ค๋ฅธ ์†์„ฑ๋“ค์ด ์ถ”๊ฐ€ ํฌํ•จ๋œ๋‹ค. ๋‘˜ ์ด์ƒ์˜ Y์ถ•์€ array๋กœ ์„ค์ •ํ•œ๋‹ค.

const config = {
    yAxis: [{
    }, {
    }]
}

์‹œ๋ฆฌ์ฆˆ

์‹œ๋ฆฌ์ฆˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์ฐจํŠธ์˜ ๊ธฐ๋ณธ ๊ตฌ์„ฑ์š”์†Œ์ด๋‹ค.
'bar', 'linear', 'area', 'pie' ๋“ฑ ๋ช‡ ์‹ญ ์ข…๋ฅ˜์˜ ์‹œ๋ฆฌ์ฆˆ๊ฐ€ ์žˆ์œผ๋ฉฐ, ์‹œ๋ฆฌ์ฆˆ ๊ณตํ†ต ์†์„ฑ ์™ธ์— ์ข…๋ฅ˜๋ณ„๋กœ ์ถ”๊ฐ€ ์†์„ฑ๋“ค์ด ์กด์žฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‘˜ ์ด์ƒ์˜ ์‹œ๋ฆฌ์ฆˆ๋Š” ๋ฐฐ์—ด๋กœ ์„ค์ •ํ•œ๋‹ค.

const config = {
    series: [{
    }, {
    }]
}

๊ฒŒ์ด์ง€

๊ฒŒ์ด์ง€๋Š” ๋‹จ์ผ ๊ฐ’์„ ํ‘œ์‹œํ•˜๋Š” ์ฐจํŠธ์˜ ๊ธฐ๋ณธ ๊ตฌ์„ฑ์š”์†Œ์ด๋‹ค.
'circle', 'linear' ๋“ฑ ๋ช‡ ์ข…๋ฅ˜์˜ ๊ฒŒ์ด์ง€๊ฐ€ ์žˆ์œผ๋ฉฐ, ๊ฒŒ์ด์ง€ ๊ณตํ†ต ์†์„ฑ ์™ธ์— ์ข…๋ฅ˜๋ณ„๋กœ ์ถ”๊ฐ€ ์†์„ฑ๋“ค์ด ์กด์žฌํ•  ์ˆ˜ ์žˆ๋‹ค. 'gauges' ๋˜๋Š” 'gauge' ์ด๋ฆ„์œผ๋กœ ํ•˜๋‚˜ ์ด์ƒ์˜ ๊ฒŒ์ด์ง€(๋“ค)์„ ์„ค์ •ํ•œ๋‹ค.
๋‘˜ ์ด์ƒ์˜ ๊ฒŒ์ด์ง€๋Š” ๋ฐฐ์—ด๋กœ ์„ค์ •ํ•œ๋‹ค.

const config = {
    gauges: [{
    }, {
    }]
}

์–ด๋…ธํ…Œ์ด์…˜

์–ด๋…ธํ…Œ์ด์…˜์€ ์‹œ๋ฆฌ์ฆˆ๋‚˜ ๊ฒŒ์ด์ง€์™€ ๊ด€๋ จ๋œ ๋ถ€๊ฐ€์ ์ธ ์ •๋ณด(ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€)๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์ฐจํŠธ ๊ตฌ์„ฑ ์š”์†Œ์ด๋‹ค.
'annotations' ๋˜๋Š” 'annotation' ์ด๋ฆ„์œผ๋กœ ํ•˜๋‚˜ ์ด์ƒ์˜ ์–ด๋…ธํ…Œ์ด์…˜(๋“ค)์„ ์„ค์ •ํ•œ๋‹ค.
๋‘˜ ์ด์ƒ์˜ ์–ด๋…ธํ…Œ์ด์…˜์€ ๋ฐฐ์—ด๋กœ ์„ค์ •ํ•œ๋‹ค.

const config = {
    annotations: [{
    }, {
    }]
}

๋ฒ”๋ก€(Legend)

์ฐจํŠธ ์‹œ๋ฆฌ์ฆˆ ๊ตฌ์„ฑ์„ ์ง๊ด€์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์†์„ฑ๋“ค์„ ์„ค์ •ํ•œ๋‹ค.

const config = {
    legend: {
    }
}

Body

์‹œ๋ฆฌ์ฆˆ๋‚˜ ๊ฒŒ์ด์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ์ฐจํŠธ ๋ณธ์ฒด ์˜์—ญ(plotting area)์— ๋Œ€ํ•œ ์†์„ฑ๋“ค์„ ์„ค์ •ํ•œ๋‹ค.

const config = {
    body: {
    }
}

Split

์ฐจํŠธ ๋ณธ์ฒด๋ฅผ ํ•˜๋‚˜ ์ด์ƒ์˜ ํ–‰๊ณผ ์—ด๋กœ ๋ถ„ํ• ํ•ด์„œ ๋ณด๋‹ค ๋‹ค์–‘ํ•œ ๋ฐฐ์น˜๋กœ ์‹œ๋ฆฌ์ฆˆ์™€ ๊ฒŒ์ด์ง€๋ฅผ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค.

const config = {
    split: {
    }
}