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 ๊ฐ์ฒด๋ฅผ ์ธ๋ถ์์ ๊ฐ์ ธ๊ฐ ์ ์งํ๋ฉฐ ์ฌ์ฉํ๋ ๊ฒ์ ๋ฌธ์ ๊ฐ ๋๋ค.