API
RealChart API

RealChart API ๊ฐœ์š”

RealChart ์›น ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ฒ˜์Œ ํ™”๋ฉด์— ํ‘œ์‹œ๋  ์ฐจํŠธ์˜ ๊ตฌ์„ฑ ์„ค์ •์„ ๋ชจ๋‘ ์ค€๋น„ํ•ด์„œ ์ฐจํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ๋ชจ๋“  ์ฐจํŠธ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์„ค์ •์„ JSON ๊ฐ์ฒด ํ•˜๋‚˜์— ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

const config = {
    title: {},
    legend: {},
    series: {},
    xAxis: {},
    yAxis: {},
    // ...
}
const chart = RealChart.createChart(document, 'container', config);

๋งŽ์€ ๊ฒฝ์šฐ ์ฐจํŠธ๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ์™„๋ฃŒ๋  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ฐจํŠธ์— ์—ฐ๊ฒฐํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋ผ์•ผ ํ•˜๊ฑฐ๋‚˜, ๊ตฌ์„ฑ ์š”์†Œ์˜ ํ‘œ์‹œ ์—ฌ๋ถ€๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๋“ฑ, ์‹คํ–‰ ์‹œ๊ฐ„ ์ค‘ ์ฐจํŠธ์˜ ์ƒํƒœ๋ฅผ ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. RealChart๋Š” ์‹คํ–‰ ์‹œ๊ฐ„ ์ฐจํŠธ์˜ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” API๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

API๋Š” ์ฐจํŠธ ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋ธ๋“ค์˜ ์ง‘ํ•ฉ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ๊ฐ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์ตœ์ƒ์œ„ ๊ฐ์ฒด์ธ ์ฐจํŠธ๋กœ ๋ถ€ํ„ฐ ์š”์†Œ์— ํ•ด๋‹นํ•˜๋Š” ๋ชจ๋ธ ํด๋ž˜์Šค์˜ ๊ฐ์ฒด๋กœ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ๋˜, ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋ธ๋“ค์€ ์ตœ์ƒ์œ„ ํด๋ž˜์Šค์ธ ChartItem์„ ์ง๊ฐ„์ ‘์ ์œผ๋กœ ๊ณ„์Šนํ•œ๋‹ค. ChartItem์— ์‹คํ–‰ ์‹œ๊ฐ„ ์„ค์ • ๋ณ€๊ฒฝ์„ ์œ„ํ•œ ๋ฉ”์˜๋“œ๋“ค์ด ๊ตฌํ˜„๋˜์–ด ์žˆ๋‹ค.

const axis = chart.xAxis;   // ์ฒซ๋ฒˆ์งธ x์ถ• ๋ชจ๋ธ.

๋˜, ์ฐจํŠธ์ปจํŠธ๋กค์—์„œ ๊ฐ€์ ธ์˜จ ์ƒ์œ„ ๋ชจ๋ธ ๊ฐ์ฒด ๋“ฑ์€ ํ•˜์œ„ ์š”์†Œ ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค.

const title = axis.title;   // ์ถ• ํƒ€์ดํ‹€ ๋ชจ๋ธ.

๊ฐ ๋ชจ๋ธ ๊ฐ์ฒด๋“ค์€ ์„ค์ • ์˜ต์…˜์„ ํ†ตํ•ด ๋™์ž‘๊ณผ ํ‘œ์‹œ ๋ฐฉ์‹์„ ์ง€์ •ํ•˜๋Š”๋ฐ, ์˜ต์…˜ ์†์„ฑ๋“ค์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ชจ๋ธ ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

console.log(axis.title.options.text);   // ์ถ• ํƒ€์ดํ‹€ ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.
 
axis.title.updateOption('text', 'Chart Title');  // ์ถ• ํƒ€์ดํ‹€ ํ…์ŠคํŠธ๋ฅผ ์žฌ์„ค์ •ํ•œ๋‹ค.
 
// ๋˜๋Š” ์—ฌ๋Ÿฌ ์†์„ฑ์„ ํ•œ๊บผ๋ฒˆ์— ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
axis.title.updateOptions({
    text: 'Chart Title',
    style: {
        fill: 'blue'
    }
});
 
// ์˜ต์…˜ ๊ฐ์ฒด์˜ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜๋Š” ์žˆ์ง€๋งŒ, ์‹ค์ œ ๋™์ž‘๊ณผ ํ‘œ์‹œ์— ๋ฐ˜์˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” 
// ๋ฐ˜๋“œ์‹œ updateOptions๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค.
// ์˜ต์…˜ ์†์„ฑ์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅ๋˜์ง€ ์•Š๋Š”๋‹ค.
axis.title.options.text = 'Title';
axis.title.updateOptions();

๋˜, ๋ชจ๋ธ์˜ options ๊ฐ์ฒด๋Š” ์‹คํ–‰ ์ค‘ ์–ธ์ œ๋“  ์ƒˆ๋กœ์€ ๊ฒƒ์œผ๋กœ ๋ฐ”๋€” ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, options ๊ฐ์ฒด๋ฅผ ์™ธ๋ถ€์—์„œ ๊ฐ€์ ธ๊ฐ€ ์œ ์ง€ํ•˜๋ฉฐ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๋ฌธ์ œ๊ฐ€ ๋œ๋‹ค.